Pro

Tab strip

Tabs a person opens and closes, like a browser's. Tabs shrink evenly as more open, a closed tab folds its width away before it leaves, the open tab scrolls into view, and arrows, Delete and the New tab button all work from the keyboard.

Pro

pnpm dlx shadcn@latest add @caliper/tab-strip

forma-web

main · 4 files open

// page.tsx
export default function Page() {
  return <main>…</main>;
}

Installs components/ui/tab-strip.tsxDepends on lucide-reactMotion honours reduced motion

When to use

Use it for

Editors, terminals, consoles and record viewers with several things open at once.
Workspaces where people choose what stays open.

Skip it when

A fixed set of views; use tabs.
Navigation between pages; use the site's navigation.

Decisions

Why it is built this way, so you know what to keep when you change your copy.

Behaviour

Neighbour opens: Closing the open tab opens the one after it, or before it at the end, and focus follows when the closed tab had it.
Close stays out of the tab order: Close buttons are reachable by pointer; from the keyboard, Delete closes the focused tab, keeping Tab for leaving the strip.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/tab-strip

Adds its 2 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx

import { TabStrip } from "@/components/ui/tab-strip"

The worked example comes with Pro

The 52-line example behind the preview opens here, ready to copy.

576 Pro parts, blocks and page templates, all with source
$199 once, with a year of updates. What you have stays yours
A full refund within 14 days if it is not for you

Checking your licence…

API reference

TabStrip

component

Also accepts the native props of its root element and a ref.

PropTypeDefaultDescription

tabs *readonly StripTab[]—

value *string—

onValueChange *(id: string) => void—

onClose((id: string) => void)—Close a tab. The strip has already chosen a neighbour if it was the open one.

onAdd(() => void)—Shows a New tab button.

label *string—The strip's name: "Open documents".

It exposes tablist and tab semantics, with aria-label, aria-selected and aria-hidden kept in step with state.

KeyBehaviour

DeleteRemoves the next character or the selected item.

BackspaceRemoves the previous character or item.

Motion

It checks prefers-reduced-motion itself and settles immediately instead of travelling. Every state is still reachable.