Primitives
Atomic building blocks. Every sample below is exhaustive — each labeled row shows every severity, variant, size, and state so nothing is hidden.
Components (detailed)
Selected primitives have a full reference — purpose, props, do/don't, and accessibility.
ToggleGroup
Segmented control of Toggles sharing one pressed state. `size` scales the group's own frame and is the default every child Toggle inherits — pass `size` on a Toggle to override just that one.
Badge
Inline pill-shaped status label. Every variant × severity plus all sizes.
StatusBadge
Badge with a semantic status dot for live operational state. All severities and sizes.
StatusDot
Tiny coloured dot for presence and list rows. All severities, sizes, and the pulse state.
primary
success
info
warning
danger
neutral
Online
Degraded
Pill
Compact pill — tighter than Badge, for dense contexts. Every variant × tone plus all sizes.
Input
Single-line text input with purpose auto-configuring native attributes. All sizes, states, and common purposes.
Textarea
Multi-line text input. All sizes and states.
Checkbox
Boolean or tri-state control. Every state, severity, and size.
Switch
Boolean on/off toggle. Every state, severity, and size.
RadioGroup
Compound single-select. Arrow keys navigate. Both orientations plus a disabled option.
Select
Single-select dropdown. All sizes and states.
Card
Surface container composed of Card.Header / Card.Body / Card.Footer. Full anatomy plus all variants and padding scales.
Ahmad Muhyidin
Manajer Produk · Produk
Memimpin peta jalan produk lintas tim desain dan rekayasa. Bergabung sejak 2021.
128
Tugas12
Proyek98%
Tepat waktuNovi Yantika
Perancang UI
Azlan Althaf
Pengembang Frontend
Muhvi Kavandra
Analis Data
Numa Raynatul
Pengembang Backend
Rapat sprint mingguan, Kamis 14:00.
Rapat sprint mingguan, Kamis 14:00.
Rapat sprint mingguan, Kamis 14:00.
Avatar
Image with initials fallback. All sizes, shapes, and tones — seeded with Sundanese sample people.
Progress
Linear or circular. Omit value for indeterminate. All severities, sizes, and both variants.
Spinner
Indeterminate loading indicator for < 3s waits. All sizes and severities.
Link
Native anchor with design-system styling; auto rel on external. All variants and tones.
Kbd
Inline keyboard shortcut marker. Both sizes plus inline usage.
Press
⌘+
Kto open the palette,
Escto close.
Skeleton
Loading placeholders. All shapes and both animation variants.
Divider
Horizontal or vertical separator; optional centred label. All tones, a label, and vertical orientation.
Left
Right
Heading
Semantic level (as) decoupled from visual size. Every size step.
Heading · 5xl
Heading · 4xl
Heading · 3xl
Heading · 2xl
Heading · lg
Heading · md
Text
Paragraph text. Sizes and colors as labeled rows.
Large body. Pragmatic products, shipped fast.
Default body text for paragraphs.
Small text for captions.
Extra-small text.
Default text color.
Muted text color.
Subtle text color.
Label
Form field label with optional required marker.
Overline
Uppercase eyebrow label.
AspectRatio
Maintains a consistent ratio regardless of container width.
ScrollArea
Cross-browser scrollable region with styled scrollbar.
ScrollShadow
Adds fade-out gradients at scrollable edges.
BackLink
Compact back-navigation control.
HelpTip
Click-triggered popover for supplementary help.
Retries
Collapsible
Disclosure for showing and hiding content sections.