Tabs

Switch between views of the same thing without leaving the page.

Website refresh

Active

Design studio · Updated today

Tasks12
Members3
Due dateOct 24
Fig. 1 Switch views. The indicator slides with a pointer and moves at once with the keyboard.

When to use it

Use Tabs for a few views of one subject, such as a project’s overview, activity, and settings. People should never need two tabs open at once.

Keep labels to a word or two, and keep the tab count small enough to fit without scrolling.

Sidebar

Where you are in the app.

Room to focus

Toggle the live navigation.

The main sections of an app.

TabsThis page

Views of one thing.

Website refresh

Active

Design studio · Updated today

Tasks12
Members3
Due dateOct 24

Overview, activity, and settings.

Breadcrumb

The path back up.

Select a parent to go back.

Pages nested inside others.

Fig. 2 Three ways to move around. Pick by what people are moving between.

How it behaves

Arrow keys navigate tabs. Activation is automatic by default; Base UI also supports activateOnFocus={false} on TabsList.

Give the tab list a label. Each trigger is connected to its panel. Disabled tabs remain focusable in Base UI but cannot activate.

Panels unmount by default. Keep form values in parent state if they must survive tab changes.

Pointer selection moves the indicator in 220ms; keyboard and reduced-motion selection are immediate. Use animated={false} on TabsList to disable movement.

Build it

Add it with the shadcn CLI:

Terminal

A complete example. Change the values to fit your product:

tabs-example.tsx

The full source is yours to edit once installed:

tabs.tsx