shadcn.io is not affiliated with official shadcn/ui
Community channels About Block for React
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 React with Base 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.
Related
- Pro
Community Growth Chart About
NumbersA community's growth in one framed area chart, month by month for a year, beside three channel counts (forum, chat, office hours) that roll up as they scroll into view.
- Pro
Culture Rituals About
Culture and valuesA team's rituals sorted by how often they happen: three bands, every week, every quarter and every year, each with three cells that say what the ritual is, who comes and how long it takes.
- Pro
Month Calendar Events About
Culture and valuesThe standing events of an event hosting company drawn as a month at a glance with no month name: a seven by five table of days with the recurring events marked by shape, and the same events as a dated agenda with a Subscribe link.
- Pro
Proof Index Social Proof
CustomersSix kinds of proof for a reference-call tool laid out like a table of contents: each row leads from the kind of proof to its number along a solid hairline, with one line of detail and a link to its source.
- Pro
Mention Tally Customer Love
CustomersWhat customers mention most for a review-monitoring tool: six themes ranked with a bar to scale and a count, each opening two word-for-word snippets, with the tally derived from the typed reviews.
- Pro
Team Voices Carousel About
Team and leadersA quote carousel for an intranet: one voice at a time with a department badge, how long they have been here, a large initials avatar, and previous and next controls.