# View switch

> A row of views. The active one slides to the view you pick.

- Name: `view-switch`
- Status: beta
- Categories: navigation
- File: the install writes `view-switch.tsx` to your `ui` alias, `@/components/ui` by default.
- Other registry items: `@arbokui/tabs`. The install adds them.
- Gallery: https://arbokui.com/components/view-switch
- Registry item: https://arbokui.com/r/view-switch.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

2. Add the theme once per app. It replaces your color tokens with ones checked for contrast:

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the component:

   ```bash
   npx shadcn@latest add @arbokui/view-switch
   ```

## Use it for

- Choosing one layout of the same records, like Board, List, and Timeline.
- Pass options when the views are not those three. Each option needs a value and a label.
- Hold the value yourself when another part, such as a view morph, must follow it.

## Avoid it for

- A setting that is not a view of the same things. Use Tabs and put a panel under each one.
- More than a handful of views. The row scrolls, but a menu is easier to scan.

## Props

- `options`: `{ value: string; label: string; id?: string; controls?: string }[]`. Default `[{ value: "board", label: "Board" }, { value: "list", label: "List" }, { value: "timeline", label: "Timeline" }]`. The views, in order.
- `value`: `string`. The selected view. Use with onValueChange.
- `defaultValue`: `string`. The view selected on first paint, when value is not set. Defaults to the first option.
- `onValueChange`: `(value: string) => void`. Called with the view that was just chosen.
- `tone`: `"neutral" | "brand"`. Default `"neutral"`. Color of the active pill or line.
- `emphasis`: `"solid" | "ghost"`. Default `"solid"`. "solid" puts the active view on a filled pill. "ghost" underlines it.
- `size`: `"sm" | "md" | "lg"`. Default `"md"`. Height, padding, and text size.
- `aria-label`: `string`. Default `"View"`. Names the group, like "Layout".
- `className`: `string`. Classes on the root. Later classes win.

## Accessibility

- The row is a tab list. Each view is a tab. Arrow keys move between them and select the one they reach.
- Home and End jump to the first and last view.
- The active view's pill or line slides. Reduced motion jumps there instead.

## Examples

### Board, list, and timeline

```tsx
<ViewSwitch value={layout} onValueChange={setLayout} aria-label="Layout" />
```

### Your own views

```tsx
<ViewSwitch
  aria-label="Layout"
  options={[{ value: "cards", label: "Cards" }, { value: "rows", label: "Rows" }]}
  defaultValue="cards"
/>
```