How to know which shadcn css variable to change to get desired design?
Unanswered
Atlantic herring posted this in #help-forum
Atlantic herringOP
I know this isn’t a Next.js-specific question, but I figured there are probably a lot of shadcn users here.
Given is this color palette and I want to achieve this kind of dashboard. I'm using Next.js 15, Tailwind CSS version 4 and shadcn.
How do I know which shadcn CSS variable gets which color of the color palette, like gray-50, gray-700, etc in this case?
So my problem is essentially, which CSS variable maps to which color?
I know all the --primary and other CSS variables exist, but it’s kinda hard to wrap my head around where, for example, --accent (and the others) actually get used, you know?
Would appreciate any guidance.
Given is this color palette and I want to achieve this kind of dashboard. I'm using Next.js 15, Tailwind CSS version 4 and shadcn.
How do I know which shadcn CSS variable gets which color of the color palette, like gray-50, gray-700, etc in this case?
So my problem is essentially, which CSS variable maps to which color?
I know all the --primary and other CSS variables exist, but it’s kinda hard to wrap my head around where, for example, --accent (and the others) actually get used, you know?
Would appreciate any guidance.
3 Replies
Check these out:
Heres the color palette for Tailwind v4 in
https://tailwindcss.com/docs/colors
Here select
https://ui.shadcn.com/colors
Heres the color palette for Tailwind v4 in
oklchhttps://tailwindcss.com/docs/colors
Here select
oklch, for the new Tailwind v4 defaulthttps://ui.shadcn.com/colors
About the where the variables are used that’s pretty much an implementation detail you can see in the ShadCn components code. But basically:
And I believe
If this somewhat helps, I’m making a tool for shadcn + tailwind 4: https://themux.vercel.app
—primary is used for the default buttons, rings, and everything that’s like the brand color—popover, —card, —sidebar are used as the background color of those specific components (same with—foreground-*)—border is for borders and edges.And I believe
—accent is used for hover effectsIf this somewhat helps, I’m making a tool for shadcn + tailwind 4: https://themux.vercel.app
Atlantic herringOP
Thanks for your help!