Loading...
Loading...
Demonstration of Radix color system integration with consistent styling across components
Radix provides 12 carefully crafted steps for each color scale
gray-1
gray-2
gray-3
gray-4
gray-5
gray-6
gray-7
gray-8
gray-9
gray-10
gray-11
gray-12
How Radix colors work with shadcn/ui components
Success, warning, and error colors from the Radix palette
Success
var(--green-9)
Warning
var(--blue-9)
Error
var(--red-9)
How to use Radix colors in your components
background-color: var(--gray-2);
border-color: var(--gray-6);
color: var(--gray-12);className="bg-gray-2 border-gray-6 text-gray-12"className="bg-background text-foreground border-border"Understanding the purpose of each step in the color scale