shadcn.io is not affiliated with official shadcn/ui
Discord Detail Integration Block for Solid
An 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.
Installation
Overview
An integration detail section for Solid with Ark UI, 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 ("Hearthbell for Discord"), one sentence and an invite card: the mark pair (Hearthbell's own tile and Discord's neutral lettermark tile), the permissions integer, how many permissions are on, a read-only invite link with a Copy button, the Add to Discord Shine Button and a View docs link. The end column lists the eight permissions the bot asks for as switches, each with what it is for and Discord's documented value for it. The integer is the sum of the values that are on, and the link's permissions= follows it as you switch. View Channels and Send Messages are required to post and stay on; switching off Manage Roles says that role sync is off. On a phone the card comes first, then the switches. 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 Switch, Input Group, Copy Button, Guides, Button and Shine Button, with CSS transitions for the entrance and your theme's tokens for every colour. Discord is named in text only: no logo, colour or wordmark ships with the block. The product and its link are example data.
FAQ
How is the permissions integer worked out?
Each permission in PERMISSIONS carries Discord's documented bit value (View Channels is 1,024, Send Messages 2,048, Embed Links 16,384, Attach Files 32,768, Add Reactions 64, Read Message History 65,536, Mention Everyone 131,072, Manage Roles 268,435,456). The integer is the sum of the values that are switched on, worked out by total from the same list the rows come from, so the number, the "6 of 8" count and the link always agree. It is a plain sum because each permission is a different power of two.
What does the invite link do?
Nothing yet: it is built, not sent. It has the shape of the OAuth link Discord uses to add a bot, with scope=bot applications.commands and permissions= set to the integer, and YOUR_APP_ID standing for your application's id. Replace inviteOf with your own, point Add to Discord at it, and Copy copies exactly what the field shows. Opening Add to Discord in this block goes nowhere (href="#"), and a polite line says that nothing is sent to Discord.
Why can't I switch two of them off?
A bot that cannot see a channel or send a message cannot post an announcement, so View Channels and Send Messages are marked required: on, locked and labelled, with the reason in the row. Everything else can be switched off, and the line under the card says what that costs (plain-text announcements without Embed Links, no images without Attach Files, no role sync without Manage Roles). Edit cost on a permission to change that sentence.
Can I show Discord's logo?
The block names Discord in text, as any integration page says what it works with, and ships no Discord logo, colour or wordmark. Discord's tile is a neutral lettermark, Di in a muted square, in an icon slot that a code comment marks: drop in the official mark only if you have the rights to use it, under the owner's brand guidelines, and never redraw it. The pair is hidden from assistive technology because the heading already names both products.
How does it behave on each base?
The two buttons take asChild with the link inside, so they can be your router's link.
Every switch has a name (the permission) and is reachable by keyboard; the read-only link field selects itself on focus so it can be copied by hand.
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 parts stack in reading order: the title, the invite card, then the switches. In a right-to-left layout the columns flip while the integer, the link and the bit values keep their left-to-right order. The header and the card fade up once on load with CSS transitions; with reduced motion they simply appear.