BrandCn themes work seamlessly with shadcn/ui components. Learn how they integrate and what classes to use.
BrandCn themes use the exact same CSS variable names that shadcn/ui expects. This means themes automatically apply to all shadcn/ui components without any extra configuration.
All these shadcn/ui utility classes work with BrandCn themes:
/* Background colors */ bg-background, bg-foreground bg-primary, bg-primary-foreground bg-secondary, bg-secondary-foreground bg-muted, bg-muted-foreground bg-accent, bg-accent-foreground bg-card, bg-popover /* Text colors */ text-background, text-foreground text-primary, text-primary-foreground text-secondary, text-secondary-foreground text-muted, text-muted-foreground text-accent, text-accent-foreground /* Border colors */ border-input border-ring border-primary /* And more... */
Here's how BrandCn themes style shadcn/ui components:
/* Button component */
<Button className="bg-primary text-primary-foreground hover:bg-primary/90" />
/* Card component */
<Card className="bg-card text-card-foreground border-border">
<CardHeader>
<CardTitle>Title</CardTitle>
<CardDescription>Description</CardDescription>
</CardHeader>
</Card>
/* Input component */
<Input className="bg-background border-input focus:ring-ring" />Both BrandCn and shadcn/ui use CSS variables that map to Tailwind's color system. When you apply a theme, all the variables update automatically.
/* shadcn/ui uses these variables */
.bg-primary {
background-color: hsl(var(--primary));
}
/* BrandCn defines these variables */
:root {
--primary: 221.2 83.2% 53.3%;
}If you haven't set up shadcn/ui yet, here's how:
/* Initialize shadcn/ui */ npx shadcn@latest init /* Add components */ npx shadcn@latest add button npx shadcn@latest add card npx shadcn@latest add input
BrandCn themes are compatible with shadcn/ui v0.5+ and Tailwind CSS v3+. They also work with Tailwind v4 with minimal adjustments.