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.

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.

Shadcn Pro Blocks guide: build landing pages, dashboards, and stores quickly
article·5 min

Shadcn Pro Blocks guide: build landing pages, dashboards, and stores quickly

Learn how to use Shadcn Pro Blocks to build landing pages, dashboards, and e-commerce stores faster with pre-structured, consistent UI sections.

Level-up your workflow today

One-time payment
14 days refund policy