View Tabs

Install

pnpm exec vegastack-design verify view-tabs

pnpm dlx shadcn@4.21.0 add @vegastack/view-tabs

Usage

import { ViewTabs } from "@/components/ui/view-tabs";

<ViewTabs
  views={[
    { id: "all", name: "All requests", kind: "grid", scope: "shared" },
    { id: "status", name: "By status", kind: "board", scope: "locked" },
    { id: "mine", name: "My follow-ups", kind: "grid", scope: "personal" },
  ]}
  value={view}
  onValueChange={setView}
  onCreate={(kind) => openCreateView(kind)}
  getViewActions={(view) => (
    <DropdownMenuItem onClick={() => rename(view)}>Rename</DropdownMenuItem>
  )}
/>;

ViewTabs is the row of saved views over a table or a list. Shared views come first (a locked view carries a lock), then a divider and the reader's own under Mine. Each tab shows the view's kind — a grid or a board — and its name. onCreate adds a + menu with two items, Grid view and Board view, and is called with the kind alone: the host's own create step names the view and decides who sees it (an "Only visible to me" switch), so the menu never asks shared or personal. getViewActions puts the open view's items (rename, duplicate, delete) in a ⋯ menu after the tabs. A long name ends in an ellipsis; when it is cut, the full name shows in a tooltip on hover and keyboard focus, and the tab still reads the whole name to a screen reader. The narrow select's list wraps a long name instead.

It is built on Tabs variant="line", which scrolls and keeps the active tab in view. Below @3xl of its own container the row becomes one Select with the same two groups. For a list/grid layout switch over the same data, use ViewToggle instead.

Scope

Examples

Narrow containers

API Reference

View

Accessibility

• The tab row is a tablist named by aria-label (default "Views"): one tab stop, arrows move, Enter or Space opens a view. A locked view is read as "By status, locked".
• The + button is named "New view"; the ⋯ button after the open view's name ("All requests options").
• Narrow, the row is one Select with the same name and the same Shared and Mine groups.

Do / Don't