shadcn.io is not affiliated with official shadcn/ui
No Connected Apps Empty State Block for Solid
A connected apps page with nothing connected: three apps to choose from, the scopes the chosen one would ask for (one required, two optional) and a drawn plug that moves toward a wall socket as choices are made, without ever reaching it.
Installation
Overview
Show what an account would grant before it grants anything, with this no connected apps empty state for Solid with Ark UI. A hairline frame with a plus mark on each corner holds the connected apps page of Tethermill, a calendar-sync tool. At the start of the first band three real services are named in text with a neutral two-letter tile and sit in a group of real radio buttons; at the end, the scopes the chosen app would ask for are listed with a Checkbox each, the first required and always ticked, the other two optional. Under them a greyscale drawing of a wall socket and a plug on its cable stands for the gap: the plug moves closer as an app is chosen, as optional scopes are ticked and when the Shine Button, the only colored control, is pressed, but it never reaches the socket, because nothing connects. The action foot says what it would connect with. The frame's bands are ruled by Guides, and the whole block uses CSS transitions only. For the connected apps, authorized apps or access page of any account.
FAQ
What happens when I press Review and connect, and what stays in the page?
Nothing connects. The choices are kept in the page's state, the plug moves to its closest place and a polite status message says "Would connect Slack with 2 scopes. Nothing is connected in this demo." Choosing another app or changing a scope puts the plug back to where those choices put it. Start over clears everything. To wire it for real, send the person to the app's own consent screen with the ticked scopes where the code says so, and list the app as connected only after it answers.
How are the scopes chosen, and why is one always ticked?
Each app has its own typed list of scopes, one required (its box is ticked and disabled, with the word Required) and two optional, so the preview shows only what that app would really ask for. The ticks of the optional scopes are kept per app: go back to an app and they are as you left them. A scope's line says in one sentence what it allows.
How does the drawing react without moving anything?
It is one inline SVG that never swaps: the plug and its cable slide along the page by a CSS transition, switched off under reduced motion, and the dashed gap line behind them is covered by the plug as it goes. The cable fades out at its far end with a mask on the wrapper. The drawing is decorative and hidden from screen readers; the status message says what would happen.
Is it usable with a keyboard and a screen reader?
The apps are one radio group: Tab reaches it once and the arrow keys change the choice. The scopes follow, each named by its scope and described by its line, then Review and connect and Start over, which stays quiet (and says so if pressed) until there is something to undo. Pressing Review and connect with no app says so and moves focus to the first app.
How does it look on a phone?
The scopes stack under the apps and every pane shares one cell, so choosing an app never moves the buttons. The drawing sits between the lists and the foot, 80 px tall, and the foot is pinned to the bottom of the screen so the button stays in reach. From the medium breakpoint the apps and the scopes sit side by side, divided by a rule that meets the band's rules at plus marks.