Manage shadcn/ui components with Tailwind v4. Focuses on ownership, customization, and accessible UI patterns.
components/ui. Modify it to fit your brand.Tailwind v4 uses CSS variables for theming. Ensure your globals.css maps variables correctly:
@theme {
--color-background: var(--background);
--color-foreground: var(--foreground);
--color-primary: var(--primary);
/* ... etc */
}
:root {
--background: oklch(100% 0 0);
--primary: oklch(60% 0.15 250);
}
npx shadcn@latest init (Select Tailwind v4 option).npx shadcn@latest add <component> to get the source code.components/ui directly. Avoid adding logic; keep it presentational.cn() utility for merging classes and handling conditional styles.asChild prop from Radix primitives to maintain semantic HTML.'use client' if using Next.js App Router.src/components/ui.@theme.