Velora UI is designed to be highly customizable, allowing you to easily match your brand's aesthetic. Our theming system leverages CSS variables and Tailwind CSS to provide a flexible and powerful way to control the look and feel of your components.

Understanding CSS Variables

At the core of Velora UI's theming are CSS variables. These variables define colors, border radii, and other design tokens. You can override these variables in your `globals.css` file or directly within your Tailwind CSS configuration.

/* app/globals.css */
:root {
  --primary: 222.2 47.4% 11.2%;
  --secondary: 210 40% 96.1%;
  /* ... other variables */
}

.dark {
  --primary: 217.2 91.2% 59.8%;
  --secondary: 217.2 32.4% 17.3%;
  /* ... other variables for dark mode */
}

Tailwind CSS Integration

Velora UI components use Tailwind CSS classes that reference these CSS variables. This means you can extend or modify your `tailwind.config.js` to introduce new colors or adjust existing ones.

/* tailwind.config.js */
module.exports = {
  theme: {
    extend: {
      colors: {
        border: "hsl(var(--border))",
        input: "hsl(var(--input))",
        ring: "hsl(var(--ring))",
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
        // ... add your custom colors here
      },
    },
  },
};

For more detailed instructions, refer to our official theming documentation.