Initialization

Set up CSS variables, utilities, theme helpers, and the theme toggle in your Next.js app. After this step you can add components or paste them from these docs.

CLI

Run from your project root. In this repository use npm run my-ui -- init. When the package is published, use npm exec -- my-ui init.

Initialize design system
npm exec -- my-ui init
What init creates
Creates:
• styles/globals.css — CSS variables (light/dark), .ui-btn, .ui-container
• styles/utilities.css — layout & spacing utilities
• lib/utils.ts — cn()
• lib/theme.ts — THEME_STORAGE_KEY
• hooks/useTheme.ts — useTheme()
• components/ui/theme-toggle.tsx
• Prepends imports into app/globals.css (or src/app/globals.css)

After init, follow MY_UI_THEME_LAYOUT.md (generated in your project) to add the theme script to app/layout.tsx.