Supported Design Systems

Cloak UI lets you build your UI with a single, consistent API.
Instead of tying your code to one library, you swap the wrapper import to map your components to the design system you want.

Adapters act as a bridge between your code and the underlying UI library.
You write your components once, and Cloak UI handles the translation.

📦 shadcn/ui

shadcn/ui is a composable React component library built on Radix UI and Tailwind CSS.

How to use Cloak UI with shadcn/ui:

// Use the Shadcn UI wrapper
import { Button as ShadcnButtonWrapper } from "@component/wrapper/button";

export function Example() {
  return <ShadcnButtonWrapper variant="primary">Click Me</ShadcnButtonWrapper>;
}

🦸 Hero UI

Hero UI is a modern, accessible React component library.

How to use Cloak UI with Hero UI:

// Use the Hero UI wrapper
import { Button as HeroButtonWrapper } from "@component/wrapper/button";

export function Example() {
  return <HeroButtonWrapper variant="primary">Click Me</HeroButtonWrapper>;
}

🔧 How Adapters Work

1. Unified API: Use Cloak UI’s consistent props and imports.
2. Adapter Layer: Cloak UI translates your props to the target library.
3. Instant Swap: Change the wrapper import—no component rewrites.

🚀 Benefits

• No Vendor Lock-In: Change design systems without rewriting your UI.
• Consistent Props: Same API for all supported libraries.
• Easy Maintenance: Simplifies large codebases.
• Extensible: Build and register your own adapters.

📅 Future Plans

Adapters coming soon for:

• Chakra UI
• Material UI
• Radix UI (direct)
• Mantine
• ...and more

💡 Want to contribute? See the adapter contribution guide.