Needless UI

Komponenten

Jede Komponente basiert auf nativen Elementen und ist mit Live-Beispielen, ihrer API und ihrem Tastaturverhalten dokumentiert.

  • Avatar

    Das Bild einer Person oder ihre Initialen auf einer Farbe, die immer ihr gehört.

  • Breadcrumbs

    Der Pfad aus Seiten, der zur aktuellen Seite führt.

  • Button

    Aktionen und Links, direkt auf nativen Buttons und Links gestaltet.

  • Kalender

    Wähle einen Tag, einen Zeitraum oder mehrere Tage, auch per Tastatur.

  • Karussell

    Folien in einer Reihe, die scrollt und einrastet, mit Buttons, Punkten und Rotation.

  • Chat

    Sprich mit einem Modell: gestreamte Antworten, Tools, Versionen und Dateien.

  • Farbwähler

    Eine Farbe in OKLCH, auf einer Fläche oder einem Farbkreis, mit Farbfeldern, Pipette und Kontrastprüfung.

  • Combobox

    Ein Textfeld, das beim Tippen Optionen vorschlägt.

  • Befehlspalette

    Jeder Befehl deiner App, nur einen Tastendruck entfernt.

  • Datumsauswahl

    Datum oder Uhrzeit in Segmenten eintippen oder im Kalender wählen.

  • Dialog

    Ein modales Fenster auf Basis des nativen dialog-Elements, dessen Fokus der Browser verwaltet.

  • Dropzone

    Dateien ablegen oder auswählen, mit Prüfungen, Vorschauen und Uploads samt Fortschritt.

  • Rich-Text-Editor

    Überschriften, Listen, Links und Formate, mit Toolbar und Markdown beim Tippen.

  • Empty State

    Was du zeigst, wenn es nichts zu zeigen gibt, und wie es weitergeht.

  • Data Grid

    Beliebig viele Zeilen sortieren, filtern, gruppieren, bearbeiten und exportieren.

  • Markdown

    Markdown sicher rendern, auch während es noch gestreamt wird.

  • Eingabemaske

    Textfelder, die sich beim Tippen formatieren: Datumsangaben, Kartennummern, IBANs, Codes.

  • Menu

    Eine aufklappbare Liste von Aktionen, mit Untermenüs, Checkbox- und Radio-Einträgen und voller Tastaturunterstützung.

  • Zahlenfeld

    Eine Zahleneingabe mit Schritt-Buttons, passend formatiert für jede Locale.

  • OTP-Eingabe

    Bestätigungscodes in einzelnen Slots, auf einem einzigen echten Eingabefeld.

  • Telefonfeld

    Eine Länderauswahl und eine Nummer, gruppiert, wie das Land sie schreibt.

  • Popover

    Schwebende Panels neben einem Button und reichhaltige Tooltips beim Hovern.

  • Bewertung

    Sterne zum Bewerten, auf echten Radiobuttons.

  • Terminplaner

    Termine in Monats-, Wochen-, Tages- oder Agendaansicht oder auf einer Timeline aus Räumen und Personen, an ihren Platz gezogen.

  • Select

    Wähle eine oder mehrere Optionen, aus einer kurzen oder riesigen Liste.

  • Skeleton

    Platzhalter, die das Layout halten, während Inhalte laden.

  • Splitter

    Bereiche nebeneinander oder übereinander, mit Griffen zum Ändern ihrer Größe.

  • Toast

    Kurze Meldungen, die sich stapeln, sich wegwischen lassen und nie den Fokus stehlen.

  • Tour

    Eine Karte pro Schritt, neben dem, worum es geht, und die Seite drumherum abgedunkelt.