Tailwind CSS + shadcn/ui: Building a Design System in Minutes

Why shadcn/ui?

Unlike traditional component libraries (MUI, Chakra UI), shadcn/ui takes a unique approach: you own the code. Components are copied directly into your project, giving you full control to customize them.

Setting Up Dark Mode

With next-themes and Tailwind's dark mode class strategy, implementing a theme toggle is straightforward:

// tailwind.config.ts
export default {
  darkMode: ["class"],
  theme: {
    extend: {
      colors: {
        background: "hsl(var(--background))",
        foreground: "hsl(var(--foreground))",
        primary: {
          DEFAULT: "hsl(var(--primary))",
          foreground: "hsl(var(--primary-foreground))",
        },
      },
    },
  },
}

CSS Variables for Theming

:root {
  --background: 0 0% 100%;
  --foreground: 222.2 84% 4.9%;
  --primary: 221.2 83.2% 53.3%;
}

.dark {
  --background: 222.2 84% 4.9%;
  --foreground: 210 40% 98%;
  --primary: 217.2 91.2% 59.8%;
}

The Result

A pixel-perfect, accessible, responsive UI that you fully own and control — no fighting against library defaults, no massive bundle bloat.