Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Tabs with Badge Counts for Ark UI

Inbox, Unread, Archived and Spam, with count badges 12, 5, 48 and 3. Inbox lists messages with a subject, a sender and a Read or Unread badge.

Inbox, Unread, Archived and Spam each carry a count: 12, 5, 48 and 3. Unread's badge is filled and the others are quieter. Inbox is selected and lists messages with a subject, a sender and a Read or Unread badge.

Put a count on a tab when people should see which view matters before they open it. A Badge on a heading does that without switching panels. On React, Ark UI does not update those counts.

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

Anatomy

Tabs anatomy: root, list, indicator, trigger, content

Usage

<Tabs className="w-full max-w-2xl" defaultValue="inbox">
  <TabsList>
    <TabsTrigger value="inbox">
      Inbox
      <Badge variant="secondary">12</Badge>
    </TabsTrigger>
    <TabsTrigger value="unread">
      Unread
      <Badge>5</Badge>
    </TabsTrigger>
    <TabsTrigger value="archived">
      Archived
      <Badge variant="secondary">48</Badge>
    </TabsTrigger>
    <TabsTrigger value="spam">
      Spam
      <Badge variant="secondary">3</Badge>
    </TabsTrigger>
  </TabsList>
  <TabsContent value="inbox">
    <div className="rounded-lg border bg-card p-6 text-card-foreground shadow-sm">
      <h3 className="mb-4 font-semibold text-lg">Inbox (12)</h3>
      <div className="flex flex-col gap-3">
        {inbox.map((message) => (
          <div className="rounded-md border p-4" key={message.subject}>
            <div className="mb-2 flex items-start justify-between gap-2">
              <div>
                <p className="font-medium text-sm">{message.subject}</p>
                <p className="text-muted-foreground text-xs">
                  {message.from}
                </p>
{/* The rest of the file is under Installation. */}

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.

API Reference

Tabs

Sets defaultValue="inbox", value="inbox", value="unread", value="archived" and value="spam". The rest is on the Tabs page.

Badge

Sets variant="secondary" and variant={message.unread ? "default" : "secondary"}. The rest is on the Badge page.

All 11 tabs examples