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.

Button — full docs →Input — full docs →

Button

Primary action component. Severity communicates intent; variant controls visual treatment. Full variant × severity matrix below.

default

outline

ghost

soft

link

size

icon

state

shape

full width

tsx

<Button severity="primary" size="lg">Create project</Button>
<Button variant="outline" severity="danger" iconLeft={<Trash2 />}>Delete</Button>
<Button variant="ghost" loading>Saving…</Button>

IconButton

Square single-icon action button. aria-label is required. Every variant × severity plus all sizes and states.

default

outline

ghost

soft

size

state

tsx

<IconButton aria-label="Add" severity="primary"><Plus /></IconButton>

Badge

Inline pill-shaped status label. Every variant × severity plus all sizes.

solid

primarysecondarysuccessinfowarningdangerneutral

soft

primarysecondarysuccessinfowarningdangerneutral

outline

primarysecondarysuccessinfowarningdangerneutral

size

smmdlg

tsx

<Badge severity="success">Live</Badge>

StatusBadge

Badge with a semantic status dot for live operational state. All severities and sizes.

severity

LiveSyncingDegradedDownPaused

size

Live · smLive · mdLive · lg

tsx

<StatusBadge severity="success">Live</StatusBadge>

StatusDot

Tiny coloured dot for presence and list rows. All severities, sizes, and the pulse state.

severity

primary

success

info

warning

danger

neutral

size

pulse

Online

Degraded

tsx

<StatusDot severity="success" label="Online" />

Pill

Compact pill — tighter than Badge, for dense contexts. Every variant × tone plus all sizes.

solid

primarysuccessinfowarningdangerneutral

soft

primarysuccessinfowarningdangerneutral

outline

primarysuccessinfowarningdangerneutral

size

xssmmd

tsx

<Pill tone="primary">42</Pill>

Input

Single-line text input with purpose auto-configuring native attributes. All sizes, states, and common purposes.

size

state

purpose

tsx

<Input purpose="email" placeholder="you@company.com" />

Textarea

Multi-line text input. All sizes and states.

size

state

tsx

<Textarea placeholder="Release notes…" rows={4} />

RadioGroup

Compound single-select. Arrow keys navigate. Both orientations plus a disabled option.

tsx

<RadioGroup defaultValue="pro"><RadioGroup.Item value="pro" id="pro" /></RadioGroup>

Select

Single-select dropdown. All sizes and states.

size

state

tsx

<Select defaultValue="pro"><Select.Item value="pro">Pro</Select.Item></Select>

Card

Surface container composed of Card.Header / Card.Body / Card.Footer. Full anatomy plus all variants and padding scales.

anatomy

Ahmad Muhyidin

Manajer Produk · Produk

Aktif

Memimpin peta jalan produk lintas tim desain dan rekayasa. Bergabung sejak 2021.

128

Tugas

Proyek

98%

Tepat waktu

variant

defaultProduk

Novi Yantika

Perancang UI

outlinedTeknik

Azlan Althaf

Pengembang Frontend

elevatedProduk

Muhvi Kavandra

Analis Data

interactiveTeknik

Numa Raynatul

Pengembang Backend

padding

padding sm

Rapat sprint mingguan, Kamis 14:00.

padding md

Rapat sprint mingguan, Kamis 14:00.

padding lg

Rapat sprint mingguan, Kamis 14:00.

tsx

<Card variant="elevated" padding="md">
  <Card.Header>…title + meta…</Card.Header>
  <Card.Body>…content…</Card.Body>
  <Card.Footer>…actions…</Card.Footer>
</Card>

Avatar

Image with initials fallback. All sizes, shapes, and tones — seeded with Sundanese sample people.

size

shape

tone

tsx

<Avatar initials="AN" tone="primary" />

Progress

Linear or circular. Omit value for indeterminate. All severities, sizes, and both variants.

severity

size

indeterminate

circular

tsx

<Progress value={42} label="Upload" />

Spinner

Indeterminate loading indicator for < 3s waits. All sizes and severities.

size

LoadingLoadingLoadingLoading

severity

LoadingLoadingLoading

tsx

<Spinner size="sm" />

Link

Native anchor with design-system styling; auto rel on external. All variants and tones.

variant

default link subtle link inline link standalone link

tone

default brand dangerinverse

external

External link Current page

tsx

<UiLink href="/docs" variant="standalone" tone="brand">Docs</UiLink>

Kbd

Inline keyboard shortcut marker. Both sizes plus inline usage.

size

⌘⌘

inline

Press

⌘

K

to open the palette,

Esc

to close.

tsx

Press <Kbd>⌘</Kbd> + <Kbd>K</Kbd>

Skeleton

Loading placeholders. All shapes and both animation variants.

shape

animation

tsx

<Skeleton shape="text" lines={3} />

Divider

Horizontal or vertical separator; optional centred label. All tones, a label, and vertical orientation.

tone

label

vertical

Left

Right

tsx

<Divider label="OR" />

Heading

Semantic level (as) decoupled from visual size. Every size step.

5xl / h1

Heading · 5xl

4xl / h2

Heading · 4xl

3xl / h3

Heading · 3xl

2xl / h4

Heading · 2xl

lg / h5

Heading · lg

md / h6

Heading · md

tsx

<Heading as="h2" size="4xl">Semantic h2, visual 4xl</Heading>

Text

Paragraph text. Sizes and colors as labeled rows.

size

Large body. Pragmatic products, shipped fast.

Default body text for paragraphs.

Small text for captions.

Extra-small text.

color

Default text color.

Muted text color.

Subtle text color.

tsx

<Text size="md" color="muted">Description.</Text>

Label

Form field label with optional required marker.

default

required

Password

tsx

<Label htmlFor="email" required>Email</Label>

Overline

Uppercase eyebrow label.

New feature

tsx

<Overline>New feature</Overline>

AspectRatio

Maintains a consistent ratio regardless of container width.

tsx

<AspectRatio ratio={16 / 9}><img /></AspectRatio>

ScrollArea

Cross-browser scrollable region with styled scrollbar.

Ahmad Muhyidin — Manajer Produk

Novi Yantika — Perancang UI

Azlan Althaf — Pengembang Frontend

Muhvi Kavandra — Analis Data

Numa Raynatul — Pengembang Backend

Zoya Qiara — Staf Keuangan

Aqila Mashell — Kepala Operasional

Izz Luthfi — Pemasaran Digital

Xaviera Salma — Admin Sistem

Bayu Arsyalan — Perancang UX

Xabi Arryan — Insinyur DevOps

Ahmad Muhyidin — Manajer Produk

Novi Yantika — Perancang UI

Azlan Althaf — Pengembang Frontend

Muhvi Kavandra — Analis Data

Numa Raynatul — Pengembang Backend

tsx

<ScrollArea maxHeight="8rem">...</ScrollArea>

ScrollShadow

Adds fade-out gradients at scrollable edges.

Ahmad

Novi

Azlan

Muhvi

Numa

Zoya

Aqila

Izz

Xaviera

Bayu

Xabi

Ahmad

tsx

<ScrollShadow>{children}</ScrollShadow>

BackLink

Compact back-navigation control.

Back to system overview

tsx

<BackLink href="/posts">Back</BackLink>

HelpTip

Click-triggered popover for supplementary help.

Retries

tsx

<HelpTip>This controls the maximum retries.</HelpTip>

Collapsible

Disclosure for showing and hiding content sections.

tsx

<Collapsible><Collapsible.Trigger>Show</Collapsible.Trigger><Collapsible.Content>…</Collapsible.Content></Collapsible>

Primitives

Components (detailed)

Button

IconButton

Badge

StatusBadge

StatusDot

Pill

Input

Textarea

Checkbox

Switch

RadioGroup

Select

Card

Ahmad Muhyidin

Avatar

Progress

Spinner

Link

Kbd

Skeleton

Divider

Heading

Heading · 5xl

Heading · 4xl

Heading · 3xl

Heading · 2xl

Heading · lg

Heading · md

Text

Label

Overline

AspectRatio

ScrollArea

ScrollShadow

BackLink

HelpTip

Collapsible