Connected Apps Toggle List React component
An integrations list where each app has a switch that does the real flow: turning one on shows what it will be allowed to do before connecting, connected apps show the account and options to configure, expired ones ask to reconnect, and turning off asks for confirmation. With filters and search.
About the Connected Apps Toggle List component
Connected Apps Toggle List is an integrations page where every switch does the right thing. Turning an app on shows what it will be allowed to see and do before anything connects, which is what people expect from a trustworthy product.
Connected apps show which account they use and when they last synced, with options to configure. When access expires the card turns amber and offers a one-click reconnect, and turning an app off asks before removing its settings.
When to use it
Use it for integrations and connected accounts in SaaS settings, especially when apps use OAuth with specific permissions.
For a marketing page that showcases integrations, use the integrations grid block instead.
Installation
Add the Connected Apps Toggle List component to your project with the shadcn CLI. It lands in components/connected-apps-toggle-list.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/connected-apps-toggle-listOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<ConnectedAppsToggleList /> accepts 5 props, all optional.
| Prop | Type | Default |
|---|---|---|
| apps | ConnectedApp[] | APPS |
| onConnect | (id: string) => Promise<string | void> | string | void | — |
| onDisconnect | (id: string) => void | — |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- appsConnectedApp[]Default: APPS
- onConnect(id: string) => Promise<string | void> | string | void
- onDisconnect(id: string) => void
- theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Connected Apps Toggle List FAQ
- How do I start the real connection?
- onConnect runs when someone clicks Allow and connect. Open your OAuth window there and return the connected account name (or a Promise that resolves to it). The card shows a spinner meanwhile.
- What does the consent step show?
- Each app's scopes, written in plain language. Keep them short and specific so people know exactly what they're granting.
- How is an expired connection handled?
- Set an app's state to error. Its card turns amber with Reconnect, which runs the same connect flow. Turning it off still asks for confirmation.
- Can I add app-specific settings?
- Yes. Each app's options appear as checkboxes under Configure once it's connected. Wire them to your integration's settings.
- Is it accessible?
- Every switch is labelled by the app name, status lines update politely, the consent step is a labelled group that focuses its main button, and disconnecting is an alertdialog that focuses Keep.
