Navigation
Saved views
A tab bar of named, saved configurations of a list — “My work”, “This sprint”, “Blocked” — each remembering its own grouping, sort and filters. Switch in a click, rename inline, duplicate, add and delete, and save changes back.
npx shadcn@latest add @orbit/saved-viewsOverview
Switch views to see each one’s grouping, sort and filter chips; double-click a tab to rename, open the active view’s caret for options, or + to add a view.
Save or reset
A view stores its configuration, so edits are deliberate: when the consumer marks the view dirty, a warning dot with Save / Reset appears at the bar’s right edge instead of silently persisting every tweak.
Without the config row
showConfig={false} drops the active-view summary when the surface below already communicates the configuration.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| views / defaultViews | SavedView[] | — | Controlled / uncontrolled view list. SavedView = { id, name, icon?, count?, group?, sort?, filters? }. |
| onViewsChange | (views: SavedView[]) => void | — | Fires on add, rename, duplicate, delete and save. |
| activeId / defaultActiveId | string | — | Controlled / uncontrolled active view id (defaults to the first view). |
| onActiveChange | (id, view) => void | — | Selection changed — via click, keyboard, add, duplicate or delete. |
| dirty | boolean | false | Shows the warning dot with Save / Reset actions. |
| onSave | (view) => void | — | Save clicked. Uncontrolled default also folds the tweak into the view’s filter count. |
| onReset | (view) => void | — | Reset clicked — discard pending changes. |
| onSetDefault | (view) => void | — | “Set as default” chosen from the view options menu. |
| onAddView | () => void | — | Replaces the built-in “+ adds a New view and starts rename” behavior. |
| showConfig | boolean | true | Config row with the active name and Group / Sort / Filters chips. |
| hint | string | "Double-click a tab to rename" | Muted helper text at the right edge of the config row. |
| …rest | HTMLAttributes | — | Forwarded to the root <div>, including ref. |
Usage
Seed a few useful defaults
Ship views people actually want — “My work”, “This sprint” — so the value is obvious before they make their own.
Auto-save every tweak
Silent saves make views drift unpredictably. Show a save action so a change is a decision, not an accident.
Show the active configuration
Surface the grouping, sort and filter count of the current view so its state is never a mystery.
Let tabs sprawl endlessly
Past a handful, scroll or group them. A tab bar that overflows the screen stops being a quick switcher. (The bar scrolls horizontally when it must.)
Keyboard & accessibility
The bar is a WAI-ARIA tablist: tabs carry role=tab and aria-selected, the options menu is a real menu with roving focus, and the rename field commits on Enter or blur.