docs / core / list

List

a vertical stack of items, each with an optional marker. the marker is decoration, so the text carries the meaning on its own.

intensity · recedesrsc · client

provenance

authored in usva

layer

core / primitives

intensity

recedes · safe anywhere, including dense surfaces

composition

feature lists, checklists and summaries inside a Card or sectiondivided when the rows are entries, plain when they are bulletsnot a menu and not navigation. those have their own rolesmeaning never lives in the marker alone

a11y

a real ul or ol · every marker is aria-hiddenjest-axe
live demo · try it out
  • Runs entirely on your machine
  • No tracking, no analytics
  • Open source, end to end
customize
asul or ol, by whether order carries meaning
markerdecorative marker on every item
dividedrule between items, not after the last
usagecopy
import { List, ListItem } from "@usva-ui/react/primitives/list";

<List marker={<CheckIcon />} divided>
  <ListItem>Runs entirely on your machine</ListItem>
  <ListItem>No tracking, no analytics</ListItem>
  <ListItem>Open source, end to end</ListItem>
</List>

props

proptypedefaultnotes
as"ul" | "ol""ul"pick by whether the order carries meaning.
markerReactNode—decorative marker on every item, hidden from assistive tech.
dividedbooleanfalserule between items, stopping at the last one.
ListItem markerReactNode—overrides the shared marker for this item alone.

get it

bun add @usva-ui/reactcopy
usagecopy
import { List, ListItem } from "@usva-ui/react/primitives/list";

<List marker={<CheckIcon />} divided>
  <ListItem>Runs entirely on your machine</ListItem>
  <ListItem>No tracking, no analytics</ListItem>
</List>