Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tabs examples · Layout

Vertical Tabs for React

Settings tabs stacked in a column beside their panel, like a sidebar.

Framework
UI library

Many sections fit better in a column than in a row. With orientation="vertical", Tabs lays the list beside the panel, and the triggers stack and align to the start. Use it for settings pages where the list works like a sidebar.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

FAQ

How does this demo put the triggers in a column?

orientation="vertical" on Tabs. The tabs then sit in a row with the panel, the list stacks its triggers, and each trigger fills the list's width with its label at the start.

Do Up and Down move between these triggers?

Yes. The orientation is vertical, so Up and Down move between triggers, and Home and End jump to the first and last. The arrow keys only move focus, and Enter or Space selects. Set activateOnFocus on TabsList to select on focus.

Which sections are in the list?

Profile, Security, Preferences and Team, built from a sections array. Profile is the default, and each panel is a bordered bg-card block with an h3 and a muted paragraph.

How wide is the list?

It sizes to the longest label, Preferences. The panel takes the rest of the max-w-2xl row.

What is the space between the list and the panel?

gap-6 on Tabs.

Does it work on a narrow screen?

The row stays side by side, so the panel narrows. On a phone, switch to orientation="horizontal" or a scrollable list.

All 11 tabs examples