A mail app sidebar with a compose button, folders with unread counts, colored labels and a storage meter that fills on mount.
Inbox
12 unread messages
npx shadcn@latest add https://hyperblur.dev/r/sidebar-mail-folders.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-mail-folders.tsx.
import { SidebarMailFolders } from "@/components/hyperblur/sidebar-mail-folders"
<SidebarMailFolders defaultActive="inbox" onChange={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| folders | { id: string; label: string; icon?: SidebarMailIconName; count?: number }[] | Inbox, Starred, Sent, Drafts, Archive, Trash | Folder rows. A count above zero bolds the label and shows an unread pill. Counts over 99 read 99+. |
| labels | { id: string; label: string; color: string }[] | Work, Family, Travel | Label rows with a colored dot, listed under the labels heading. Pass an empty array to hide the section. |
| storage | { used: number; total: number; unit?: string } | null | { used: 11.4, total: 15, unit: "GB" } | Storage meter at the bottom. It turns amber above 80% and red above 95%. Pass null to hide it. |
| active | string | Controlled active folder or label id. Pair with onChange. | |
| defaultActive | string | first folder | Initially active id when uncontrolled. |
| onChange | (id: string) => void | Called when a folder or label is chosen. | |
| onCompose | () => void | Called when the compose button is pressed. | |
| composeLabel | string | "Compose" | Text of the compose button. |
| labelsTitle | string | "Labels" | Heading above the label rows. |
| rowHeight | number | 30 | Height of every folder and label row in pixels. |
| accent | string | "#2f7bff" | Accent for the compose button, active row and focus rings. |