Primitives

Atomic building blocks. Every higher-level component composes from these.

Components (detailed)

Selected primitives have a full reference — purpose, props, do/don't, and accessibility.

Button

Primary action component. Severity communicates intent; variant controls visual treatment.

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.

tsx

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

Badge

Inline pill-shaped status label.

primarysecondarysuccessinfowarningdangerneutral

solidsoftoutline

tsx

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

StatusBadge

Badge with a semantic status dot. Use for live operational state.

LiveSyncingDegradedDownPaused

tsx

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

StatusDot

Tiny coloured dot for presence and list rows.

Online

Degraded

Down

Paused

tsx

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

Kbd

Inline keyboard shortcut marker.

Press⌘+Kto open the command palette. PressEscto close.

tsx

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

Pill

Compact pill — tighter than Badge, for dense contexts.

primarysuccessinfowarningdangerneutralv1.2.0Ready42

tsx

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

Input

Single-line text input with purpose auto-configuring native attributes.

tsx

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

Textarea

Multi-line text input.

tsx

<Textarea placeholder="Tell us more…" rows={4} />

RadioGroup

Compound single-select. Arrow keys navigate.

Starter Pro Team

tsx

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

Switch

Boolean on/off toggle.

tsx

<Switch aria-label="Dark mode" />

Select

Single-select dropdown.

tsx

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

Card

Surface container with Card.Header / Card.Body / Card.Footer compound.

Default

Flat surface with border.

Elevated

With shadow for raised surfaces.

Interactive

Hover to lift.

tsx

<Card padding="md"><Card.Body>Content</Card.Body></Card>

Divider

Horizontal or vertical separator; optional centred label.

tsx

<Divider label="OR" />

Skeleton

Loading placeholders. pulse or shimmer animations.

tsx

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

Avatar

Image with initials fallback.

tsx

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

Progress

Linear or circular. Omit value for indeterminate.

tsx

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

Spinner

Indeterminate loading indicator for < 3s waits.

LoadingLoadingLoadingLoading

tsx

<Spinner size="sm" />

Link

Native anchor with design-system styling; auto rel on external.

Internal link External link Subtle link Standalone brand link

tsx

<UiLink href="/docs">Internal</UiLink>

AspectRatio

Maintains a consistent ratio regardless of container width.

tsx

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

ScrollArea

Cross-browser scrollable region with styled scrollbar.

Item 1 — pragmatic products, shipped fast.

Item 2 — pragmatic products, shipped fast.

Item 3 — pragmatic products, shipped fast.

Item 4 — pragmatic products, shipped fast.

Item 5 — pragmatic products, shipped fast.

Item 6 — pragmatic products, shipped fast.

Item 7 — pragmatic products, shipped fast.

Item 8 — pragmatic products, shipped fast.

Item 9 — pragmatic products, shipped fast.

Item 10 — pragmatic products, shipped fast.

Item 11 — pragmatic products, shipped fast.

Item 12 — pragmatic products, shipped fast.

Item 13 — pragmatic products, shipped fast.

Item 14 — pragmatic products, shipped fast.

Item 15 — pragmatic products, shipped fast.

Item 16 — pragmatic products, shipped fast.

tsx

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

ScrollShadow

Adds fade-out gradients at scrollable edges.

Card 1

Card 2

Card 3

Card 4

Card 5

Card 6

Card 7

Card 8

Card 9

Card 10

Card 11

Card 12

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>

Heading

Semantic level (as) decoupled from visual size.

Heading 1 · 5xl

Heading 2 · 4xl

Heading 3 · 3xl

Heading 4 · 2xl

Heading 5 · lg

Heading 6 · md

tsx

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

Text

Paragraph text. Control as, size, color, weight, leading.

Large body. Pragmatic products, shipped fast.

Default body text for paragraphs.

Small muted text for captions and helper copy.

Extra-small subtle text.

tsx

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

Label

Form field label with optional required marker.

EmailPassword

tsx

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

Overline

Uppercase eyebrow label.

New feature

tsx

<Overline>New feature</Overline>