Blog

How semantic colors work in shadcn/ui

Learn how semantic colors work in shadcn/ui — why naming colors by role instead of hue keeps your UI consistent, accessible, and easy to theme across light and dark mode.

article·March 5, 2026·5 min read
How semantic colors work in shadcn/ui
MW
Matt Wierzbicki

Founder @ shadcndesign.com

Continue reading

Related articles

View all articles
How to paste Tailwind v4 @theme CSS variables from a shadcn Theme Generator
article·4 min

How to paste Tailwind v4 @theme CSS variables from a shadcn Theme Generator

A step-by-step guide for pasting Tailwind v4 @theme CSS variables from a shadcn theme generator into your globals.css. Covers the new CSS-first theming workflow, common mistakes, and how to fix them fast.

How to choose the right shadcn/ui style for your project
article·10 min

How to choose the right shadcn/ui style for your project

Compare shadcn/ui styles to choose the right visual foundation for your product UI, Figma kit, and design system workflow.

Best Figma design system kits for development teams (2026)
article·9 min

Best Figma design system kits for development teams (2026)

A practical 2026 comparison of Figma design system kits that map cleanly to code, with notes on variables, plugins, maintenance, and pricing.

Level-up your workflow today

One-time payment
14 days refund policy