# Section Header

Header row that opens a content section, with a title, count, subtitle and a “See all” style action. Includes inline text tabs and a count that can update digit by digit.

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

## Install

```bash
npx @lumioui/cli add section-header
```

## Import

```tsx
import { SectionHeaderAction, SectionHeaderFilterTabs, SectionHeader } from "@/components/ui/section-header/section-header";
```

## Variants

- `editorial` — Editorial: `npx @lumioui/cli add section-header-editorial`
- `grouped` — Grouped: `npx @lumioui/cli add section-header-grouped`
- `media` — Media: `npx @lumioui/cli add section-header-media`
- `tabs` — Tabs: `npx @lumioui/cli add section-header-tabs`

## Props

### SectionHeader

| Prop | Type | Notes |
| --- | --- | --- |
| `title` | `string` | Section title, sentence case. |
| `subtitle?` | `string` | One quiet line under the title (truncates). |
| `count?` | `number | string` | Figure set after the title in muted tabular numerals ("Reviews 214"). |
| `size?` | `SectionHeaderSize` | Visual weight. Default "default". |
| `action?` | `string` | Trailing text action, e.g. "See all". |
| `onAction?` | `() => void` | Called when the action is pressed. |
| `chevron?` | `boolean` | Show a chevron after the action label. Default true for "large". |
| `trailing?` | `React.ReactNode` | Custom trailing slot (filter button, segmented control). Replaces `action`. |
| `accessory?` | `React.ReactNode` | Rendered under the title row (inline tabs, chips). |
| `switchOn?` | `boolean | number` | Lead the section's switch-on: the header starts dim and lights with a small rise on mount. Pass a number to wait that many ms. Default off. |
| `animateCount?` | `boolean` | Swap the count in place digit by digit when it changes. Default false. |
| `className?` | `string` | — |
| `titleClassName?` | `string` | — |

### SectionHeaderAction

| Prop | Type | Notes |
| --- | --- | --- |
| `label` | `string` | — |
| `onPress?` | `() => void` | — |
| `chevron?` | `boolean` | — |
| `muted?` | `boolean` | Muted ink (compact headers) instead of the accent text colour. |
| `contextLabel?` | `string` | Section title, read after the label ("See all, Weeknight dinners"). |
| `className?` | `string` | — |

### SectionHeaderFilterTabs

| Prop | Type | Notes |
| --- | --- | --- |
| `options` | `string[]` | Tab labels. Values are the labels themselves. |
| `value` | `string` | — |
| `onValueChange` | `(value: string) => void` | — |
| `className?` | `string` | — |

## Icons rendered

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

Source: https://lumioui.com/components/section-header