Apply Theme

• Primary: Warm orange (#f97316)
• Style: Rounded corners, smooth transitions
• Radius: 1rem
• Best for: Consumer apps, friendly interfaces

Maia (Minimal, Monochrome)

• Primary: Pure black (#171717)
• Style: Clean lines, no color distractions
• Radius: 0.25rem
• Best for: Documentation, content-focused sites

Lyra (Vibrant, Colorful)

• Primary: Purple (#8b5cf6) with pink accent
• Style: Gradients, shadows with color
• Radius: 0.5rem
• Best for: Marketing, creative applications

Mira (Classic, Corporate)

• Primary: Navy blue (#1e3a5f)
• Style: Professional, conservative
• Radius: 0.375rem
• Best for: Business applications, finance

Process

Step 1: Install Theme Package

cd {target}
bun add @crazyone/ui-{theme}

Step 2: Configure Tailwind

Update target's tailwind.config.ts:

export default {
  content: [
    './src/**/*.{ts,tsx}',
    './node_modules/@crazyone/ui-{theme}/dist/**/*.js'
  ],
  // Theme extends from CSS variables set in styles
}

Step 3: Import Theme Styles

Add to main CSS file (e.g., globals.css):

@import '@crazyone/ui-{theme}/styles.css';

Step 4: Update Component Imports

Replace existing shadcn imports with themed variants:

// Before
import { Button } from "@/components/ui/button"

// After
import { Button } from "@crazyone/ui-{theme}"

Verification

After applying, verify:

• CSS variables are loaded (check --primary in devtools)
• Components render with correct styling
• Dark mode toggle works (if applicable)