Sidebar 18 - Sidebar with chat channels

Pro

A chat-style sidebar with workspace switcher, text and voice channels, direct messages with status dots, unread badges, and user media controls.

Shadcn Sidebar 18 block

Component data

ID
sidebar18
Access
pro
Created
Jan 25, 2026
Type
block
Libraries
Radix UI, Base UI, React Aria

Sidebar 18 block design & features

Sidebar18 is a chat rail built with shadcn/ui. A workspace switcher sits in the header. The body splits into Text Channels, Voice Channels, and Direct Messages, each with a small add control on the group label. Text rows use a hash mark and a round unread count. Voice rows use a speaker icon and a small occupant count. Direct messages pair a compact avatar with a status dot (online, idle, offline) and optional unread badges. The footer is a persistent user bar: avatar, name, an Online status, plus mute, deafen, and a settings menu.

Color treatment stays mostly default, with primary-filled unread pills and green, yellow, or gray status dots. The user bar sits on a slightly tinted footer with a top border. Rows are compact. Hover states are quiet.

The overall aesthetic is a messaging or community workspace, closer to a chat client than a dashboard. Unread badges, presence dots, and media controls make it more elaborate than the basic app rails. Complexity is content-driven: you need channel names, unread counts, voice occupancy, and a direct-message roster.

The user bar stays visible while the channel lists scroll. The main header still carries the collapse trigger and breadcrumbs.