jsp-dsv0.1

Tabsshadcn

Switches between views of the same thing.

Navigation
Install
npx shadcn add tabs
Import from
@/components/ui/tabs
Guidance
draft · v0.1.0

Examples

As installed from shadcn – rendering in jsp-ds tokens through the bridge.

Eight screens, three awaiting sign-off.

Switch between views of the same thing. Arrow keys move between tabs.

Guidance

When to use

  • To switch between views of the same thing at the same level: Overview, Comments, History.

When not to use

  • For steps in a sequence – use a stepper or pages.
  • For site navigation – use links.
  • When people need to compare the panels side by side.

Rules

  • Short, one- or two-word labels in a single row.
  • The first tab is the one most people need.

Accessibility

  • Arrow keys move between tabs; Tab moves into the panel. Radix handles this.

Install

Terminal
npx shadcn add tabs
Import
import { Tabs } from "@/components/ui/tabs"

From shadcn’s own registry. Don’t edit the installed file – jsp-ds styles it through the bridge, and fixes go in styles/overrides.css with an issue.