Katalog

Alle Komponenten

Alles, was du brauchst, um eine vollständige Produktoberfläche auf iOS und Android zu bauen.

9 Primitive
34 Komponenten
188 Unit-Tests
100% TypeScript

Primitive 9

Box

  • Layout

Flex-Layout-Primitiv mit token-bewussten Abständen.

  • Token-bewusstes Padding/Margin
  • Theme-gebundene Farben

Text

  • Typografie

Typografie-Primitiv, an Theme-Varianten gebunden.

  • 10 Typ-Varianten
  • Automatische Hell-/Dunkelfarbe

Heading

  • Typografie

Display- und Headline-Typografie mit semantischen Ebenen.

  • Semantische Ebenen h1-h6
  • Letter-Spacing abgestimmt

PressableScale

  • Motion

Native Druck-Skalierung mit Reduce-Motion-Unterstützung.

  • Reanimated-Spring
  • Haptisches Feedback optional

MarqueeText

  • Motion
  • Typografie

Automatisch scrollender Text bei Überlauf.

  • Überlauf-Erkennung
  • Konfigurierbare Geschwindigkeit

PaginationDots

  • Navigation

Kompakter Fortschritts- / Paginierungs-Indikator.

  • Skalierung des aktiven Punkts
  • Konfigurierbare Anzahl

SectionLabel

  • Typografie

Großgeschriebenes Abschnitts-Label für gruppierte Listen.

  • Automatische Großschreibung
  • Gedämpfte Theme-Farbe

Komponenten 34

Button

  • Aktionen

Varianten primär, sekundär, ghost und destruktiv mit Glow-Akzent.

  • 6 Varianten
  • 3 Größen (sm/md/lg)
  • Lade-Spinner
  • Haptischer Druck

Input

  • Formulare

Thembares Text-Input mit Label-, Helper- und Fehlerzuständen.

  • Label + Fehler + Helper
  • Rand-Animation beim Fokus
  • Pflicht-Sternchen

Select

  • Formulare
  • Overlays

Sheet-gestütztes Select mit durchsuchbaren Optionen.

  • BottomSheet-Picker
  • Such-Filterung
  • Mehrfachauswahl

Avatar

  • Datenanzeige

Bild- / Initialen-Avatar mit Größen-Tokens.

  • 4 Größen (sm-xl)
  • Automatische Initialen aus dem Namen
  • Kontrasttext

ListHeader

  • Datenanzeige

Fixierter Listen-Header mit Titel, Aktion und Transformation.

  • Fixiertes Scrollen
  • Aktions-Button-Slot

ListItem

  • Datenanzeige

Zeilen-Primitiv mit Leading-, Trailing- und Untertitel-Slots.

  • Leading-/Trailing-Slots
  • Untertitel + Chevron

ListSection

  • Datenanzeige

Gruppierter Listen-Container mit eingerückten Trennern.

  • Automatische Trenner
  • Abschnitts-Header

ListSwitchItem

  • Datenanzeige
  • Formulare

Listenzeile mit nachgestelltem Switch-Control.

  • Switch eingebaut
  • Einstellungen-fertig

HeaderBar

  • Navigation

Navigationsleiste mit eigenem Rendering und gestapelten Titeln.

  • Großtitel-Kollaps
  • Zurück-Button-Slot

BottomSheet

  • Overlays

Gestengesteuertes Sheet mit Snap-Punkten.

  • Reanimated-Gleiten
  • Header/Body/Footer-Verbund
  • Schließbar

Toast

  • Feedback

Imperative Toast-Fassade mit Varianten und Positionen.

  • 5 Varianten
  • Position oben/unten
  • Aktions-Button
  • Auto-Schließen

ErrorBoundary

  • Feedback

Robuste Boundary mit Reset-Keys und HOC.

  • Reset-Keys
  • Fallback-Rendering
  • withErrorBoundary-HOC

BottomTabBar

  • Navigation

Untere Tab-Leiste im iOS-Stil mit Safe-Area-Inset-Handling.

  • Safe-Area-Inset
  • 2-5 Tabs
  • Badge-Slot
  • Haptische Auswahl

Countdown

  • Feedback
  • Datenanzeige

Live-Countdown bis zu einem Zieldatum mit segmentierter Anzeige.

  • Tage / Stunden / Minuten / Sekunden
  • Abgelaufen-Zustand
  • Lokalisierbare Labels

StatTile

  • Datenanzeige

Metrik-Kachel mit Wert, Delta und Trendton.

  • Töne positiv / negativ / neutral
  • Delta-Pfeil
  • Kompakte und reguläre Größen
Expo React Native 0.74+ iOS Android Web TypeScript Accessible