Supported Design Systems

Cloak UI provides a unified API that works seamlessly across multiple React component libraries. Write your UI once, then choose—or switch—your design system without rewriting code.

How It Works

Cloak UI acts as a translation layer between your application code and the underlying UI library. Each wrapper maps Cloak UI's unified props to the specific library's API.

// Your application code stays the same
import { Button } from '@cloakui/shadcn-core'
// or swap to: '@cloakui/heroui-core'

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

Currently Supported

📦 shadcn/ui

shadcn/ui is a collection of re-usable components built using Radix UI and Tailwind CSS. It's not a traditional component library—components are directly added to your project for full customization.

Why shadcn/ui?

• 🎨 Highly customizable
• ♿️ Built on accessible Radix primitives
• 🎭 Beautiful, modern design
• 🔧 Full control over component code

Installation:

pnpm add @cloakui/shadcn-core

Usage:

import { Button, Card, Input, Dialog } from '@cloakui/shadcn-core'

export function Example() {
  return (
    <Card>
      <Input placeholder="Enter text" />
      <Button variant="primary">Submit</Button>
    </Card>
  )
}

Available Components: 30+ components including Button, Card, Input, Dialog, Tabs, Select, and more.

🦸 Hero UI

Hero UI (formerly NextUI) is a beautiful, modern React component library with a focus on customization and developer experience. Built with React Aria for accessibility.

Why Hero UI?

• ✨ Stunning out-of-the-box design
• ♿️ Built on React Aria
• 🎨 Advanced theming system
• ⚡️ Excellent performance

Installation:

pnpm add @cloakui/heroui-core

Usage:

import { Button, Card, Input, Dialog } from '@cloakui/heroui-core'

export function Example() {
  return (
    <Card>
      <Input placeholder="Enter text" />
      <Button variant="primary">Submit</Button>
    </Card>
  )
}

Available Components: 30+ components including Button, Card, Input, Dialog, Tabs, Select, and more.

Component Parity

Both design systems support the same Cloak UI components with identical APIs:

Switching Between Systems

Migrating between design systems is as simple as changing your import source:

// Using shadcn/ui
import { Button, Card } from '@cloakui/shadcn-core'

// Switch to Hero UI
import { Button, Card } from '@cloakui/heroui-core'

// Your component code stays exactly the same! 🎉

For detailed migration strategies, see the Setup & Integration guide.

Coming Soon

We're actively working on adapters for more popular design systems:

• 🎯 Chakra UI - Simple, modular component library
• 🎨 Material UI - Google's Material Design
• 🔧 Radix UI - Direct Radix primitives support
• 🌈 Mantine - Feature-rich component library
• 🎭 Ant Design - Enterprise-class UI design
• 🚀 Park UI - Beautifully designed components

Benefits of Multi-System Support

🔄 Easy Experimentation

Try different design systems without committing to a full rewrite. Test Hero UI for one project, shadcn/ui for another.

🏢 Team Flexibility

Different teams can use different design systems while sharing the same component code.

📦 Gradual Migration

Migrate from one system to another gradually, one component at a time.

🎨 Best of Both Worlds

Mix and match components from different systems in the same app (advanced use case).

What's Next?

Ready to start building? Check out the Quick Start Guide or dive into the Setup & Integration documentation.

Explore Components:

• View all components →
• Button Documentation
• Card Documentation