A team chat sidebar with channels and direct messages in two collapsible sections, presence dots and bold unread rows.
# design-crit
Maya Pushed the new header, thoughts?
Priya Love it. Tighten the spacing under the logo.
npx shadcn@latest add https://hyperblur.dev/r/sidebar-chat-channels.jsonWorks in any React project set up with the shadcn CLI. The file lands in components/hyperblur/sidebar-chat-channels.tsx.
import { SidebarChatChannels } from "@/components/hyperblur/sidebar-chat-channels"
<SidebarChatChannels defaultActive="design" onChange={(id) => console.log(id)} />| Prop | Type | Default | Description |
|---|---|---|---|
| channels | { id: string; name: string; unread?: number; muted?: boolean; private?: boolean }[] | general, design-crit, launch-room, payroll, random | Channel rows. Unread channels turn bold with a badge, muted ones dim, private ones show a lock. |
| people | { id: string; name: string; status?: "online" | "away" | "busy" | "offline"; unread?: number }[] | four people | Direct message rows with an initials avatar and a presence dot. |
| title | string | "Northwind" | Workspace name in the header. Its first letter becomes the logo. |
| subtitle | string | "12 online" | Line under the workspace name. Hidden when empty. |
| active | string | Controlled active channel or person id. Pair with onChange. | |
| defaultActive | string | first channel | Initially active id when uncontrolled. |
| onChange | (id: string) => void | Called when a channel or person is chosen. | |
| openSections | string[] | Controlled open sections. Section ids are "channels" and "people". | |
| defaultOpenSections | string[] | ["channels", "people"] | Sections open at first when uncontrolled. |
| onOpenSectionsChange | (open: string[]) => void | Called when a section is collapsed or expanded. | |
| channelsTitle | string | "Channels" | Heading of the channels section. |
| peopleTitle | string | "Direct messages" | Heading of the people section. |
| accent | string | "#2f7bff" | Accent for the logo, active row and focus rings. |