Welcome to Cloak UI

Cloak UI is a universal abstraction layer for frontend components that lets you build your UI once and use it with any design system—shadcn/ui, Hero UI, and more.

The Problem

Modern frontend development moves fast, but UI libraries and design systems change even faster. Traditional approaches tightly couple your code to a specific vendor, making migrations:

• 🔴 Costly - Rewriting components across your entire app
• 🔴 Risky - Breaking changes and inconsistent behavior
• 🔴 Time-consuming - Months of refactoring work

The Solution

Cloak UI provides a stable, unified API that works across multiple design systems. Change your design system by swapping a wrapper—not rewriting your entire codebase.

// Your component code stays the same
import { Button } from '@cloakui/wrapper/button'

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

// Just swap the underlying wrapper to switch design systems!
// No changes to your component code needed

Key Benefits

🎯 No Vendor Lock-In

Switch between shadcn/ui, Hero UI, or other libraries without refactoring your components.

🔄 Consistent API

Use the same props, variants, and patterns across all supported UI systems.

⚡️ Effortless Migration

Change your design system by updating a wrapper file, not rewriting thousands of lines of code.

🚀 Scalable Collaboration

Share components across teams and projects, regardless of underlying UI library choices.

💪 Type-Safe

Full TypeScript support with intelligent autocomplete and type checking.

📦 Production Ready

Battle-tested wrappers for 30+ components across multiple design systems.

How It Works

1. Install Cloak UI - Add the wrapper package for your preferred design system
2. Import Components - Use Cloak UI's unified component API in your app
3. Build Your UI - Develop features using consistent props and patterns
4. Switch Anytime - Migrate to a different design system by updating imports

Perfect For

🏢 Teams & Organizations

• Faster iteration and redesigns with minimal effort
• Lower technical debt and migration risk
• Better collaboration across projects with different design systems

👨‍💻 Individual Developers

• Future-proof your projects against library changes
• Experiment with different design systems easily
• Maintain consistency across multiple projects

📚 Design System Migrations

• Migrating from Material UI to shadcn/ui?
• Switching from Chakra to Hero UI?
• Cloak UI makes it painless

What's Next?

Recommended Reading Order:

1. Quick Start - Get up and running in 5 minutes
2. Supported Design Systems - See which libraries we support
3. Setup & Integration - Detailed installation guide
4. Component Documentation - Explore available components

Built for modern frontend teams—build for today, adapt for tomorrow. ✨