Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tabs examples · Layout

Full Width Tabs for React

Three tabs that split the full width of the list into equal columns.

Framework
UI library

A few tabs of equal weight look balanced when they share the whole row. TabsList is a three-column grid at full width, so All, Active and Completed each take a third. Use it for status filters or any short set of views of the same list.

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 do the triggers become equal width?

TabsList has grid w-full grid-cols-3. There are three triggers, so each one fills a column.

Which tab is selected first?

All, the default value on Tabs. The group is w-full max-w-md, and each panel matches its trigger: all, active and completed.

What happens if I add a fourth trigger?

grid-cols-3 is three columns, so a fourth trigger wraps to a second row. Change it to grid-cols-4 along with the new trigger.

What does each panel show?

A bordered bg-card block with a heading and task rows filtered from one tasks array. All shows three, Active the two that are not done and Completed the one that is.

What do the colored dots mean?

A done task gets a bg-success dot and an open one a bg-info dot. They follow the theme's status colors, and the task title next to each dot says the same thing in words.

Do long labels fit?

All, Active and Completed are short. Each column is a third of the max-w-md list, so a long label would need a shorter word or more width.

All 11 tabs examples