shadcn.io is not affiliated with official shadcn/ui
Community channels About Block for Svelte
A community close for a developer community: three channels with member counts beside four recent activity lines, and a join link.
Installation
Overview
A community close for Svelte with Ark UI, written for Beaconhearth, a fictional developer community. "Where we hang out" introduces the channels. Each channel is a row with its name, a one-line note and a member count. Under them, a Shine Button says Join. Beside that, on a wide screen, four recent lines: a person's initials, their name, what they did and how long ago. On a phone the activity follows the channels. The page's rails and top rule come from the Guides spine, and the divider meets that rule. It's built from ShineButton, Avatar and Guides, with a CSS entrance and your theme's tokens for every colour. For an about page that should show the room is already in use. The channels, the counts and the lines are example data.
FAQ
How do I change the channels and the activity?
The channels are CHANNELS: a name, a note and a count. The lines are LINES: a name, an action and an ago such as "4 min ago". The introduction counts both arrays. The initials are derived from the name. The join link points at #.
How is it read by a screen reader?
The heading is the section's only h2. Each channel is a row: the name, the note, then the member count. The action is a link named Join. The activity is an h3, "Recent", then a list. Each line reads the name, the action and the time. The initials avatar is decorative, because the name is written beside it. The lines of the spine are hidden from assistive technology.
Where do the member counts come from?
Each count is the count on that channel, formatted with grouping separators. The block does not add them into a single total. Change a number and only that row changes.
Where does Join go?
It is a link to #. Point the href at the sign-up or the forum. It is the only button. The light on it is the Shine Button's sweep.
How does it fit on a phone?
The introduction, the channel rows and Join come first. The recent lines follow, under a rule. A channel keeps its count on the same row, and the count does not wrap away from the name. Nothing scrolls sideways at 320 pixels.
What moves, and what happens with reduced motion?
The introduction and the channels fade up once on load. The activity list does not. With reduced motion the fade is off. The button's light sweeps on hover, focus or press, and with reduced motion it fades in where it stands. Nothing plays on its own.