Pro

Stretch tabs

Tabs whose underline moves like an inchworm: the leading edge reaches the new tab first and the trailing edge catches up, so the line stretches across the gap and contracts onto its label.

Pro

pnpm dlx shadcn@latest add @caliper/stretch-tabs

Q4 roadmap

Shared with the design and platform teams.

Six sections, last edited by Mara Chen two hours ago.

Installs components/ui/stretch-tabs.tsxDepends on none beyond ReactMotion shared motion tokens

When to use

Use it for

Page-level tabs under a header.
Switching views where the direction of travel helps.

Skip it when

Segmented choices inside a form; use the segmented control.
Many tabs on a phone, where an overflow menu is clearer.

Decisions

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

Behaviour

Real tabs: Roving focus, arrow keys, Home and End, and each panel labelled by its tab.

Styling

Two edges, two timings: Left and right each have their own transition, and the trailing one starts 90ms later. No script runs during the move.

Installation

terminal

pnpm dlx shadcn@latest add @caliper/stretch-tabs

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 { StretchTabs } from "@/components/ui/stretch-tabs"

The worked example comes with Pro

The 37-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

StretchTabs

component

PropTypeDefault

label *string—

tabs *readonly StretchTab[]—

valuestring—

defaultValuestring—

onValueChange((id: string) => void)—

classNamestring—

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

KeyBehaviour

→Moves to the next item or value.

←Moves to the previous item or value.

HomeJumps to the first item or the minimum.

EndJumps to the last item or the maximum.

Motion

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.