ns-ui
List/grid/board view switcher that draws a faint curved rail from every item's old slot to its new one and lets it ride that exact rail, releasing cards in reading order like cars cut loose over a classification-yard hump.
Use when switching between list, grid and board views of one data set where the transition should be a legible diagram of where each item went, every card riding a drawn rail from its old slot to its new one; it is the wrong choice for switching which content is shown rather than how it is arranged (tabs-notch-tenon and tabs-carriage do that) and for a control that changes a filter without moving anything (segmented-control-fling).
Install
npx shadcn add https://design.helpmarq.comns-ui / view-toggle-rails — every card gets its own rail
Switch between List, Grid and Board. Faint rails trace each card's exact path between layouts, releasing in reading order like cars cut loose over a hump, then fade once their card has docked.
| Prop | Type | Default | Description |
|---|---|---|---|
| items? | HumpYardItem[] | — | The data set. Same items are reused across all three views. |
| defaultView? | ViewMode | — | Uncontrolled initial view. @default "list" |
| view? | ViewMode | — | Controlled view. |
| onViewChange? | (view: ViewMode) => void | — | — |
| aria-label? | string | — | Accessible name for the item collection, e.g. "Tasks". |
| className? | string | — | — |