# List

Settings-style list with grouped sections, separators and press feedback. Rows can brighten under your finger and appear one after another in reading order.

> Composed · Free · Layout — React Native, Expo Go compatible.

## Install

```bash
npx @lumioui/cli add list
```

## Import

```tsx
import { List } from "@/components/ui/list/list";
```

## Variants

- `contacts` — Contacts: `npx @lumioui/cli add list-contacts`
- `glass` — Glass: `npx @lumioui/cli add list-glass`
- `orders` — Orders: `npx @lumioui/cli add list-orders`

## Props

### List

| Prop | Type | Notes |
| --- | --- | --- |
| `inset?` | `boolean` | Inset-grouped style: rounded card sections with horizontal margin. |
| `glass?` | `boolean` | Glass section material (pairs naturally with inset). |
| `lit?` | `boolean` | Lit press: a held row brightens (foreground light on dark, accent light on light) instead of taking the muted ink wash. Default false. |
| `switchOn?` | `boolean` | Switch on at mount: each section's rows start dim and switch on 40ms apart, sections one band (120ms) apart. Default false. |
| `className?` | `string` | — |

### ListSection

| Prop | Type | Notes |
| --- | --- | --- |
| `title?` | `string` | Optional header text rendered above the group. |
| `titleClassName?` | `string` | Extra classes for the header text. |
| `footer?` | `string` | Optional footnote under the group — a short explainer line. |
| `className?` | `string` | — |

### ListItem

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Primary label. |
| `subtitle?` | `string` | Secondary label under the title. |
| `leading?` | `React.ReactNode` | Slot rendered before the text block (icon, avatar, etc.). |
| `trailing?` | `React.ReactNode` | Slot rendered after the text block, before the chevron. |
| `showChevron?` | `boolean` | Show a disclosure chevron on the trailing edge. |
| `haptic?` | `"light" | "medium" | "heavy" | "selection" | false` | Haptic on press. Default "selection"; false to disable. |
| `className?` | `string` | — |
| `titleClassName?` | `string` | — |
| `subtitleClassName?` | `string` | — |
| `density?` | `"default" | "compact"` | Vertical rhythm: "default" for standard rows, "compact" for dense  rails (media pickers, followers) where more rows must fit the fold. |
| `titleNumberOfLines?` | `number` | Title line clamp. Default 1 — event/news rows that must not lose  their tail should pass 2. |
| `subtitleNumberOfLines?` | `number` | Subtitle line clamp. Default 2. |
| `children?` | `React.ReactNode` | — |

### ListSeparator

| Prop | Type | Notes |
| --- | --- | --- |
| `inset?` | `boolean | "none" | "icon" | "text" | number` | Left inset preset:  - omitted (default): 16px — under the text start of a row without a    leading slot (hairlines never run    full-bleed inside a section).  - `"none"`/false: full-bleed.  - `"icon"`/true: starts under the leading slot edge (16px — the row's    px-4). Legacy `inset` maps here for pixel parity.  - `"text"`: aligns under the title text, past a standard 24px leading    icon (16px padding + 24px icon + 12px gap = 52px).  - number: exact px inset — match your leading slot's width. |
| `className?` | `string` | — |

## Icons rendered

- `chevron-right` — /icons.html?i=chevron-right

Source: https://lumioui.com/components/list