List

Ordered or unordered list container. Variant attributes (data-type, data-striped, data-divider, data-size) are used as CSS hooks.

Features

Renders as ordered or unordered list.

Supports striped rows and dividers via data attributes.

Accepts all standard list HTML attributes.

Example

Design mockups
Write unit tests
Implement API
Deploy to staging

Anatomy


import { List } from '@wire-ui/react'
 
<List>
{[
{ label: 'Design mockups', done: true },
{ label: 'Write unit tests', done: true },
{ label: 'Implement API', done: false },
{ label: 'Deploy to staging', done: false },
].map(({ label, done }) => (
<li key={label}>
  <span>{done ? '✓' : '○'}</span>
  <span>{label}</span>
</li>
))}
</List>

Styling

List passes variant attributes (data-type, data-striped, data-divider, data-size) as CSS hooks. Style them with attribute selectors.


<List data-striped data-divider data-size="medium" className="
  [data-striped]>[li:nth-child(odd)]:bg-gray-50
  [data-divider]>li+li:border-t
" />

Using data attributes

List sets data-type, data-striped, data-divider, and data-size from their respective HTML attributes.


[data-striped] li:nth-child(odd) { background: #f5f5f5; }
[data-divider] li + li { border-top: 1px solid #e5e5e5; }
[data-size="small"] li { padding: 0.5rem 1rem; }

Props

Prop	Type	Default	Description
`isOrdered`	`boolean`	`false`	Renders as `<ol>` instead of `<ul>`
`...rest`	`HTMLAttributes<HTMLUListElement \| HTMLOListElement>`	—	All list HTML attributes

Pass data-type, data-striped, data-divider, data-size directly as HTML attributes and target them in CSS.