# Stack Panel

A settings panel that drills into pages and back. Swipe back reveals the parent underneath.

Tier: Free

## Installation

```bash
npx shadcn add @fetaui/stack-panel
```

## Usage

```tsx
import { StackPanel } from '@/components/fetaui/stack-panel'

export function Example() {
  return <StackPanel pages={pages} root="settings" />
}
```

## API

| Prop | Type | Default |
|---|---|---|
| pages | Record<string, StackPage> | required |
| root | string | required |
| defaultPath | string[] | [] |
| onPathChange | (path) => void |  |
| animated | boolean | true |

## When to use

- For settings and other hierarchies one or two levels deep.
- Keep each page to one topic.

## When not to use

- For peers: use Tabs.
- For one off decisions: use Dialog.

## Accessibility

- Each page is a region labelled by its title.
- After a push, focus moves to the new heading. After a pop, it returns to the row.
- Choice rows are radios.

## Motion

- Pages push in over 340 ms while the parent slides 18% left.
- Back reverses in 300 ms.
- Swipe from the left edge follows the finger. Past 40% or a flick pops.
- With reduced motion, pages swap. A swipe still follows the finger, without parallax.