List

Structured list display with items, headers, adornments, and interactive states. Composed of List, ListItem, and ListHeader.

Import

import { List, ListItem, ListHeader } from 'reablocks';

List Props

Renders as <div role="list">. Uses forwardRef.

ListItem Props

Basic Usage

<List>
  <ListHeader>Section Title</ListHeader>
  <ListItem>Item 1</ListItem>
  <ListItem>Item 2</ListItem>
  <ListItem>Item 3</ListItem>
</List>

With Adornments

<List>
  <ListItem start={<UserIcon />} end={<Badge content="3" />}>
    Messages
  </ListItem>
  <ListItem start={<SettingsIcon />}>
    Settings
  </ListItem>
</List>

Interactive

<List>
  <ListItem active onClick={() => navigate('/home')}>Home</ListItem>
  <ListItem onClick={() => navigate('/about')}>About</ListItem>
  <ListItem disabled>Disabled</ListItem>
</List>

ListTheme Interface

interface ListTheme {
  base: string;       // Container (flex-col)
  header: string;     // Header styles
  listItem: {
    base: string;     // Item (flex, padding, rounded, hover)
    disabled: string;
    active: string;
    clickable: string;
    disablePadding: string;
    disableGutters: string;
    dense: { base, content, start, end };
    adornment: { base, start, end, svg };
    content: string;
  };
}