Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Broadcast Channel Chat Block for Svelte

A read-only company channel: post cards from admins in a centred stream with view counts, an unread strip with Mark all as read, and no composer, only a Subscribed switch that mutes the channel.

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

Publish to many people who cannot reply, with this broadcast channel for Svelte with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Tidingsdale News, a company channel: under the top bar, a strip counts the unread posts and holds an outline "Mark all as read" button, and the stream below is a centred column of post cards, each with its author, an Admin Badge, a time, a title, the text and a sample view count, with a day label between days. There is no composer. In its place the foot holds a Switch labelled "Subscribed" with a bell glyph and the words "Notifications on" or "Muted", and the line "Only admins post here". Switching it off mutes the channel and the status line says so, while the posts stay readable. The view counts are typed sample figures and are labelled as such. It's built from Switch, Badge, Button and Guides, with a CSS entrance only, and has no colored control. For company news, release announcements and any one-to-many channel.

FAQ

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

Everything. The posts, the view counts and the unread list are typed in this file, and the switch and the button change only local state. To wire it for real, load the posts for the channel, keep the subscription and the ids of read posts on your server, save them in the two handlers, and show the real view counts.

How do the unread posts work?

Three posts start unread and carry a "New" mark. The strip counts them with a derived sentence ("3 unread posts", "1 unread post", "All caught up"), and "Mark all as read" clears the list and says how many were marked. With nothing unread the button stays in place but is disabled, so the strip never changes height.

What does unsubscribing do?

It mutes the channel: the bell turns into a crossed bell, the words change to "Muted" and the status line says the posts stay here. Nothing is deleted or hidden, because the demo shows what a read-only channel keeps for people who have muted it. In your app this is where you stop sending notifications for the channel.

Why is there no composer?

Only admins post here, and the foot says so. A read-only channel with a disabled field would invite a try; this one has nothing to type into, and the subscription control sits where the composer would be.

Is it usable with a keyboard and a screen reader?

The stream is a focusable region named "Posts in Tidingsdale News", each post is an article named by its title, the author's role is a word, and the switch has a visible label. Status changes are announced by one polite status line in the foot.

How does it look on a phone?

The same single column: the Read only badge drops out of the top bar, the cards fill the width and the foot's three items wrap onto two lines. The window keeps its height and only the stream scrolls.