shadcn.io is not affiliated with official shadcn/ui
Discord Level Roles Grid Integration Block for React
A grid of six Discord level roles for a community tool: each cell a role chip, a switch and a number stepper for the messages that earn it, with a derived time line and an error when the thresholds stop rising.
Installation
Overview
An integration capabilities grid for React with Base UI, written for Hearthbell, a fictional community announcements and role-sync tool, and its Discord bot. A compact header ("Hearthbell grants six level roles") has the mark pair at its end. Six cells sit apart, each with corner + marks that overshoot its edges: a role chip from Newcomer to Elder with a dot that darkens up the ladder, a switch that turns the reward off, and a number stepper for the messages a member must post to earn it. Under the stepper, one line worked out from a single typed rate says how long that takes ("About 38 days at 40 a day"). The thresholds must rise down the ladder: a value at or under the nearest role above it that is on shows its error in that same line, and the stepper is marked invalid. A polite line tallies the roles that are on ("5 of 6 roles on") and says nothing is sent to Discord. On a phone the cells become a snap carousel, one role per view. 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 Number Input, Switch 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 roles and the thresholds are example data.
FAQ
What stops two roles from needing the same number of messages?
The line under each stepper. lineOf compares a role's value with the nearest role above it that is switched on (aboveOf) and, when the value is not higher, shows "Needs to be more than Regular's 200." in the line's place and sets the stepper invalid. A role that is switched off is skipped, so turning Mentor off does not make Veteran and Elder compare with a role that is not granted. An empty or zero value says "Enter a whole number of messages."
Where does the time line come from?
From one typed number, DAILY, the messages a member posts in a day. Each line is the threshold divided by it, rounded to whole days and never below one ("About 1 day at 40 a day"). Change DAILY and every line follows. It is an estimate for the page, not a promise: the line only appears while the role is on and valid.
Does it change roles on a server?
No. The switches and numbers are local state, and a polite line says "Nothing is sent to Discord from this demo." A real install must also place Hearthbell's own role above the roles it grants in the server's role list, because Discord only lets a bot give roles below its own; the setup block draws that ladder. Read on and texts in your own handler to save the thresholds.
How do the steppers work from the keyboard?
Each is a real number input with Decrement and Increment buttons: type a number, or press the arrow keys to change it by one. The line under it follows each keystroke on Ark, Base UI and Radix; on React Aria the number is committed when you leave the field or press Enter, as React Aria's number field does, and the arrow keys commit at once. It is a whole number from 1 up, shown without thousands separators so what you type is what you read back. Each has a name ("Messages to earn Regular") and a visible label, and a role that is off has its stepper disabled.
How does it fit on a phone, in right-to-left layouts and with reduced motion?
Below md the cells become a horizontal snap carousel at 85% width, so the next role peeks in; there are no arrows because every cell has focusable controls and the browser scrolls to the one you tab into. From md they sit in a grid, two across and then three. In a right-to-left layout the grid and each cell flip. The header fades up once on load; with reduced motion it simply appears.
Related
- Pro
Discord Detail Integration
Scopes and stepsAn integration detail section for a community announcements tool joining a Discord server: an invite card whose permissions integer and link follow eight permission switches, each with its documented bit value.
- Pro
Discord Linked Members List Integration
Grouped and triagedA linked-members list for a community tool connected to Discord: a search that marks the letters you type, fourteen members six to a page with their level roles and link state, a Retry on the one link that failed, and a pager.
- Pro
Discord Setup Integration
Choose and verifyA 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.
- Pro
Radial Dial Stats Integration
Rings and talliesAn integration stats section for a community announcements tool running in Discord: a framed 24-hour dial of posts an hour with the quiet hours drawn as hatched ticks, and three figures worked out from the same data.
- Pro
Toggle Switch Control Panel Features
Live controlsA notification matrix for an alerting product: five events by four channels, every cell a working Switch, a counter that rolls as you flip them and a footer that offers Save and Discard in reserved space.
- Pro
Seat Management Billing
Plan and usageSeats on a team plan: members with a role each (viewers are free), a stepper for the seats you pay for, and the monthly and prorated cost worked out before you save.