How do I install the shadcn tabs?

Run the shadcn CLI with the DitherUI tabs name. It is built on Radix, so arrow-key navigation and ARIA roles are handled for you.

How does the sliding indicator work?

It uses a shared layout animation from Motion: one highlight element moves to whichever tab is active, rather than each tab fading its own background.

Are there different tab styles?

Yes. The page shows several variants of the tab list, each with its own indicator style.

Tabs

Tabs with an active-tab indicator that shares a layout id across triggers, so it glides to the newly selected tab instead of popping in place. Switch the indicator style with the variant prop.

pnpm dlx shadcn@latest add @ditherui/tabs

Default

Catch up on unread conversations.

Underline

Catch up on unread conversations.

Morph Tabs

Catch up on unread conversations.

Icon — label reveals on select

Catch up on unread conversations.

Install

$ pnpm dlx shadcn@latest add @ditherui/tabs

Props

PropTypeDefault

valuestring—

defaultValuestring—

onValueChange(value: string) => void—

orientation"horizontal" | "vertical""horizontal"

variant"default" | "underline" | "morph" | "icon""default"

iconReact.ReactNode—

When to use the tabs

Use tabs to switch between related views in the same space, such as settings sections or code and preview. The active tab is marked by a pill that slides between them instead of jumping.

Run the shadcn CLI with the DitherUI tabs name. It is built on Radix, so arrow-key navigation and ARIA roles are handled for you.

Name	Role
Ava	Admin
Marcus	Editor
Priya	Viewer

Tabs

Install

Props

When to use the tabs

Suggested components

Is it accessible?

Is it animated?