Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Activity Stream Comments Block for Solid

Comment, reply, reaction, edit, resolve and mention events grouped by thread in folding groups, with a toggle for each teammate and a Load earlier button.

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

See what happened in each thread without opening them, with this activity stream for Solid with Ark UI. A compact header names the project. The frame opens with a people band: one Toggle per teammate showing their initials, name and how many events they have, pressed while their events are shown. Under it a held scroll region lists the threads, each a Collapsible with the thread's title and an event count, the first one open. Events say who did what (commented, replied, reacted, edited, resolved, mentioned), carry a small glyph for the kind and show their age. Turning a person off hides their events, hides threads that have none left and recounts the line under the stream, "9 events from 4 people". Load earlier appends six typed events in place. It is built from Toggle, Collapsible, Button, Avatar, Badge and Guides, with a CSS entrance only. For project hubs, team spaces and any place where comments are scattered across many threads.

FAQ

How do I fill it with my own events?

Edit PEOPLE, THREADS and the two event lists, FIRST and EARLIER. An event has an id, the person, a kind (commented, replied, reacted, edited, resolved or mentioned), an ISO at, a few words of text and its thread. Groups, counts and the sentence under the stream are worked out from those lists, ordered with the most recently active thread first.

What does a person's toggle do?

It is pressed while that person's events are shown. Turn it off and their events leave every group; a thread with no events left disappears, and if everyone is off the region says so in the same space. The count on each toggle is how many events that person has among the loaded ones, so it grows when you load earlier events.

Is it live?

No. The events are typed sample data and the block says so. Nothing refreshes, polls or connects. To make it real, load a page of events from your server, group them by thread, and have Load earlier fetch the next page by cursor; keep the person filter on the client for small sets or send it with the request for large ones.

What stays local?

Which people are shown, which groups are open, and whether the earlier events were loaded. Nothing is saved. A real activity stream usually saves the open groups per person only if it helps, and always loads the events from the server.

Is it accessible?

The people are a labelled list of toggles that report their pressed state, and each group's trigger announces whether it is open. The scroll region is reachable with Tab. Every event says its kind in words as well as with a glyph, and a polite status line reports each change, including the new totals.

How does it look on a phone?

The people band becomes a row that scrolls sideways, each toggle keeping its name and count. The groups and events stack in the held region, and the times stay at the end of each line.