Ein fertiges Login-Formular für die schnelle Umsetzung – Card mit E-Mail/Passwort-Feldern, direkt kopierbar und an dein eigenes Auth-Backend anschließbar.

Die aufwendigere Login-Variante im Zweispalten-Look, wie ihn viele SaaS-Produkte nutzen: links Marke/Zitat zur Vertrauensbildung, rechts das eigentliche Formular.

Das Gegenstück zu Login Form für die Kontoerstellung – bringt bereits Passwort-Bestätigung und eine AGB-Checkbox mit, die bei Registrierungen fast immer gebraucht werden.

Das Grundgerüst für eine ganze Dashboard-App: Sidebar links, Kopfzeile oben, dein eigentlicher Seiteninhalt in der Mitte – als Layout-Wrapper um jede Unterseite gelegt.

Wie Dashboard Shell, aber ohne feste Sidebar – die Navigation läuft stattdessen horizontal über Tabs in der Kopfzeile, was auf schmaleren Bildschirmen oder bei wenigen Hauptbereichen oft aufgeräumter wirkt.

Die typische Kennzahlen-Reihe oben auf einem Dashboard – z.B. Umsatz, neue Nutzer, Conversion-Rate – jeweils mit Trend-Pfeil, ob es im Vergleich zum Vormonat hoch- oder runtergeht.

Der erste Abschnitt, den Besucher auf einer Landingpage sehen – große Überschrift, kurzer Erklärtext und die zwei wichtigsten Buttons (z.B. „Jetzt starten“ und „Mehr erfahren“), bereit zum Anpassen an dein Produkt.

Zeigt mehrere Produkt-Vorteile nebeneinander, jeweils mit Icon, Titel und kurzer Erklärung – der Abschnitt, der auf den Hero folgt und erklärt, was das Produkt eigentlich kann.

Die Preisübersicht mit typischerweise drei Tarifen nebeneinander – ein Tarif ist optisch hervorgehoben, um Besucher sanft zur empfohlenen Option zu lenken.

Zitate zufriedener Kund:innen nebeneinander – schafft Vertrauen auf einer Landingpage, indem echte (oder platzhalterhafte) Stimmen statt reiner Eigenwerbung gezeigt werden.

Stellt die Personen hinter dem Produkt vor – ein Raster aus Karten mit Foto, Namen und Rolle, üblich auf „Über uns“-Seiten oder am Ende einer Landingpage.

Beantwortet die üblichen Rückfragen vorab, jede Frage einzeln aufklappbar – reduziert Support-Anfragen und ist meist einer der letzten Abschnitte vor dem finalen Call-to-Action.

Der letzte Abschnitt vor dem Footer – eine große, zentrierte, unmissverständliche Aufforderung zum Handeln, nachdem alle Argumente (Features, Preise, Testimonials) bereits gezeigt wurden.

Ein animiertes Schaufenster für Landingpages von Entwickler-Tools: links tippt ein Terminal den Befehl, rechts erscheinen die Dateien im Projektbaum – spielt einmal beim Reinscrollen ab und respektiert prefers-reduced-motion. Genau dieser Block läuft auf der Startseite dieser Doku.

Ein fertiges Beispiel dafür, wie sich ein Formular sauber in einen Dialog packen lässt, statt eine eigene Seite zu belegen – typisch für Profil- oder Kontoeinstellungen, die man schnell mal öffnet und wieder schließt.

Eine fertig verdrahtete Bestätigungsabfrage für riskante Aktionen (Löschen, Zurücksetzen) – Titel, Text und die onConfirm-Aktion werden einfach als Props übergeben, statt den Dialog jedes Mal neu aufzubauen.