Provides color token knowledge and usage guidelines.
We follow a simple convention for colors: the background variable sets the component's background color, while the foreground variable sets the text color on that background.
Here's a list of variables you can customize:
Use background for the body background and foreground for the text color.
Loading...
Use background for the card's background and foreground for the card's text color.
Loading...
Use background for the popover's background and foreground for the popover's text color.
Loading...
You can set the border, ring color, and default border radius.
Loading...
Use for primary action buttons or elements.
Loading...
Use for secondary action buttons or elements with lower impact.
Loading...
Use for error messages or elements indicating an error state.
Loading...
This is a default palette used across various use cases, as described below.
Loading...