shadcn.io is an independent project built on shadcn/ui
Inbox carries a badge of 12 and a chevron. It opens to Unread with 8 and Starred with 4, indented beside a line.
Use it for mail or tickets where the count matters before the folder opens. If the number is the whole message, a Badge is enough. In React, Base UI does not update the counts.
Installation
Anatomy
Usage
<Collapsible className="w-full max-w-lg">
<CollapsibleTrigger className="group flex w-full items-center justify-between rounded-md px-3 py-2 font-medium text-sm hover:bg-muted">
<span className="flex items-center gap-2">
<ChevronRightIcon
aria-hidden="true"
className="size-4 transition-transform duration-200 group-aria-expanded:rotate-90"
/>
Inbox
</span>
<Badge variant="secondary">12</Badge>
</CollapsibleTrigger>
<CollapsibleContent>
<nav className="ms-6 mt-1 flex flex-col gap-1 border-s ps-3">
{folders.map((folder) => (
<a
className="flex items-center justify-between rounded-md px-2 py-1.5 text-sm hover:bg-muted"
href="#"
key={folder.label}
>
{folder.label}
<Badge variant="outline">{folder.count}</Badge>
</a>
))}
</nav>
</CollapsibleContent>
</Collapsible>FAQ
Which badge is 12, and which are 8 and 4?
12 is a secondary Badge at the end of the Inbox trigger. 8 and 4 are outline badges at the end of the Unread and Starred links.
What is the line beside Unread and Starred?
The links' nav has ms-6 border-s ps-3: a start border that follows the page direction, indented to sit under the Inbox label.
Do Unread and Starred expand too?
No. They're links, built from the folders list at the top of the file. Only Inbox is a trigger.
Does 12 get announced with Inbox?
Yes. The badge is inside the trigger, so the name is Inbox 12. Add visually hidden text, such as unread, if the number needs explaining.
API Reference
Collapsible
No extra props in this demo. The rest is on the Collapsible page.
Badge
Sets variant="secondary" and variant="outline". The rest is on the Badge page.
