Heads up

This is a work in progress and right now we only support CSS variables. You can customize these directly in your laravel-luvi.css after publishing them as described in the installation guide.

The variables published there will match the "New York" theme from shadcn/ui. The full list of variables can be found in the official shadcn/ui documentation .

Adding new colors

To add new colors, you need to add them to your CSS file and to your tailwind.config.js file. Here is an example:

/* app.css */
:root {
    --warning: 38 92% 50%;
    --warning-foreground: 48 96% 89%;
}
 
.dark {
    --warning: 48 96% 89%;
    --warning-foreground: 38 92% 50%;
}

// tailwind.config.js
module.exports = {
  theme: {
      extend: {
          colors: {
              warning: "hsl(var(--warning))",
              "warning-foreground": "hsl(var(--warning-foreground))",
          },
      },
  },
}

You can now use the warning utility class in your components.

<div class="bg-warning text-warning-foreground">