Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProThe Grid, List, Board view switcher: a labelled single-choice group that can never be empty, with icon buttons that have text names and an announced change.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use this above collections that can be shown in more than one layout: files, projects, products.
Do not use it for navigation between pages, or for views that change what data is loaded (use tabs).
It builds on toggle-group, which the CLI installs for you.
import { ToggleGroupViewMode } from "@/components/toggle-group-view-mode"<ToggleGroupViewMode
value={mode}
onValueChange={setMode}
modes={["grid", "list"]}
/>| Prop | Type | Default | Description |
|---|---|---|---|
value / onValueChange | grid | list | board / fn | - | Controlled view. |
modes | ViewMode[] | [grid, list, board] | Which views to offer. |
| Key | Action |
|---|---|
| ArrowLeft / ArrowRight | move between views |
| Enter or Space | choose a view |
The pattern ships a Testing Library test (toggle-group-view-mode.test.tsx) that covers the labelled group, switching with an announcement, the sticky choice and arrow keys.