List

Lists present simple structured items with descriptions, metadata, and native links.

Overview and decision boundary

Use List to present short structured items that are not tabular data and do not need selection behavior.

Do not use List for DataGrid, command palette, sidebar navigation, or selectable listbox patterns.

Setup steps

Install tokens
Register Tailwind source
Add your first component

1import { Heading, List } from '@nerio-ui/ui';23<Heading as="h2" id="setup-steps-title" size="sm">Setup steps</Heading>4<List5  aria-labelledby="setup-steps-title"6  marker="decimal"7  items={[8    { id: "install", title: "Install tokens" },9    { id: "source", title: "Register Tailwind source" },10    { id: "components", title: "Add your first component" },11  ]}12/>

Installation and imports

Install the editable registry source, or use the matching package entrypoint when the product keeps Nerio as a workspace dependency.

1pnpm exec nerio add list23import { Heading, List } from '@nerio-ui/ui';

Usage

1import { Heading, List } from '@nerio-ui/ui';23<Heading as="h2" id="setup-steps-title" size="sm">Setup steps</Heading>4<List5  aria-labelledby="setup-steps-title"6  marker="decimal"7  items={[8    { id: "install", title: "Install tokens" },9    { id: "source", title: "Register Tailwind source" },10    { id: "components", title: "Add your first component" },11  ]}12/>

Variants

Variant	Purpose
`marker: disc \| decimal \| dash \| icon \| none`	Marker: disc \| decimal \| dash \| icon \| none is part of the public component contract.

Anatomy

Slot	Purpose
`root`	Semantic ul or ol selected by the marker meaning.
`item`	One structured list item.
`marker`	Disc, decimal, dash, or consumer-supplied icon marker.
`item-content`	Item Content slot exposed through data-slot="item-content".
`body`	Body slot exposed through data-slot="body".
`link`	Native anchor wrapper when an item has href.
`leading`	Leading slot exposed through data-slot="leading".
`content`	Content slot exposed through data-slot="content".
`title`	Primary item label.
`description`	Optional supporting item copy.
`trailing`	Trailing slot exposed through data-slot="trailing".
`meta`	Optional compact metadata in the trailing slot.

States

State	Purpose
`Static`	Items without href render as non-interactive content.
`Linked`	Items with href render native anchors.
`Focus`	Linked items use the shared Nerio focus ring.

Motion

hover
focus

Accessibility

Uses semantic ul for disc, dash, icon, and none markers and semantic ol for decimal markers.
Items with href render native anchors instead of fake interactive containers.
Optional description and metadata remain in the natural reading order.
linkProps can extend class, events, target, rel, aria, and data attributes; item.href and the internal data-slot remain protected.
Use render for a custom router link element; List forwards the canonical href, merged class, accessible props, and link data-slot without depending on a router package.
Do not use List for selectable listbox, command menu, or data table behavior.

Review the shared responsibility and evidence boundaries in the Accessibility foundation alongside this component-specific contract. Use the Spacing & layout foundation for shared density, wrapping, overflow, reflow, and component-versus-product ownership guidance. The Color foundation, Typography foundation, and Localization foundation define the shared visual-role, text-resilience, direction, and locale boundaries used by component examples.

API

Prop	Purpose
`items`	Array of title, description, meta, href, leading, and trailing values.
`marker`	disc, decimal, dash, icon, or none; decimal renders an ol.
`linkProps`	Extends link behavior but cannot replace the canonical item.href or internal link anatomy.
`render`	Optional router link element that receives the canonical href, class, accessible props, and link data-slot.
`className`	Extends the list root without replacing tokenized defaults.

Implementation contract

Contract	Value
`Registry item`	list installs 6 source files into the configured components directory.
`Base UI`	No interactive primitive required.
`Registry dependencies`	None.
`Package dependencies`	clsx, react, tailwind-merge, tailwindcss

Styling contract

Contract	Value
`Authoring`	`Complete, statically detectable Tailwind CSS v4 recipes own component visuals.`
`Values`	`Semantic and component --n-* variables remain the canonical customization layer.`
`Overrides`	`Customizable slots merge consumer className values with tailwindCn so conflicting utilities resolve deterministically.`
`Residual CSS`	`Only shared keyframes and scoped no-Preflight compatibility rules remain; there is no parallel visual selector layer.`

Design notes

Use List to present short structured items that are not tabular data and do not need selection behavior.

Do / do not

Use for docs links, settings summaries, compact resources, and simple object lists.

Do not