App-Dashboard
Eine Produktoberfläche beginnt mit ihrem Gerüst, der Navigation, die bleibt, während die Screens wechseln. Darin sitzen die Screens, die Menschen jeden Tag öffnen, Übersicht, Daten, Meldungen und Einstellungen.
Die Reihenfolge
Von oben nach unten, so wie die Sections auf der fertigen Seite stehen.
Schritt 1 / 7 · App Shells
App Shell
Das Gerüst mit Kopfzeile, Navigation und Inhaltsbereich, in dem jeder Screen lebt.
Das Gerüst einer Anwendung. Es ordnet Navigation, Kopfzeile, Bereiche und Inhalt auf Desktop, Tablet und Telefon, mit einer Seitenleiste, die zur Schiene und zur Schublade wird, Navigation in der Kopfzeile, drei Bereiche, die sich auf dem Telefon schieben, ein Inspektor, der zum Sheet wird, und ein Fokusmodus für eine Aufgabe.
Schritt 3 / 7 · Dashboards
Dashboard
Der Startscreen mit den Zahlen und Listen, die heute zählen.
Vollständige Anwendungsbildschirme im Seitenleisten-Rahmen, auf dem Telefon mit eigener Tab-Leiste.
Schritt 4 / 7 · Tables
Datentabelle
Sortieren, Filtern, Auswählen und Blättern für die Datensätze hinter den Zahlen.
Tabellen, die lesbar bleiben: Suche, Filter, Auswahl, Sortierung, Seiten und Details. Telefone bekommen eine kompakte Liste.
Schritt 5 / 7 · Charts
Liniendiagramm
Verläufe über die Zeit, das Chart, das die meisten Dashboards zuerst brauchen.
Eine oder mehrere Linien über die Zeit, mit runden Achsenwerten, Fadenkreuz, Pfeiltasten und Datentabelle für Screenreader.
Schritt 6 / 7 · Notifications
Benachrichtigungen
Was passiert ist, während man weg war, mit Lesestatus und Aktionen.
Eingang, Protokoll, Glocken-Popover, Kanal-Einstellungen, Wochenbericht und Neuigkeiten. Vollständige Bildschirme im App-Rahmen, mit eigenem Telefon-Layout.
Schritt 7 / 7 · Settings
Einstellungen
Profil, Team, Benachrichtigungen und Abrechnung an einem einheitlichen Ort.
Einstellungsseiten mit Bereichsspalte, Karten je Thema und einer Speicherleiste, die bei Änderungen erscheint.
Alles auf einmal installieren
Ein Befehl legt alle Components dieser Sammlung in dein Projekt.
aiw add @ai-website/app-shell @ai-website/sidebar @ai-website/dashboard @ai-website/data-table @ai-website/line-chart @ai-website/notifications @ai-website/settingsPrompt für deinen KI-Assistenten
Gib Claude, Cursor, Copilot oder Codex die Reihenfolge mit, dann entsteht die Seite aus genau diesen Teilen.
Bau ein App-Dashboard mit dem UI Kit. Nutze in dieser Reihenfolge App Shell, Seitenleiste, Dashboard, Datentabelle, Liniendiagramm, Benachrichtigungen und Einstellungen. Schreib echte Texte für mein Angebot und prüf die Seite in Light und Dark.Weitere Sammlungen
- SaaS-LandingpageVom Versprechen bis zum Test
- Lokales GeschäftCafé, Laden oder Handwerk um die Ecke
- ArztpraxisVertrauen, Sprechzeiten und der nächste freie Termin
- Online-ShopVom Regal bis zur Bestellung
- PortfolioErst die Arbeit, dann der Mensch dahinter
- Blog oder MagazinTitelseite, Lesen und Wiederkommen
- EventProgramm, Tickets und der Countdown
- KI-ProduktWas die KI tut, ehrlich gezeigt
- Creator-SeiteEine Person, ihr Werk und ihr Publikum