SaaS-Dashboard-Vorlage.
Eine vollständige Web-App-UI für ein SaaS-Analytics-Dashboard: acht Screens für ein Beispiel-Tool für Abo-Umsätze namens Tallywise, von der MRR-Übersicht und der Kundenliste bis zu Umsatzberichten, Rechnungen, Kohorten-Retention, Team-Einstellungen und dem ersten Start. Die Zahlen gehen auf jedem Screen auf, und jeder Screen ist einfaches HTML mit Tailwind, sodass Codex oder Claude Code ihn klonen und zu deiner App machen kann.
Aktualisiert am 7. November 2026
Website · 8 Seiten · Kostenlos und Open Source
01Übersicht 
02Kunden 
03Kundendetails 
04Umsatz 
05Rechnungen 
06Kohorten 
07Einstellungen 
08Onboarding
Klonen
npx degit ummydev/ui-templates/webapps/saas-dashboard my-app
Kopiert nur diese Vorlage in einen neuen Ordner, ohne den Rest des Repositorys.
Mach sie zu deiner
Das ist die Vorlage SaaS-Dashboard von codexdesign.io. Benenne sie in [dein Produkt] um, ersetze die Beispieldaten durch [deine Funktionen] und halte jeden Screen am Designsystem in DESIGN.md.
Füge das im neuen Ordner in Codex oder Claude Code ein.
- Gebaut mit
- HTML · Tailwind CSS v4 · Lucide icons · SVG charts
Was in der Vorlage steckt
| Screen | Was darauf ist |
|---|---|
| Übersicht | MRR, ARR, Kunden und Churn im Vergleich zum Vormonat, MRR-Bewegung, MRR nach Tarif, Ereignisse |
| Kunden | Suche, Filter nach Tarif und Status, Sortierung und eine Tabelle der Firmen mit Tarif und MRR |
| Kundendetails | Firmendaten, das Abo, MRR-Verlauf, Gesamtumsatz, Notizen und Aktivität |
| Umsatz | Zwölf Monate neuer, Expansions-, Kontraktions- und Churn-MRR, mit CSV-Export |
| Rechnungen | Rechnungen nach Status (offen, überfällig, Entwurf, bezahlt) neben der Vorschau einer Rechnung |
| Kohorten | Eine Retention-Tabelle nach Anmeldemonat, mit gewichtetem Mittel und seiner Deutung |
| Einstellungen | Teammitglieder und Rollen, Einladungen, maskierte API-Schlüssel und Rollenrechte |
| Onboarding | Der leere Zustand eines neuen Kontos, mit Schritten zum Verbinden von Stripe, Import und Einladen |
Die Beispieldaten sind der Oktober einer erfundenen Firma: 62.500 US-Dollar MRR, 750.000 US-Dollar ARR, 712 Kunden und 3,9 % Churn. Die vier Tarife ergeben genau diese Summen, die Bewegung des Monats geht ebenfalls auf (59.840 + 4.210 + 1.890 − 420 − 3.020 = 62.500), und die zwölf Monate im Umsatzbericht enden beim selben MRR wie die Übersicht. Die Kundennamen sind erfunden.
Jeder Screen ist eine HTML-Datei, gestaltet in 1440×900 und nutzbar auf einem 390 Pixel breiten Smartphone, wo die Seitenleiste zu einem Menü wird und Tabellen seitlich scrollen. Gestaltet mit Tailwind CSS v4 und einer gemeinsamen tokens.css. Zahlen stehen in IBM Plex Mono mit Tabellenziffern, Diagramme sind SVG, Tabellenzeilen lassen sich per Tastatur auswählen, und die Icons stammen von Lucide. Öffne einfach eine Datei im Browser; es gibt nichts zu installieren oder zu bauen.
Mit Codex oder Claude Code nutzen
Kopiere nur diese Vorlage aus dem ui-templates-Repository:
npx degit ummydev/ui-templates/webapps/saas-dashboard my-dashboard
Dann bitte deinen Agenten, sie zu deiner zu machen:
Dieser Ordner ist eine UI-Vorlage für ein SaaS-Dashboard. Mach daraus [dein Produkt], für [Zielgruppe]. Behalte DESIGN.md und tokens.css als Designsystem, ersetze Kennzahlen, Tarife, Kunden und Diagramme durch [deine Daten] und sorge dafür, dass alle Summen auf allen Screens übereinstimmen. Baue es danach in [Next.js / React / deinem Stack] und verbinde es mit [deiner Datenquelle].
Weil das Designsystem in DESIGN.md festgehalten ist, passen neue Screens, die dein Agent hinzufügt, etwa Warnungen, Segmente oder eine Prognose, zu den acht vorhandenen.
Gebaut auf dem Designsystem Ledger
Die Vorlage nutzt Ledger, ein dichtes, dunkles Designsystem für datenlastige Tools: IBM Plex Sans mit IBM Plex Mono für Zahlen, 6px-Ecken und ein einziger Terminal-Bernstein-Akzent für den aktiven Zustand und wichtige Werte. Seine Seite zeigt eine Live-Vorschau, die vollständige DESIGN.md und ein shadcn-Theme.
Häufige Fragen
Ist diese SaaS-Dashboard-Vorlage kostenlos?
Ja. Sie ist Open Source unter der MIT-Lizenz, für private und kommerzielle Projekte.
Kann ich sie mit Next.js, React oder shadcn/ui nutzen?
Ja. Die Screens sind einfaches HTML mit Tailwind-Klassen, sodass dein Agent sie in Komponenten jedes Frameworks überführen kann, und die Ledger-Seite enthält ein shadcn-Theme mit denselben Farben. Bitte ihn, tokens.css und DESIGN.md unverändert zu lassen, damit das Design den Umzug übersteht.
Gibt es ein helles Theme?
Ja. Dunkel ist der Standard; entferne class="dark" aus dem <html>-Tag eines Screens, um auf das helle Theme von Ledger umzuschalten.