Showroom

Alle exportierten Primitives und Komponenten aus @eddy/ui.

Layout & Shell

EddyAppShellFlex-Shell-Hülle mit Nav-Slot

EddyPageContentKanonische <main> mit isolation: isolate

EddyPageTitleH1 mit optionalem Action-Slot

Navigation

EddyLeftNavLinke Nav, collapsed 60px / expanded 240px

EddyHeader56-px-Chrome-Bar für Detail-Seiten

EddyLogoHeaderLogo + Wordmark, compact / display

EddyFooterStripFooter-Links für Onboarding-Seiten

EddyBackLinkZurück-Navigation oben links

Buttons & Aktionen

EddyButton6 Varianten: primary, secondary, tertiary, ghost, link, danger

EddyFABFloating Action Button, 56×56 px

EddyDangerBlockButtonDestruktive Block-Aktion

EddyTextLinkSemantisches <a> für Inline-Links

Formulare

EddyFieldText-Input mit Label, 44 px

EddySelectNative Select im EddyField-Shell

EddySegmentSegmented Control, 2–3 Optionen

EddyBoolToggleJa/Nein-Toggle, Boolean-Rückgabe

EddyCheckbox22×22 px Checkbox

EddyChoiceRow / EddyChoiceList / EddyChoiceChipsAuswahl-Primitive

EddyTextareaMehrzeiliges Textfeld

EddyDateFieldDatum-Input (Browser-Picker)

EddyBirthdateField3 native Selects für Geburtsdatum

EddyPasswordCriteriaLive-Anforderungsliste Passwort

EddyImageCropperTouch/Pointer-Bild-Zuschnitt mit Pinch-Zoom

EddyColorSwatchPicker10er-Gruppenpalette-Auswahl (Grid)

EddyStarRatingStern-Bewertung interaktiv/read-only

EddyColorSwatchPickerModalModal-Dialog für Gruppenfarbe-Auswahl

Listen & Kacheln

EddyListTileWiederholzeile, r14, border-only

EddyDashboardTileHero-Kachel, r20

EddyInfoCardLeichte Inhaltskarte, r14

EddyFormCardFormular-Panel auf App-Fläche

EddySectionCardFormular-Panel auf Sand-Fläche

EddyDisclosureCardAuf-/zuklappbares Panel

EddyLinkTilePressbare Kachel mit Link

EddyDashboardActionTileAktionskachel (nicht pressbar)

EddyGroupTileGruppen-Kachel mit Plakette

EddyNotificationTilePosteingang-Zeile

EddyChatTileChat-Zeile

Status & Tags

EddyStatusPillconfirmed / pending / rejected / neutral

EddyTagNeutraler Tag, r4

EddyGroupTagGruppen-Farbtag DO-1…10

EddyAvatar44×44 Rund-Avatar mit Initialen-Fallback

EddyBannerInline-Hinweisblock (error/success/warn/info)

EddyHinweisBarGäste-CTA-Block (eddy/sand)

EddySectionHeaderEyebrow + H2 + optionales Badge

Filter & Suche

EddyFilterBarKanonische sticky Filter-Region (Discovery)

EddySearchFieldSuchfeld, 40 px, eddy-50 BG

EddyTabPanelSticky Inhalts-Wechsel-Panel

EddySortMenu / EddySortButtonSortier-Bottom-Sheet + Trigger

Overlays & Feedback

EddyModalDialog (zentriert) oder Bottom-Sheet

EddyToastHost / useToastTransiente Status-Meldungen

EddyOverflowMenuKebab-Menü (⋮) für Listenzeilen

EddySwipeActionSwipe-to-reveal für Listenzeilen

Kalender

EddyCalendarHeaderMonats-Nav + Heute-Pille

EddyCalendarGridMonats-Grid

EddyCalendarDayCellTages-Zelle mit Zuständen

EddyEventBarGruppen-Balken im Kalender

EddyDayTileListEvents des gewählten Tages

Icons & Tokens

EddyIconMaterial Symbols Rounded via Alias-Name

ICON_GLYPHS / EddyIconNameAlias-Register (77 Glyphen)

Lade-Zustände

EddySkeletonGenerischer Lade-Platzhalter

EddyListTileSkeletonEddyListTile-Skeleton

EddySkeletonCardKarten-Skeleton

EddyLoadingSwapAnti-Flash Lade-Lifecycle-Wrapper

EddyRevealEinblend-Animation nach Load

EddyPageLoaderSeiten-Loader-Fallback

Chat & Announcements

EddyChatBubbleGesprächsblase links/rechts

EddyAnnouncementRowAnkündigungs-Zeile mit Pin/Expiry

Tabellen

EddyTableGridMatrix-Tabelle, r14, border-only

EddyTableCellZell-Anatomie (data/colHeader/rowHeader…)

EddyCountValueTabular-Zahl-Helfer sm/md/lg

QS-Showcase: Neue DS-Portierungen 2026-06-20

EddyColorSwatchPicker — Default (keine aktive Farbe)

EddyStarRating

Interaktiv (value=3)

Read-only (value=4)

EddyColorSwatchPickerModal

Aktuelle Farbe: 1

EddyImageCropper — Empty State

Noch kein Bild gewähltLade ein Bild hoch und ziehe den Ausschnitt zurecht.

EddyGroupTag — colorN=3

DO-1

EddyAvatar — colorN=5, initials AB

EddyPersonChip — Varianten

Anna B.

Klaus H.

Sabine W.

EddyButton — variant="tertiary" (deckende neutrale Surface)

Default

Disabled

Mehrzeiliges Label (min-height wächst mit)

EddyLightbox — Pan / Zoom / Pinch

Bühne (Lightbox legt sich über diesen Bereich)

EddyLevelBadge — Eddy-Skala (Inversion ab Stufe 4)

—123456

EddyImageThumb — Bild + kuratierte Placeholder

Mit src

fadeIn (Bild blendet beim Laden ein — größer für sichtbaren Effekt)

Kuratierte Placeholder (Töne 0–3) + größerer Thumb (76px)

QS-Showcase: DS-Update V241 (2026-06-28)

EddyTag — tag-Tones (success / warn / danger / muted)

BestätigtAusstehendAbgelehntohne Gruppe

EddyTag — admin-Tones

BestätigtAbgelehntohne Gruppe

EddyDifficultyBadge — WW-Schwierigkeitsgrade

WW IWW IIWW IIIWW IVWW V

EddyDifficultyBadge — mit localMax (Bereichs-Label)

WW IIIWW III–IVWW II–V

EddyHint — neutraler Kontext-Hinweis

Stornierung bis 01.07.2026 kostenfrei möglich.

Lese-Modus. Als Betreuer kannst du diese Seite sehen, aber nichts ändern.

Lese-Modus. Als Teilnehmer kannst du diese Seite sehen, aber keine Gruppen bearbeiten.

EddyImageThumb — Label-Overlay + onClick

EddyImageThumbSkeleton — Loading (mit / ohne Label)

EddySelectButton — Auswahl-Trigger (öffnet Route/Sheet)

EddyMemberRow — Mitglieds-Zeile (Varianten)

Klaus Hofmann

SV Augsburg

2Ausstehend

Sabine Wirth

ohne Verein·RTN

EddyChatBubble — mit groupLabel (Tag sichtbar)

Anna BergmannDO-308:30

Guten Morgen! Wir treffen uns am Bootshaus.

08:32

Alles klar, bin um 8 da.

EddyChatBubble — ohne groupLabel (kein Tag, kein Fallback-Text)

Klaus Hofmann09:10

Bin heute etwas später dran.

09:11

Diese Nachricht wurde gelöscht.

EddyAnnouncementRow — mit groupLabel (Tag sichtbar)

Neuigkeitvor 2 Std.

Ausfahrt Iller — Treffpunkt geändert

Wir treffen uns diesmal direkt am Bootshaus, nicht am Parkplatz.

Anna BergmannDO-3

EddyAnnouncementRow — ohne groupLabel (kein Tag)

Neuigkeitvor 1 Tag

Sicherheitstraining — Anmeldung offen

Bitte bis Freitag zurückmelden, wer teilnimmt.

Klaus HofmannAlle Mitglieder

QS-Showcase: DS-Update 2026-06-30

EddyIconButton — outline / ghost / tinted × eddy / neutral / danger

outline

ghost

tinted

EddyListItemReveal — Enter / Exit (Collapse + Fade)

Animierte Zeile

Klick auf „Entfernen“ → Collapse + Fade, dann onLeft

EddyEmbeddedList — grow (Karte wächst)

Teilnehmer3 Personen

Anna Bergmann

KC Dortmund

Klaus Hofmann

SV Augsburg

Sabine Wirth

ohne Verein

EddyEmbeddedList — scroll (gedeckelte Zone + Fade)

Lange Liste6 Einträge

Person 1

Beispiel-Untertitel

Person 2

Beispiel-Untertitel

Person 3

Beispiel-Untertitel

Person 4

Beispiel-Untertitel

Person 5

Beispiel-Untertitel

Person 6

Beispiel-Untertitel

EddyEmbeddedGallery — Foto-Strip (eyebrow + label)

Fotos4 Fotos

EddyIcon — name="dragHandle" (drag_indicator)

EddyGroupTag — size="display" (108px, Radius 8)

DO-1DO-3DO-7

EddyGroupTile — Anatomie 2026-07-23 (groupTag-Badge, members, level)

AUG-3

Aufbau Wildwasser (3)

0 Trainer · 4 Mitglieder · Leistungsstufe:—

KIDS

Freizeitgruppe (7)

0 Trainer · 0 Mitglieder · Leistungsstufe:—

EddyGroupOptionTile — Tap = sofortige Zuweisung

Display-Familie — Fernsicht (App-Part 7)

controlled (clock-Prop)

09:30

uncontrolled (ohne clock-Prop, live tickend)

--:--

IllerOberer Abschnitt

Brücke Sonthofen

AUG-1

AUG-2

AUG-3

Treffpunkt

09:30

OstrachKlamm

Parkplatz Hinterstein

AUG-4

AUG-11

Treffpunkt

10:15

Mi 24.04.

08:30

Ausfahrt Iller

Immenstadt

Do 25.04.

09:00

Sicherheitstraining

Bootshaus

Fr 26.04.

07:45

Wildwasser-Tour

Sonthofen

AUG-1

AUG-2

AUG-3

AUG-4

AUG-5

AUG-6

Seite 2 / 4

EddyDisplayTagGrid — Überlauf-Chip (14 Tags, Cap 12)

AUG-1

AUG-2

AUG-3

AUG-4

AUG-5

AUG-6

AUG-7

AUG-8

AUG-9

AUG-10

AUG-11

EddyIcon — name="zoomIn" / "zoomOut" (zoom_in / zoom_out)

EddyMapPicker — Default (Pin · Zoom · Koordinaten-Badge)

48,1372 · 11,5756

Zoom-Klicks: 0

EddyMapPicker — pinTone="eddy" · ohne Zoom-Callbacks (kein Knopfpaar) · ohne Badge

EddyMapPicker — loading (EddyPageLoader statt Karte/Chrome)

Karte wird geladen …

EddyMapPicker — Stil-Umschalter (onStyleToggle · styleToggleActive)

48,1372 · 11,5756

Stil: Straße (inaktiv/neutral)

EddyMapPicker — notice (EddyBanner) · Leerzustand · mit Stil-Umschalter (Banner weicht rechts aus)

Noch keine Position

Bitte zur gewünschten Stelle navigieren.

EddyStatusBlock — tone="warn" · mit action

Flussplanung: noch nicht finalisiert

Bitte die Fluss-Etappen prüfen und final freigeben, bevor die Anmeldung öffnet.

EddyStatusBlock — tone="success" · ohne label/action

Status: Finalisiert

Alle Etappen sind final freigegeben.

EddyDateScopeBar — sticky=false (Default) → eddy-page-filter--plain

Liste (14px gap zur Bar, kein Doppel-Abstand)

EddyDateScopeBar — sticky=false envelope → eddy-page-filter--static

Liste (Abstand kommt aus margin-bottom der Bar)

EddyDateScopeBar — sticky pinned → eddy-page-filter is-pinned (Shadow)

Liste unter der gepinnten Bar

EddyFilterBar — actions (Zone 4, zwischen Chips und Treffer-Zeile)

children — Suchfeld + Filter-Akkordeon

12 Treffer

EddyScopeBar — actions (eigene Zeile unter dem Segment)

EddyDateScopeBar — actions (eigene Zeile unter dem Stepper)

QS-Showcase: DS-Update 2026-07-28

EddyHeader — Default: title + onBack + Trailing-action

Isar — Bad Tölz

EddyHeader — asymmetrisch: nur onBack, kein Trailing (vor dem Fix sichtbar off-center)

Isar — Bad Tölz

EddyHeader — counter UND action gleichzeitig (breites Trailing → gleich großer Reserve-Abstand links)

Anmeldungen prüfen

3 / 12

EddyHeader — nur leadingAction (Queue-Home-Icon) + counter

Gruppen zuordnen

7 / 20

EddyHeader — ohne Leading/Trailing, langer Titel (Ellipsis bleibt erhalten)

Sehr langer Seitentitel der garantiert nicht in die Chrome-Bar passt

POI_TYPES — Art-Icon · Placeholder-Tone · Alterungs-Hinweis

ZUGANGSPUNKT · location (location_on) · tone 1 · shape circle

KERNSTELLE · rapid (tsunami) · tone 0 · shape diamondaging

GEFAHRENSTELLE · warn (warning) · tone 0 · shape diamondaging

WEHR · weir (water_lock) · tone 0 · shape diamondaging

UMTRAGUNG · portage (hiking) · tone 0 · shape diamondaging

PEGEL · waterLevel (water_drop) · tone 2 · shape circle

PARKPLATZ · parking (local_parking) · tone 3 · shape circle

EINKEHR · restaurant (restaurant) · tone 3 · shape circle

UMWELTHINWEIS · eco (eco) · tone 2 · shape circle

SONSTIGES · pennant (flag) · tone 1 · shape circle

EddyHeader — action.disabled + onDisabledClick (Neuanlage · Pflichtfelder fehlen)

Neuer POI

Taps auf gesperrtes Häkchen (onDisabledClick): 0

EddyHeader — action aktiv (Default, kein disabled) zum Vergleich

Neuer POI

EddyMapMarker — circle / diamond (aus POI_TYPES.shape) · selected · dimmed

EddyMapCluster — Ø 38 (< 10) · Ø 44 (≥ 10) · dimmed

EddyMapView — Marker-Ebene · Auto-Dim bei Auswahl · Zoom-Paar (right 12 · bottom 48) · EddyBottomSheet im sheet-Slot (Tap auf Karte schließt)

Auswahl: poi-wehr · Zoom-Klicks: 0

EddyMapView — notice + Sekundär-Aktion (Leerzustand)

Keine POIs im Ausschnitt

Verschiebe die Karte oder setze den Filter zurück.

EddyMapView — loading

Karte wird geladen …

EddyBottomSheet — standalone (nicht-blockierend, kein Scrim, Esc / Wisch > 64 px / Close)