Design System Aufbauen mit Tailwind CSS und shadcn/ui

Ein konsistentes Design System spart Entwicklungszeit, verbessert UX und macht Ihr Produkt professioneller. Dieser Guide zeigt, wie Sie ein modernes Design System mit Tailwind CSS und shadcn/ui aufbauen.

1. Warum Jedes Projekt Ein Design System Braucht

• Konsistente UI über alle Pages

• Wiederverwendbare Components = schnellere Entwicklung

• Einfachere Wartung und Updates

• Bessere Accessibility out-of-the-box

• Professionellere User Experience

2. Setup: Tailwind CSS mit Custom Theme

// tailwind.config.ts
export default {
  darkMode: 'class',
  theme: {
    extend: {
      colors: {
        primary: {
          50: '#f0fdfa',
          500: '#14b8a6',
          900: '#134e4a',
        },
        // ... weitere Farben
      },
      fontFamily: {
        sans: ['Inter', 'sans-serif'],
        mono: ['Fira Code', 'monospace'],
      },
      borderRadius: {
        'lg': '0.75rem',
        'xl': '1rem',
      }
    }
  }
}

3. shadcn/ui Integrieren

shadcn/ui ist keine Component Library – es sind kopierbare Components die Sie besitzen:

# shadcn/ui initialisieren
npx shadcn-ui@latest init

# Components hinzufügen
npx shadcn-ui@latest add button
npx shadcn-ui@latest add card
npx shadcn-ui@latest add dialog

• ✅ Volle Kontrolle über Code

• ✅ Keine npm Dependencies für jede Component

• ✅ Einfach anpassbar

• ✅ TypeScript-first

4. Custom Components Aufbauen

Bauen Sie Ihre eigenen Components auf shadcn/ui Basis:

// components/ui/feature-card.tsx
import { Card, CardHeader, CardTitle, CardContent } from './card';
import { Button } from './button';

export function FeatureCard({ title, description, icon: Icon }) {
  return (
    <Card className="hover:shadow-lg transition-shadow">
      <CardHeader>
        <Icon className="h-10 w-10 text-primary" />
        <CardTitle>{title}</CardTitle>
      </CardHeader>
      <CardContent>
        <p className="text-muted-foreground">{description}</p>
        <Button variant="ghost" className="mt-4">
          Learn More →
        </Button>
      </CardContent>
    </Card>
  );
}

5. Dark Mode Implementierung

Dark Mode ist Standard in modernen Apps:

// app/providers.tsx
'use client'
import { ThemeProvider } from 'next-themes';

export function Providers({ children }) {
  return (
    <ThemeProvider attribute="class" defaultTheme="system">
      {children}
    </ThemeProvider>
  );
}

// components/theme-toggle.tsx
'use client'
import { useTheme } from 'next-themes';

export function ThemeToggle() {
  const { theme, setTheme } = useTheme();

  return (
    <button onClick={() => setTheme(theme === 'dark' ? 'light' : 'dark')}>
      Toggle Theme
    </button>
  );
}

6. Accessibility Best Practices

• Semantisches HTML verwenden

• ARIA-Labels für interaktive Elements

• Keyboard-Navigation unterstützen

• Farbkontrast mindestens AA (4.5:1)

• Focus States klar sichtbar machen

Performance-Überlegungen

Design Systems sollten auch performant sein. Nutzen Sie Code Splitting für große Component Libraries und optimieren Sie für schnelle Ladezeiten.

Fazit

Ein gut strukturiertes Design System mit Tailwind CSS und shadcn/ui ist Investment in die Zukunft. Es macht Entwicklung schneller, Code wartbarer und das Produkt konsistenter. Starten Sie klein mit basics (Button, Card, Input) und erweitern Sie graduell.