Get started with Cloak UI in 5 minutes. Install, configure, and build your first unified component.

Quick Start Guide

Get up and running with Cloak UI in just a few minutes. This guide will walk you through installing Cloak UI and creating your first unified component.

This quick start guide gets you productive fast. For more detailed setup instructions, see the Setup & Integration guide.

Prerequisites

Before you begin, make sure you have:

Node.js 18+ installed
npm, pnpm, or yarn package manager
A Next.js or React project (or create a new one)

Step 1: Install Dependencies

Choose your preferred design system and install the corresponding Cloak UI package:

Option A: Using shadcn/ui

# Install shadcn-core package
pnpm add @cloakui/shadcn-core

# Or with npm
npm install @cloakui/shadcn-core

Option B: Using Hero UI

# Install heroui-core package
pnpm add @cloakui/heroui-core

# Or with npm
npm install @cloakui/heroui-core

Step 2: Configure Path Aliases (Optional but Recommended)

Add path aliases to your tsconfig.json for cleaner imports:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "@/components/*": ["components/*"],
      "@/lib/*": ["lib/*"]
    }
  }
}

Step 3: Create Your First Component

Let's create a simple button component using Cloak UI:

Using shadcn/ui

// components/my-button.tsx
import { Button } from '@cloakui/shadcn-core'

export function MyButton() {
  return (
    <Button variant="primary" size="md">
      Click Me!
    </Button>
  )
}

Using Hero UI

// components/my-button.tsx
import { Button } from '@cloakui/heroui-core'

export function MyButton() {
  return (
    <Button variant="primary" size="md">
      Click Me!
    </Button>
  )
}

Notice how the component code is identical? That's the power of Cloak UI's unified API!

Step 4: Use It in Your App

// app/page.tsx or pages/index.tsx
import { MyButton } from '@/components/my-button'

export default function Home() {
  return (
    <main className="flex min-h-screen items-center justify-center">
      <MyButton />
    </main>
  )
}

Step 5: Explore More Components

Cloak UI provides wrappers for 30+ components. Try adding more to your app:

import { Button, Card, Badge, Input } from '@cloakui/shadcn-core'
// or
import { Button, Card, Badge, Input } from '@cloakui/heroui-core'

export function Dashboard() {
  return (
    <Card>
      <div className="space-y-4">
        <Badge variant="success">Active</Badge>
        <Input placeholder="Enter your name" />
        <Button variant="primary">Submit</Button>
      </div>
    </Card>
  )
}

Switching Design Systems

Want to switch from shadcn/ui to Hero UI (or vice versa)? Just change the import:

// Before (shadcn/ui)
import { Button } from '@cloakui/shadcn-core'

// After (Hero UI)
import { Button } from '@cloakui/heroui-core'

// Your component code stays exactly the same! ✨

For larger apps, consider using a centralized wrapper pattern as described in the Setup & Integration guide.

What's Next?

Now that you have Cloak UI installed and working:

📚 Learn More

Supported Design Systems - See all supported libraries
Setup & Integration - Advanced configuration options

🧩 Explore Components

Button - Buttons with multiple variants
Card - Container components
Input - Form inputs
Dialog - Modal dialogs
View All Components →

🎨 Customize

Learn how to customize themes and styling
Create your own component wrappers
Extend Cloak UI with custom adapters

Need Help?

Having trouble? Check out our Resources & FAQ or join our community for support.

Congratulations! 🎉 You've successfully set up Cloak UI and created your first unified component.

Quick Start

On this page