Zum Inhalt springen
UI Kit
Accent

UI Elemente für React und Tailwind

Die kleinen Teile. Buttons, Inputs, Cards, Overlays, Charts und Effects.

Die kleinen Teile, aus denen jede Section besteht

Elements sind die Bausteine in jeder Section, Buttons, Eingabefelder, Selects, Datumsauswahl, Cards, Dialoge, Tooltips, Tabs, Tabellen, Diagramme und Mediaplayer. Sie teilen einen Satz Tokens für Farbe, Radius, Abstand und Schrift, ein Formular im Hero sieht also aus wie eines in den Einstellungen.

Jedes Element folgt den Mustern für Tastatur und Screenreader, die Menschen erwarten, von Pfeiltasten in Tabs bis zum Fokus, der im Dialog bleibt. Texteffekte, Textakzente, Hintergründe und Motion-Effekte ergänzen die Details, die einer Seite Charakter geben, und jeder davon ruht, wenn das System weniger Bewegung wünscht.

22 Kategorien

  • Buttons

    20 Variants

    Buttons, Groups und Toggles.

  • Forms und Inputs

    22 Variants

    Inputs, Textareas, Selects, Checkboxen, Radios, Switches, Slider, Suchfelder und Formular-Layouts.

  • Datum, Uhrzeit und Farbe wählen, Zahlenfelder, Comboboxen, Mehrfachauswahl und Tag-Felder, jede Wahl bleibt im Blick.

  • Telefonnummern mit Land, Kartendaten, Einmalcodes, Datei-Uploads, Profilbilder und Unterschriften.

  • Cards

    10 Variants

    Cards für Menschen, Produkte, Stats und Links.

  • Overlays

    21 Variants

    Dialogs, Sheets, Popovers, Tooltips und Toasts.

  • Navigation

    15 Variants

    Tabs, Accordions, Breadcrumbs, Pagination, Stepper und Linklisten.

  • Menüleisten mit Tastaturbedienung, schwebende Aktionen, die dem Scrollen folgen, und Sprachumschalter für jedes Layout.

  • Data Display

    15 Variants

    Icons, Badges, Avatars, Tags, Tastenkürzel und Ratings.

  • Fortschrittsbalken und Ringe, Skeletons beim Laden, leere Zustände mit dem nächsten Schritt und Stat Cards mit einer Kennzahl.

  • Beschreibungslisten für Details, sortierbare Listen zum Ziehen, Baumansichten für Ordner und Timelines für Ereignisse in Folge.

  • Charts

    22 Variants

    Line, Bar, Area und Donut, radiale Charts, Heatmaps und Funnels für die alltäglichen Zahlen.

  • Vorher und nachher, Rankings, Zielwerte, Anteile am Ganzen und Wasserfälle, die zeigen, wie aus einem Wert ein anderer wird.

  • Statistik-Charts

    20 Variants

    Streudiagramme, Verteilungen vom Histogramm bis zum Boxplot, Radarprofile und Treemaps für Daten mit vielen Punkten.

  • Gauges, Fortschrittsringe und Sparklines für Kennzahlen, laufend ankommende Daten, Kurskerzen und Werte nach Region auf einer Karte.

  • Text Effects

    15 Variants

    Headlines, die ankommen. Blur in, Buchstaben und Wörter nacheinander, Schreibmaschine und Scramble.

  • Textakzente

    16 Variants

    Farbverläufe, Schimmer, gezeichnete Marker, wechselnde Wörter und hochzählende Zahlen für die eine Zeile, auf die es ankommt.

  • Backgrounds

    19 Variants

    Aurora, Gradient Mesh, Noise, leuchtende Punkte, auslaufende Raster und ein Spotlight, das dem Zeiger folgt.

  • Lichtstrahlen, Meteore, Partikel, Orbits, endlose Marquees und ein Licht, das um den Rand einer Karte wandert.

  • Media

    19 Variants

    Video- und Audio-Player, Bildvergleich, Device Frames und QR-Codes.

  • Code und JSON

    8 Variants

    Codeblöcke mit Dateireitern, Zeilennummern, Markierungen und Terminal-Stil, dazu JSON-Viewer zum Aufklappen, Durchsuchen und Pfade kopieren.

  • Veränderbare Bereiche, geteilte Ansichten und einklappbare Leisten.

Oft gesucht

Direkt zu

In die Zwischenablage kopiert