List

Semantic typography prose list component supporting bulleted, numbered, alpha, and roman numeral markers.

// Plain markup
import { List, ListItem } from "@shavin/ui";

Bullet (default)

Focus trap and scroll lock come from Radix, not us.
Every primitive reads semantic tokens, never a raw hex.
Radius is tokenized by role — never a literal Tailwind radius class.

<List>
  <ListItem>Focus trap and scroll lock come from Radix, not us.</ListItem>
  <ListItem>Every primitive reads semantic tokens, never a raw hex.</ListItem>
  <ListItem>Radius is tokenized by role — never a literal Tailwind radius class.</ListItem>
</List>

Number

Read design-system/AGENTS.md.
Check whether Radix ships a primitive for the pattern.
Add a playground page before frontend adopts it.

<List marker="number">
  <ListItem>Read design-system/AGENTS.md.</ListItem>
  <ListItem>Check whether Radix ships a primitive for the pattern.</ListItem>
  <ListItem>Add a playground page before frontend adopts it.</ListItem>
</List>

None (plain stack, no marker)

No bullet or number — just spaced rows.
Useful for a plain vertical stack of short lines.

<List marker="none">
  <ListItem>No bullet or number — just spaced rows.</ListItem>
  <ListItem>Useful for a plain vertical stack of short lines.</ListItem>
</List>

For comparison: CardList (bordered, clickable rows)

This is a CardList, not a Listsee /card

<CardList>
  <CardListItem className="cursor-pointer">
    <span className="flex-1">This is a CardList, not a List</span>
    <span className="text-sm text-fg-muted">see /card</span>
  </CardListItem>
</CardList>

Props

Prop	Type	Default
as	"ul" \| "ol"	—
marker	"bullet" \| "marker" \| "number" \| "lower-roman" \| "type" \| "upper-roman" \| "lower-alpha" \| "upper-alpha" \| "none"	"bullet"