⚡Vibe Coding

Shadcn UI Komponenten

Profi-UI Komponenten in Sekunden installieren

Shadcn UI gibt dir wunderschoene, barrierefreie Komponenten die du direkt in dein Projekt kopierst. Kein riesiges npm-Paket, kein Vendor Lock-in. Du besitzt den Code und kannst alles anpassen.

Pro-Tip — Der schnelle Weg
Sag Claude Code: 'Nutze shadcn/ui Komponenten' in deiner CLAUDE.md. Dann verwendet es automatisch die richtigen Imports und Patterns.
Seite 1
1

Shadcn initialisieren

Fuehre den init-Befehl in deinem Next.js Projekt aus. Er erstellt die Konfiguration und richtet Tailwind korrekt ein. Waehle den Default-Style und deine Lieblingsfarbe.

npx shadcn@latest init
2

Komponenten hinzufuegen

Installiere einzelne Komponenten nach Bedarf. Jede Komponente landet als Datei in deinem Projekt. Du kannst sie beliebig anpassen.

npx shadcn@latest add button card dialog input table
3

Komponenten verwenden

Importiere die Komponenten und nutze sie. Sie sind bereits gestylt, barrierefrei und responsive. Tailwind-Klassen funktionieren fuer Anpassungen.

import { Button } from '@/components/ui/button'
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card'


export default function Page() {
 return (
 <Card>
 <CardHeader>
 <CardTitle>Mein Dashboard</CardTitle>
 </CardHeader>
 <CardContent>
 <Button>Los gehts</Button>
 </CardContent>
 </Card>
 )
}
4

Theme anpassen

Aendere die CSS-Variablen in globals.css um Farben, Radius und Spacing global anzupassen. Shadcn nutzt HSL-Farben die einfach zu aendern sind.

:root {
 --primary: 222.2 84% 4.9%;
 --radius: 0.75rem;
}
5

Claude Code + Shadcn

Claude Code kennt alle Shadcn Komponenten. Sag einfach 'Bau mir ein Dashboard mit Shadcn Cards, Table und Charts' und es nutzt automatisch die richtigen Patterns.

Seite 2
Warum das funktioniert
  • Du besitzt den Code, kein Vendor Lock-in wie bei Material UI
  • Barrierefreiheit ist eingebaut, nicht nachtraeglich drangeklebt
  • Tailwind-basiert, passt perfekt zu Next.js Projekten
  • Claude Code kennt alle Shadcn Patterns und nutzt sie korrekt
Tipps
  • Installiere nur Komponenten die du brauchst, weniger Bundle-Groesse
  • Die Datei components.json steuert Pfade und Styling-Optionen
  • Shadcn basiert auf Radix UI, die Doku dort hilft bei komplexen Props
  • Nutze 'npx shadcn@latest diff' um Updates zu sehen
Seite 3
Bereit für den nächsten Schritt?

KIWorld VibeCoding Masterclass

Du willst nicht nur einzelne Tools einrichten, sondern wirklich lernen wie du mit KI komplette Apps, Websites und SaaS-Produkte baust? Über 700 Videos — von Anfänger bis Fortgeschritten — in jedem Bereich. Von der Idee bis zum fertigen Produkt, ohne eine Zeile Code selbst zu schreiben.

Jetzt Masterclass ansehen