Listcomponent

List block — wraps each child in an <li> and renders an <ul> or <ol>.

• Pass ordered to render an ordered <ol> instead of the default unordered <ul>.

A bulleted or numbered list. Renders a <ul> by default (or an <ol> when ordered is set) and wraps each child in its own <li>, so you pass the items as children rather than writing the <li> markup yourself.

Things to know:

• Pass ordered to render an <ol> with numbered markers; the default is an unordered <ul>.
• Each child becomes one list item — give it plain content, not an <li>.
• Items are laid out as a flex column; tune the spacing between them with the gap variant (<List gap="small">).
• Like the other block components it carries its own outer block margin and collapses it when it is the first or last child of its container.
• Inside <Prose> a raw <ul> / <ol> picks up the same styling, so Markdown-rendered lists match component ones.

Usage

Unordered and ordered lists

import { List } from "shelving/ui";

<List>{["Apples", "Oranges", "Pears"]}</List>
<List ordered>{["First", "Second", "Third"]}</List>

Tighter spacing

import { List } from "shelving/ui";

<List gap="small">{items.map(item => item.label)}</List>

Styling

List paints from the tint ladder for its markers only; rebind --list-tint to recolour the scope, or reach for a per-property hook for a single change.

Global tokens it reads: --space-paragraph, --space-xsmall, and the tint-ladder step --tint-80. The gap variant comes from the shared shelving/ui styling system.