Primary color - Method 1. Tailwind CSS
There are two methods that you can use to change the primary color in your shadcn/ui kit. In this lesson you will learn how to use Tailwind CSS predefined color as your primary color.
Instructions
- Open the variables panel
- Switch to 2. Theme collection
- Find the primary-light variable in the colors group
- Click on the neutral/900 variable in the value field
- Find and select the blue/600 variable
- Find the primary-dark variable in the colors group
- Click on the current variable in the value field
- Find and select the blue/600 variable
Up next
Primary color - Method 2. Custom color
Learn how to use a custom color as your primary color in the shadcn/ui kit for Figma.