Teekampagne UI
Komponenten auf Basis von shadcn/ui und Base UI, in den Farben und Schriften der Teekampagne. Jede Komponente erfüllt WCAG 2.2 AA und lässt sich über die shadcn-Registry installieren.
Installation
Registry einmal im Projekt eintragen, dann Komponenten hinzufügen:
pnpm dlx shadcn@latest registry add @teekampagne=https://20-ui.staging.teekampagne.de/r/{name}.jsonpnpm dlx shadcn@latest add @teekampagne/themepnpm dlx shadcn@latest add @teekampagne/buttonTeekampagne
- Tee-Punkt
Der farbige Punkt vom Etikett. Markiert Sorte und Ernte.
- Preis
Preis in Euro mit Grundpreis pro Kilogramm, wie die Preisangabenverordnung ihn verlangt.
- Produktkarte
Ein Tee im Raster: Bild, Name in Versalien wie auf der Packung, Preis und Kauf-Button.
- Hinweisleiste
Leiste über dem Shop-Kopf mit bis zu drei Versprechen. Auf dem Handy zeigt sie nur das erste.
- Häkchenliste
Kurze Versprechen mit Häkchen: als Liste, in einer Zeile oder als Chips.
- Mengenwahl
Zahlenfeld mit Knöpfen für weniger und mehr.
Aktionen
- Button
Löst eine Aktion aus. Die Beschriftung sagt, was passiert.
- Farbschema
Hell, dunkel oder wie das System. Ohne Wahl folgt die Seite der Einstellung des Geräts.
- Button-Gruppe
Fasst zusammengehörige Buttons zu einer Leiste zusammen.
- Umschalter
Ein Button mit zwei Zuständen: an und aus.
- Umschalter-Gruppe
Wahl aus wenigen Optionen, zum Beispiel der Packungsgröße.
Formular
- Feld
Rahmen für Beschriftung, Eingabe, Hilfetext und Fehlermeldung.
- Eingabefeld
Einzeiliges Textfeld.
- Eingabegruppe
Eingabefeld mit Zusätzen wie Icon, Einheit oder Button.
- Textbereich
Mehrzeiliges Textfeld.
- Beschriftung
Benennt ein Formularelement.
- Kontrollkästchen
Wählt eine Option an oder ab.
- Optionsfelder
Genau eine Wahl aus mehreren Optionen.
- Schalter
Schaltet eine Einstellung sofort an oder aus.
- Auswahlliste
Wahl aus einer Liste in einem Popup.
- Native Auswahlliste
Die Auswahlliste des Browsers im Teekampagne-Stil.
- Kombinationsfeld
Eingabefeld mit Vorschlagsliste, zum Beispiel für Länder.
Rückmeldung
- Hinweis
Eine Meldung im Seitenfluss.
- Etikett
Kurzer Status, zum Beispiel der Lagerbestand.
- Fortschritt
Zeigt einen Fortschritt, zum Beispiel bis zum Gratisversand.
- Platzhalter
Hält den Platz frei, solange Inhalt lädt.
- Ladeanzeige
Zeigt, dass eine Aktion läuft.
- Meldung
Kurze Rückmeldung nach einer Aktion, unten am Bildschirm.
- Leerer Zustand
Sagt, warum ein Bereich leer ist und was als Nächstes geht.
Overlay
- Dialog
Ein Fenster über der Seite, das den Fokus hält.
- Bestätigungsdialog
Fragt vor einer folgenreichen Aktion nach.
- Seitenleiste
Ein Bereich, der vom Rand einfährt, zum Beispiel der Warenkorb.
- Schublade
Ein Bereich, der auf dem Telefon von unten einfährt.
- Popover
Zusatzinhalt an einem Auslöser.
- Tooltip
Kurzer Hinweis zu einem Element, bei Fokus und Zeigen.
- Menü
Eine Liste von Aktionen an einem Button.
Navigation
- Navigationsmenü
Hauptnavigation mit aufklappbaren Bereichen.
- Pfadnavigation
Zeigt, wo die Seite in der Struktur liegt.
- Seitennavigation
Blättert durch lange Listen.
- Reiter
Wechselt zwischen Ansichten auf einer Seite.
Inhalt
- Akkordeon
Klappt Abschnitte auf und zu, zum Beispiel Fragen und Antworten.
- Aufklappbereich
Ein einzelner Bereich, der sich auf- und zuklappen lässt.
- Karte
Ein abgegrenzter Inhaltsblock.
- Eintrag
Eine Zeile mit Medium, Text und Aktionen.
- Rubrik
Kleine Versalzeile über einem Abschnitt.
- Tabelle
Daten in Zeilen und Spalten, zum Beispiel Bestellungen.
- Karussell
Blättert durch Bilder, zum Beispiel eine Produktgalerie.
- Seitenverhältnis
Hält Bilder in einem festen Format.
- Scrollbereich
Ein Bereich mit eigener Scrollleiste.
- Trennlinie
Trennt Inhalte optisch.