/dev/components

Base UI Primitives — Smoke Test

Alle @gmn/ui-Primitives rendern hier mit Default-Props. Jede Komponente wird manuell auf Interaktivität geprüft (Hover, Focus, Open/Close, Keyboard).

Button — Primary L (Figma-spec)

Figma-Delivery 2026-04-24 · Inter 600 11/13 uppercase 0.6px · h 46 · radius 2

Button — Primary M (Figma-spec)

Figma-Delivery 2026-04-24 · Inter 500 11/13 tracking 0.2px · h 33 · radius 2 · Icon trailing

Button — Secondary M (Figma-spec)

Figma-Delivery 2026-04-24 · brand-500 fill + 1px brand-border hairline (#466691)

Button — seed variants

Variants (kein Figma-Spec für non-primary)

Badge — Category Tags (Figma-spec)

Figma-Delivery 2026-04-24 · h 21 · Inter 500 9/13 uppercase 0.4px · Anwendung + Werkzeugwechsel-Tags

Schleifen
Schleifen
Fräsen
Fräsen
Beide
SchleifenFräsen
Werkzeugwechsel
AutomatischManuell

Badge — UI signals

outline & warning (nicht aus Figma)

OutlineWarning

Checkbox

Checked, unchecked, indeterminate, disabled

Separator

Horizontal and vertical

Slider

Single thumb, range

Select

Options with check indicator

Popover

Rich content, anchored to trigger

Tooltip

Hover + focus

Dialog

Modal with backdrop, escape, close button

SectionHeader (Figma-spec)

Figma-Delivery 2026-04-24 · Inter 500 11/14 uppercase 0.4px · 1px hairline divider · tone=brand on brand-500, tone=light on white

Leistungswerte

Slots für Drehzahl/Leistung-Slider folgen später.

Anwendung

Schleifen · Fräsen · Beides

Chip — Filter Selector (Figma-spec, brand)

Figma-Delivery 2026-04-24 · surface=brand · h 32 · Inter 10/11 0.2px · states: inactive/hover/selected

Hover zum Testen · Klicken = selected-Toggle (stateful Demo folgt in Filter-UI-Phase)

Chip — Scatter Axis Selector (Figma-spec, light)

Figma-Delivery 2026-04-24 · surface=light · h 21 · Inter 11/13 · states: inactive/hover/selected

Y-Achse

RangeFilter (Figma-spec)

Figma-Delivery 2026-04-24 · Dual-thumb slider + numerische Inputs + Histogramm · Inter labels, Menlo inputs, IBM Plex Mono min/max

1/min
Min: 0Max: 150
kW
Min: 7Max: 38

SpindelTooltip (Figma-spec)

Figma-Delivery 2026-04-24 · Scatter-Default-Tooltip mit Titel, Badges, Property-Rows

UH-X 60 - 120000/3
Anwendung
Schleifen
Werkzeugwechsel
Automatisch
Werkzeugschnittstelle
HC
Drehzahl60.000 1/min
Leistung4,5 kW
Drehmoment0,7 Nm
Durchmesser80 mm
HV-FR 200
Anwendung
SchleifenFräsen
Werkzeugwechsel
Manuell
Werkzeugschnittstelle
HSK-E25
Drehzahl42.000 1/min
Leistung9,0 kW

ProductCard (Figma-spec)

Figma-Delivery 2026-04-24 · Image + Badges overlay · Header · Spec-Grid (1 hero + 2×2) · CTA Primary M

SchleifenFräsenAutomatisch

UH-X 60 - 120000/3

HC Serie
Drehzahl
60.0001/min
Leistung
4,5kW
Drehmoment
0,7Nm
Durchmesser
80mm
Werkzeugschnittstelle
HSK-E025

ContentHeading (Figma-spec)

Figma-Delivery 2026-04-24 · Inter 600 14/20 text-strong · optional Count-Pill

Ergebnisse

254

Vergleich

12

Scatter-Diagramm