shadcn.io is not affiliated with official shadcn/ui
Discord Setup Integration Block for React Aria
A connect flow for a community tool and Discord: a three-step wizard (authorize, pick a server, map three plans to roles with Selects) beside the server's role ladder with the bot's own role marked, ending in Finish setup.
Installation
Overview
An integration connect flow for React with React Aria, written for Hearthbell, a fictional community announcements and role-sync tool, and its Discord bot. Behind a split divider that runs from the top rule to the block's foot, the start column holds the title ("Connect Hearthbell to Discord"), the mark pair and a bordered three-step wizard built on the catalog's Steps. Step 1 lists the two scopes the bot asks for, bot and applications.commands, and reminds you that adding a bot needs the Manage Server permission. Step 2 is a Listbox of three servers; the one where you lack Manage Server is unavailable, with the reason beside it. Step 3 maps three plans (Free, Plus, Team) to roles with a Select each, over a sample announcement that shows the role you chose for Plus. The end column draws the server's role list as a ladder, highest first, with Hearthbell's own role marked: the roles above it cannot be chosen, exactly as Discord enforces, and the roles you map appear on their rungs. Continue moves on and Back returns; the last step's Shine Button Finish setup waits for a server and three roles and says what is missing. Finishing says "Connected in this demo", and a quiet Disconnect starts again. Each step's heading takes focus when you move. The page's rails and top rule come from the Guides spine, so it lines up with its neighbours in a stack. It's built from Steps, Listbox, Select, Badge, Button, Shine Button and Guides, with your theme's tokens for every colour. Discord is named in text only: no logo, colour or wordmark ships with the block. The product, the servers and the roles are example data.
FAQ
Why can't I pick Admin or Moderator?
Discord only lets a bot give roles that sit below its own role in the server's list, so a mapping to a higher role would fail on a real server. The ladder at the end shows Hearthbell's role third, and every role above it (and Hearthbell's own role) is unavailable in the Selects, with the reason beside it. To change that on a real server, an admin drags Hearthbell's role higher in Server Settings, then Roles. Edit ROLES: each has a blocked reason, empty when the bot may grant it.
Does it add a bot to a server?
No. Nothing connects, authorizes or sends anything. Step 1 names the two scopes a real authorize screen would show and says that this demo skips it. Finishing says "Connected in this demo", and a polite line says "Nothing is sent to Discord from this demo." Replace finish with your own call: server is the chosen server and mapping the role for each plan.
When can I continue, and when can I finish?
Continue on step 2 waits for a server, and Finish setup on step 3 waits for a server and a role for each of the three plans; the line beside the button says what is missing ("Map 2 more plans."). Both buttons stay focusable while they wait (they are aria-disabled, not removed), and pressing one does nothing until the step is complete. Back is always available after the first step, and a finished step can be revisited by its number in the strip.
Does the panel change height from step to step?
No. All four panels (the three steps and the result) are drawn once more, unseen, in the same grid cell as the live one, so the panel keeps the height of the tallest. Each step's heading takes focus when you move with Continue, Back or the strip, never on load, so a keyboard or screen reader user starts reading where the content changed.
How do the controls behave on each base?
The plan selects take their roles as ided items and mark the blocked ones isDisabled, and the buttons use React Aria's onPress.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
Below lg the divider gives way to a rule and the role ladder goes under the wizard; the strip keeps only its numbers, and the buttons fill the width. Scopes and role names keep their direction in a right-to-left layout while the columns and the ladder flip. The header and the wizard fade up once on load; with reduced motion they simply appear.