Atlas v0.1 · Living Documentation

ZVV Atlas Showcase

Lauffähige Beispiele aller Atlas-Patterns. Jede Sektion verlinkt zurück zur Spec auf github.com/zvvch/zvv-atlas. Mock-Backend — keine echten Daten, kein Mail-Versand.

Tour starten Repo auf GitHub

Pattern-Katalog

19 Sektionen · 6 Gruppen

Foundation

Color-Tokens

Light/Dark Token-Swatches mit Click-to-Copy.

Typographie

ZVV Brown Narrow Stufen + Geist Mono.

Icons

lucide-react Showcase mit Suche.

Navigation

Topbar, Breadcrumb, Footer interaktiv.

Komponenten

shadcn/ui Button, Card, Dialog, Tabs.

Toasts

sonner Variants — success, error, info, promise.

Empty States

No-data, No-match, Error Varianten.

Skeletons

Loading-State-Skeletons: Avatar, Cards, Tabelle, KPI.

Daten

Tabellen

TanStack Table mit 250 Mock-Fahrzeugen, Suche & Pagination.

Formulare

useActionState + Mock-Server-Action mit Error-States.

Dashboard

KPI-Tiles + Recharts Bar/Line/Progress.

Charts

Recharts (default) vs ECharts (datenintensiv).

Flows

Login

3-Column Login-Page Pattern.

Auth Flow

5-Step Magic-Link Visualisierung + Pre-Check-Matrix.

Mail-Templates

zvv-mailer rawHtml Preview mit Iframe-Sandbox.

Motion

Animation-Patterns: Atmosphäre · Interaktion · Bewegung.

Projekt-Heroes

5 bespoke animierte Hero-Header pro ZVV-App + Full-View.

ZVV Lotties

34 offizielle ZVV-Animationen + Drag-&-Drop-Composer.

Betrieb

Health Status

/api/health Response visualisiert.