shadcn.io is not affiliated with official shadcn/ui
Integration Setup Checklist CRUD Block for Svelte
Six integration tiles that move into a Yours list with a three-step checklist card: a typed API key, an https webhook, and a test that fails once on purpose, with an honest status and Remove with Undo.
Installation
Overview
Turn an integration list into a short checklist per service, with this setup screen for Svelte with Ark UI. Six available integrations are tiles with a two-letter plate and the service named in text; Set up moves a tile into Yours, opens its card and focuses the key field. A card is a Collapsible with a name that edits in place (Editable), a Progress bar and a word derived from the fields ("2 of 3 steps"), and three steps: an API key typed (at least 12 characters, no spaces), an https webhook address, and Test connection, the one Shine Button, which fails once on purpose and passes on the second press. The status reads "Set up (nothing is connected in this demo)", never Connected. Remove returns the tile and clears the fields. For integration pages, onboarding checklists and admin consoles.
FAQ
How do I list my own integrations?
Edit LINKS: each has an id, a name, a two-letter mark, a blurb, a default label and the starting state (setup, key, hook, test). Real services appear only as text; the plate is neutral lettering, never a logo or brand colour.
How is the progress derived?
A step counts when its field passes: a key of at least 12 characters without spaces, a webhook that is an https address with a dot in its host, and a test that has passed. The word "2 of 3 steps" and the bar come from those three checks, so editing a field takes the count back down and resets the test.
Why does the test fail the first time?
So the failure state is something you can design and try: the first press of Test connection reports a simulated failure ("the endpoint didn't answer"), the second passes. It never calls the address. Before steps 1 and 2 are done the button is aria-disabled and pressing it says what to finish.
What does Remove do to the data?
It puts the tile back in its place in the grid, closes the card and clears the key, the address and the test, then the foot says "Removed Slack." with Undo, which restores all of it. Tiles keep their grid cells while they are in Yours, so nothing jumps.
What stays local, and how do I wire real connections?
Everything is state in this tab; no key is stored or sent and the key field is a password input. In your app post the key to your server (never keep it in the browser), register the webhook with the provider there, and make Test connection a real call that reports its own result.