## Grid / List View Switcher (S—150)

A grid / list toggle where the items themselves morph between layouts using FLIP, instead of re-rendering in place.

- URL: https://sundaeui.dev/components/view-switcher
- Category: UI components · Art direction: Refined
- Access: Free (no account needed)
- Stack: React 18+, TypeScript, plain CSS; dependencies: none
- Install: `npx shadcn@latest add https://sundaeui.dev/r/view-switcher.json`
- Tags: grid, list, view-switcher, toggle, layout, flip

Each item measures where it was, the layout switches, and it animates from the old box to the new one, so cards visibly reflow into rows and back.
The toggle is a two-option segmented control with icons; the choice can be persisted by the caller.

### Usage

```tsx
import { ViewSwitcher } from '@/components/sundae/view-switcher'

<ViewSwitcher />
```

### Props

- `items` (`{ id: string; title: string; meta: string }[]`, required): Items.
- `view / defaultView` (`'grid' | 'list'`, default `'grid'`): Layout.
- `onViewChange` (`(v) => void`): Called on change.
- `fill` (`'dark' | 'light'`, default `'dark'`): Surface: dark or light.

### When to use

- File browsers, galleries, product listings.

### When not to use

- Data tables: keep one layout.

### Accessibility

- The toggle is a radiogroup with labelled icon buttons; the list is a list in both layouts.
- Reduced motion removes the movement and keeps every state change.