Styling

Convention

We use a simple background and foreground convention for colors. The background variable is used for the background color of the component and the foreground variable is used for the text color.

List of variables

Hop on over to this link --> https://ui.shadcn.com/docs/theming#list-of-variables to see the list of variables that are used in the components.

You will also learn what they are used for.

Class Variance Authority

Class Variance Authority is used to add different styles to the components based on values passed to different props.

Visit the Class Variance Authority page to learn more about it.

To get Intellisense for CVA, visit the CVA Intellisense page.

Adding your own styles

To add new colors, you need to add them to your CSS file and to your tailwind.config.ts file.

:root {
  --warning: 38 92% 50%;
  --warning-foreground: 48 96% 89%;
}

.dark {
  --warning: 48 96% 89%;
  --warning-foreground: 38 92% 50%;
}

module.exports = {
  theme: {
    extend: {
      colors: {
        warning: "hsl(var(--warning))",
        "warning-foreground": "hsl(var(--warning-foreground))",
      },
    },
  },
};