List

Structured vertical list with List.Item rows for labels, descriptions, and optional start/end content. Supports compound children or an items array.

Examples

Default

A member list with labels and secondary descriptions.

import { List } from '@var-ui/react';

<List header="Members">
  <List.Item label="Ada Lovelace" description="Admin" />
  <List.Item label="Grace Hopper" description="Editor" />
</List>

Icons

Pass decorative startContent (for example Icon) for shortcut or settings rows. Keep start/end slots non-interactive when the row uses href / onPress.

import { Icon, List } from '@var-ui/react';

<List header="Shortcuts" hasDividers>
  <List.Item
    label="Search"
    description="Find anything"
    startContent={<Icon name="search" size="sm" />}
  />
  <List.Item
    label="Recent"
    description="Opened today"
    startContent={<Icon name="clock" size="sm" />}
  />
</List>

Props

Accessibility

Renders a <ul> (or <ol> when listStyle="decimal"). Interactive rows use an invisible overlay as the sole hit target — do not nest links or buttons in startContent / endContent on those rows. Prefer string labels so the overlay gets a clear accessible name.