Styling

Learn how to style and customize components using Tailwind CSS and CSS variables.

Tailwind CSS

All components are built using Tailwind CSS classes. You can customize their appearance using Tailwind utility classes or by extending the default theme.

// Example of customizing a component with Tailwind
<Button className="bg-gradient-to-r from-blue-500 to-purple-500 hover:from-blue-600 hover:to-purple-600">
  Gradient Button
</Button>

CSS Variables

Components use CSS variables for colors, spacing, and other design tokens. You can override these variables to match your brand.

:root {
  --primary: 222.2 47.4% 11.2%;
  --primary-foreground: 210 40% 98%;
  
  /* Spacing */
  --spacing-1: 0.25rem;
  --spacing-2: 0.5rem;
  /* ... */
  
  /* Border radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
}

Component Variants

Many components support variants that can be used to change their appearance. You can also create custom variants.

// Built-in variants
<Button variant="default">Default</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="outline">Outline</Button>

// Custom variant
const buttonVariants = cva(
  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
  {
    variants: {
      variant: {
        custom: "bg-gradient-to-r from-pink-500 to-violet-500 text-white hover:from-pink-600 hover:to-violet-600",
      },
    },
  }
);
PreviousNotifications
NextTheming