Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Slack Style Chat Block for Svelte

Three panes in a wide window: a rail of three workspaces with unread channel counts, a channel list, and the open channel as flat rows, where switching workspace swaps the list and remembers the last channel in each.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Show a team workspace, with this workspace style chat for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a wide window of fixed height for Crowsnest, a team workspace, in three panes. A rail of three workspace tiles carries, on each, the count of its channels with unread messages; a channel list shows six channels and two people, bold with a count where unread; and the open channel is flat rows from Message and Bubble with no bubble shape, a run under one header and later times in the gutter on hover and focus. Switching the workspace swaps the list and the logs and remembers the last channel open in each; opening a channel clears its count. The composer's Shine Button is the only colored control. The frame is ruled by Guides, and everything moves with CSS only. For a team chat, a community space or any app with workspaces.

FAQ

What happens when I switch workspace?

The channel list and the log swap to that workspace's own, and the last channel you had open in it comes back. Every workspace has its own people and typed channels, about four messages each, so the whole data is small and typed in the file.

Where do the counts come from?

They are derived from the typed messages: a channel's count is its messages not from you while it is unread, and a tile's count is how many of its channels hold unread messages. Opening a channel clears its count and the tile's follows.

What stays in the page, and how do I make it real?

Everything. The replies come from a short typed script in this file: a few keyed on words in your message, then one fallback per message and a last line that says it was the last sample reply. Posting adds a flat row to the open channel only. Nothing is sent and no model runs, as the line under the composer says. To wire it for real, send the text where the code says so and append incoming messages to the same list.

Is it usable with a keyboard and a screen reader?

The log is a focusable region announced as a log, so new messages are read out once, and every message starts with a hidden sender and time. Receipts and states are a glyph and a word, never a color. Tab runs through the controls, the field and Send.

How does it look on a phone?

The rail becomes a Workspace select above the channel list, a channel opens as a full pane, and a Back button in its top bar returns to the list. The window keeps its height.