GitHub

Data

Tags, chips, lists, stats, timelines, stepper, and the canonical DataTable. Every sample below is exhaustive — each labeled row shows every variant, severity, size, and state.

Tag

Inline label with optional remove action. Every variant × severity, all sizes, icon, and removable.

solid
primarysuccessinfowarningdangerneutral
soft
primarysuccessinfowarningdangerneutral
outline
primarysuccessinfowarningdangerneutral
size
smmdlg
icon + removable
verifiedremovableblockeddisabled
tsx
<Tag variant="soft" severity="primary" onRemove={() => {}}>design</Tag>

Chip

Toggleable filter chip with role=switch. Every state, severity, size, and icon.

state
severity
size
icon
tsx
<Chip defaultSelected>Design</Chip>

FilterChip

Chip with a result-count bubble, for faceted filter bars. Every state, size, and icon.

state
size
icon
tsx
<FilterChip count={42} defaultSelected>Active</FilterChip>

List

Semantic list — every variant, plus sizes and gaps.

bulleted
  • Unlimited seats
  • Priority support
  • SSO + SCIM
numbered
  1. Unlimited seats
  2. Priority support
  3. SSO + SCIM
checked
  • Unlimited seats
  • Priority support
  • SSO + SCIM
plain
  • Unlimited seats
  • Priority support
  • SSO + SCIM
size
  • Size sm
  • Second item
  • Size md
  • Second item
  • Size lg
  • Second item
tsx
<List variant="checked"><List.Item>…</List.Item></List>

DescriptionList

Semantic key/value pairs. Both orientations, all sizes, and the row divider.

horizontal
Plan
Team (12 seats)
Billing
Annual · invoiced 2026-01-01
Renewal
2027-01-01
vertical
Workspace
Idin Studio / Client Projects
Owner
Ahmad Muhyidin
size
Size
sm
Plan
Team
Size
md
Plan
Team
Size
lg
Plan
Team
tsx
<DescriptionList orientation="horizontal" divider="row">…</DescriptionList>

StatTrend

Directional indicator for a metric delta. Every direction, severity override, invertSemantic, and size.

direction
12.4%4 users0
invertSemantic
8ms+2 errors
severity override
positivenegativeneutral
size
smmdlg
tsx
<StatTrend direction="up" value="12.4%" period="vs last week" />

Stepper

Compound step indicator. 0-indexed currentStep. Every variant, orientation, and size.

numbered

  1. Cart

    3 items

  2. Payment

    In progress

  3. Confirm

    Review order

dotted

  1. Cart

  2. Payment

  3. Confirm

icon

  1. Cart

    3 items

  2. Payment

    In progress

  3. Confirm

    Review order

vertical

  1. Cart

  2. Payment

  3. Confirm

size

  1. Cart

  2. Payment

  3. Confirm

  1. Cart

  2. Payment

  3. Confirm

  1. Cart

  2. Payment

  3. Confirm

tsx
<Stepper currentStep={1} variant="icon">…</Stepper>

Timeline

Vertical activity timeline. Every item severity, every connector, plus the alternating variant.

severity

  1. primary event

    Ahmad Muhyidin — Manajer Produk

    01:10

  2. success event

    Novi Yantika — Perancang UI

    02:11

  3. info event

    Azlan Althaf — Pengembang Frontend

    03:12

  4. warning event

    Muhvi Kavandra — Analis Data

    04:13

  5. danger event

    Numa Raynatul — Pengembang Backend

    05:14

  6. neutral event

    Zoya Qiara — Staf Keuangan

    06:15
connector: solid

  1. Project created

    09:12

  2. Client added

    09:14

  3. Invoice overdue

    Now
connector: dashed

  1. Project created

    09:12

  2. Client added

    09:14

  3. Invoice overdue

    Now
connector: none

  1. Project created

    09:12

  2. Client added

    09:14

  3. Invoice overdue

    Now
alternating

  1. Project created

    Workspace initialised.

    09:12

  2. Client added

    Inviboo joined.

    09:14

  3. Build failed

    Node 22 required.

    Yesterday
tsx
<Timeline><Timeline.Item severity="success">…</Timeline.Item></Timeline>

DataTable

Semantic table with sortable columns, multi-select, sticky header, zebra rows, and loading / empty / error states. Seeded with Sundanese sample people.

interactive
EmailRoleStatus
Izz Luthfiizz.luthfi@contoh.idPemasaran Digitalinvited2025-04-05
Muhvi Kavandramuhvi.kavandra@contoh.idAnalis Dataactive2025-03-02
Numa Raynatulnuma.raynatul@contoh.idPengembang Backendinvited2025-02-18
Aqila Mashellaqila.mashell@contoh.idKepala Operasionalactive2025-01-30
Azlan Althafazlan.althaf@contoh.idPengembang Frontendactive2025-01-14
Ahmad Muhyidinahmad.muhyidin@contoh.idManajer Produkactive2024-11-03
Novi Yantikanovi.yantika@contoh.idPerancang UIinvited2024-09-21
Zoya Qiarazoya.qiara@contoh.idStaf Keuangansuspended2024-08-07
single-select
SelectEmailRoleStatus
Ahmad Muhyidinahmad.muhyidin@contoh.idManajer Produkactive2024-11-03
Novi Yantikanovi.yantika@contoh.idPerancang UIinvited2024-09-21
Azlan Althafazlan.althaf@contoh.idPengembang Frontendactive2025-01-14
Muhvi Kavandramuhvi.kavandra@contoh.idAnalis Dataactive2025-03-02
density: compact
EmailRoleStatus
Ahmad Muhyidinahmad.muhyidin@contoh.idManajer Produkactive2024-11-03
Novi Yantikanovi.yantika@contoh.idPerancang UIinvited2024-09-21
Azlan Althafazlan.althaf@contoh.idPengembang Frontendactive2025-01-14
Muhvi Kavandramuhvi.kavandra@contoh.idAnalis Dataactive2025-03-02
density: relaxed
EmailRoleStatus
Ahmad Muhyidinahmad.muhyidin@contoh.idManajer Produkactive2024-11-03
Novi Yantikanovi.yantika@contoh.idPerancang UIinvited2024-09-21
Azlan Althafazlan.althaf@contoh.idPengembang Frontendactive2025-01-14
Muhvi Kavandramuhvi.kavandra@contoh.idAnalis Dataactive2025-03-02
loading
EmailRoleStatus
empty
EmailRoleStatus

No members yet. Invite your first teammate.

error
EmailRoleStatus
row click
EmailRoleStatus
Ahmad Muhyidinahmad.muhyidin@contoh.idManajer Produkactive2024-11-03
Novi Yantikanovi.yantika@contoh.idPerancang UIinvited2024-09-21
Azlan Althafazlan.althaf@contoh.idPengembang Frontendactive2025-01-14
tsx
<DataTable<Member> columns={cols} data={members} rowKey={(r) => r.id} selectable="multi" sort={sort} onSortChange={setSort} stickyHeader zebra />