Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Tabs examples · Advanced

Tabs with Badge Counts for React

Mailbox tabs with a badge after each label showing how many messages it holds.

Framework
UI library

A count on each tab tells people which view needs attention before they open it. Each TabsTrigger holds its label and a Badge: Inbox 12, Unread 5, Archived 48 and Spam 3. Use it for inboxes, task lists by status or filters with totals.

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 is the count attached to a trigger?

The Badge sits inside TabsTrigger, after the label. The trigger's own gap spaces them, so the badge needs no margin.

Why does Unread look different from the other counts?

Unread's badge uses the default variant, so it is filled. Inbox, Archived and Spam use variant="secondary".

Do these counts change when messages move?

No. The four numbers are written in the triggers, and the panels do not update them. Pass your own counts as each badge's children.

Which tab opens first?

Inbox, the default value on Tabs. The group is w-full max-w-2xl, and the list sizes to its four triggers.

What do the message rows show?

Inbox maps three messages and Unread two, from arrays at the top of the file. Each row has a subject, a sender and a preview, with an Unread or Read badge.

What is in Archived and Spam?

A heading with the count, such as Archived Messages (48), and one muted paragraph. Neither panel lists messages.

All 11 tabs examples