Direction aware tabs

Tabs whose content slides in from the side you moved toward while the panel height springs to fit.

Group

Tabs

Origin

Adapted · Cult UI · source

License

MIT

Added

Oct 18

npx shadcn@latest add @deank/direction-aware-tabs

The registry stays private. Install from the repo with a GitHub token — see the README.

Usage

import { DirectionAwareTabs } from "@/registry/components/direction-aware-tabs/direction-aware-tabs";

<DirectionAwareTabs tabs={[/* … */]} />

Prop	Type	Description
`tabs`	`DirectionAwareTab[]`
`className?`	`string`
`onChange?`	`(id: number) => void`	Called with the new tab id.
`defaultTab?`	`number`	Initially selected tab id. Defaults to the first tab.

Switching between a few content panels where the spatial direction helps orientation.

Many tabs or tabs that must keep all panels mounted (forms).