⚡Frontend

Dashboard UI erstellen

Professionelle Dashboard-Oberflaeche mit Shadcn UI

Ein Dashboard von Null aufbauen dauert normalerweise Tage. Mit Shadcn UI und ein paar cleveren Komponenten hast du in 10 Minuten ein professionelles Layout.

Pro-Tip — Der schnelle Weg

Nutze CSS Grid mit grid-cols-1 md:grid-cols-2 lg:grid-cols-4 fuer responsive KPI-Karten. Funktioniert auf jedem Bildschirm automatisch.

Seite 1

Shadcn UI einrichten

Initialisiere Shadcn in deinem Next.js Projekt und installiere die benoetigten Komponenten.

npx shadcn@latest init
npx shadcn@latest add card badge table

KPI-Karten erstellen

Baue wiederverwendbare Statistik-Karten fuer die wichtigsten Metriken.

import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";

function KpiCard({ title, value, change }: { title: string; value: string; change: string }) {
return (
<Card>
<CardHeader className="pb-2">
<CardTitle className="text-sm text-muted-foreground">{title}</CardTitle>
</CardHeader>
<CardContent>
<div className="text-2xl font-bold">{value}</div>
<p className="text-xs text-green-500">{change}</p>
</CardContent>
</Card>
);
}

Dashboard Layout bauen

Kombiniere KPI-Karten, Tabelle und Sidebar zu einem vollstaendigen Dashboard.

export default function Dashboard() {
return (
<div className="flex min-h-screen">
<aside className="w-64 border-r p-4 hidden lg:block">
<nav className="space-y-2">
<a href="#" className="block p-2 rounded bg-muted">Dashboard</a>
<a href="#" className="block p-2 rounded hover:bg-muted">Kunden</a>
<a href="#" className="block p-2 rounded hover:bg-muted">Produkte</a>
</nav>
</aside>
<main className="flex-1 p-6 space-y-6">
<h1 className="text-3xl font-bold">Dashboard</h1>
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
<KpiCard title="Umsatz" value="12.450 EUR" change="+12% vs. Vormonat" />
<KpiCard title="Kunden" value="342" change="+8 diese Woche" />
<KpiCard title="Bestellungen" value="89" change="+23% vs. Vormonat" />
<KpiCard title="Conversion" value="3.2%" change="+0.4%" />
</div>
</main>
</div>
);
}

Daten-Tabelle einbauen

Fuer die letzten Aktivitaeten oder Bestellungen nutze die Shadcn Table-Komponente.

import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "@/components/ui/table";
import { Badge } from "@/components/ui/badge";

<Table>
<TableHeader>
<TableRow>
<TableHead>Kunde</TableHead>
<TableHead>Betrag</TableHead>
<TableHead>Status</TableHead>
</TableRow>
</TableHeader>
<TableBody>
<TableRow>
<TableCell>Max Mustermann</TableCell>
<TableCell>149 EUR</TableCell>
<TableCell><Badge variant="default">Bezahlt</Badge></TableCell>
</TableRow>
</TableBody>
</Table>

Seite 2

Warum das funktioniert

Shadcn UI gibt dir Copy-Paste Komponenten statt einer Blackbox-Library
Responsive Grid sorgt dafuer, dass das Dashboard auf Handy und Desktop funktioniert
KPI-Karten oben, Details unten -- das ist das Standard-Pattern, das User erwarten

Tipps

Shadcn-Komponenten landen direkt in deinem Code -- du kannst alles anpassen
Dark Mode geht automatisch wenn du Tailwind darkMode: 'class' nutzt
Fuer Charts: recharts oder tremor passen perfekt zu Shadcn UI

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