Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Onboarding blocks

Pro

Community Join Onboarding Block for Radix UI

A setup panel of four ruled channel rows, each with a Join button and a fold-out of recent threads, a Join all button and a Save that says how many changes are waiting.

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.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Help a new member find their place before they have said a word, with this channel step for React with Radix UI. It is a setup panel of Campfell, a maker community, ruled by Guides: four rows, one for each channel, each with an initials tile, the channel's name, its member count in compact figures ("4.2K members") and one line on what it is about. Each row has its own Join button, which reads Joined when it is on, and an Accordion fold-out, "What's being said", with two recent thread titles and their reply counts. A band over the rows counts "Joined 1 of 4" and has a Join all button. Joins are drafts until Save channels, the one Shine Button; the foot says how many changes are not saved yet or what was saved, and Discard puts the joins back to what was saved.

FAQ

How do I change the channels?

Edit CHANNELS. Each has an id, two typed letters for its tile, a members count, a name, a topic line and a list of threads (a title and a reply count). START lists the channels that are joined when the page opens, and what Save compares against.

What do the Join buttons do?

Each is a real toggle button, named "Join Show and tell" and, once on, "Joined Show and tell", with a fixed width so the row never changes. Joining changes the draft only, the count and the foot's "1 change not saved yet." follow it, and nothing is posted until you wire Save.

Can I look at a channel without joining it?

Yes. "What's being said" folds out the channel's two latest threads, each in a row of one height. Any number can be open at once and the panel simply grows; folding them away shrinks it. Arrow keys move between the fold-out buttons.

What do Save, Discard and Join all say?

Save and Discard are always in the tab order and look quiet when nothing changed; pressing one then says "No changes to save." or "No changes to discard." Join all joins everything, and once everything is joined it says "You are in all 4 channels." The foot's line is the panel's one polite status.

How does it look on a phone?

The Join button stays beside the name, the topic line wraps under it, and the fold-out text sits under the tile's column. Save and Discard pin to the foot of the screen with the status above them.

What stays local in the demo, and how do I wire it?

Everything: Save says it was saved in this demo and nothing is posted or joined. In your app send the joined ids to your server where save says so, and load the thread titles from each channel.

All 100 onboarding blocks