Customization Guide
Transform MoonUI components to match your design vision with powerful customization options
Tailwind Classes
Simple styling with className prop
<Button className="bg-gradient-to-r from-orange-500">No Setup Required
Works immediately with any component
Full Tailwind Power
All utilities at your disposal
CVA Variants
Structured variants with TypeScript support
const variants = cva("base", { ... })Type Safety
Full IntelliSense support
Reusable Patterns
Define once, use everywhere
Class-Based Styling
The quickest way to customize components
1. Basic Customization
All MoonUI components accept a className prop for instant customization:
// Gradient Button
<Button className="bg-gradient-to-r from-brand-500 to-brand-accent-500
hover:from-brand-600 hover:to-brand-accent-600">
Click Me
</Button>
// Custom Card
<Card className="border-2 border-dashed shadow-xl">
<CardContent>Custom styled card</CardContent>
</Card>2. Advanced Effects
Combine multiple utilities for complex effects:
// Glowing button
<Button className="shadow-[0_0_15px_rgba(168,85,247,0.5)]
hover:shadow-[0_0_30px_rgba(168,85,247,0.7)]
transition-all duration-300">
Glow Effect
</Button>Live Examples:
CVA Variant System
Type-safe component variants
1. What is CVA?
Class Variance Authority (CVA) provides a type-safe way to create component variants:
import { cva } from "class-variance-authority"
const buttonVariants = cva(
"inline-flex items-center justify-center font-medium",
{
variants: {
variant: {
primary: "bg-blue-500 text-white hover:bg-blue-600",
secondary: "bg-gray-200 text-gray-900 hover:bg-gray-300",
danger: "bg-red-500 text-white hover:bg-red-600"
},
size: {
sm: "h-8 px-3 text-sm",
md: "h-10 px-4 text-base",
lg: "h-12 px-6 text-lg"
}
},
defaultVariants: {
variant: "primary",
size: "md"
}
}
)2. Compound Variants
Apply styles based on multiple variant combinations:
compoundVariants: [
{
variant: "primary",
size: "lg",
class: "uppercase tracking-wider"
}
]Component Composition
Build complex UIs from simple parts
Compound Components
Components that work together sharing implicit state
<Select>
<SelectTrigger />
<SelectContent>
<SelectItem />
</SelectContent>
</Select>Slot Pattern
Flexible content injection with named slots
<Layout
header={<Header />}
sidebar={<Sidebar />}
>
<Content />
</Layout>Wrapper Pattern
Enhance components with additional features
const Enhanced = withTooltip(Button) <Enhanced tooltip="Info" />