List

List is the styled <ul> that wraps a stack of ListItem rows. It owns the shared spacing and surface — pass variant="outlined" or "soft" for a bordered or filled container, and dense to tighten the row gap. Fill it with ListItem, ListSubheader, and ListDivider children to build navigation menus, settings panels, and entity lists.

Example

import { List, ListItem, ListItemButton } from '@officina/ui';

<List variant="outlined">
  <ListItem>
    <ListItemButton selected>Dashboard</ListItemButton>
  </ListItem>
  <ListItem>
    <ListItemButton>Settings</ListItemButton>
  </ListItem>
</List>;

API

List

The styled <ul> container.

ListItem

A single row inside a List — wraps content or a ListItemButton.

ListItem is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

ListItemButton

Interactive, focusable row button with a selected state, for menus and nav.

ListItemContent

Title plus muted description block for a list row, with truncation.

ListItemDecorator

Fixed-size leading slot for an icon or avatar in a list row.

ListItemDecorator is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

ListSubheader

Small uppercase caption that labels a group of rows within a List.

ListSubheader is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.

ListDivider

A horizontal separator rule between groups of list rows.

ListDivider is composed from other primitives and exposes no direct props. Compose it with its subcomponents and standard element attributes.