Integrations Grid React component
An integrations directory: search, category chips with counts, app cards with icon tiles, Popular and Connected badges, Connect and Disconnect buttons driven by your promise, a running connected count, and a request-an-integration card that doubles as the empty state.
About the Integrations Grid component
Integrations Grid is an app directory for a SaaS product. People can search, filter by category with chips that show how many apps each has, and connect or disconnect an app right from its card. A live count shows how many are connected.
Each card has an icon tile, the app name and category, a one-line description and Popular or Connected badges. Your onToggle promise drives the button: it shows a spinner while the request runs, only flips when it succeeds, and shows an error if it fails. A dashed card at the end invites people to request a missing tool and becomes the empty state when nothing matches.
When to use it
Use it on a public integrations page, or inside your app's settings as the place to manage connections.
For a purely marketing page, leave out onToggle and give each app an href to its own page.
Installation
Add the Integrations Grid component to your project with the shadcn CLI. It lands in components/integrations-grid.tsx as plain React + Tailwind CSS source you own and can edit.
npx shadcn@latest add @reactframe/integrations-gridOr copy the source by hand and install its dependencies:
npm install motion clsx tailwind-mergeProps
<IntegrationsGrid /> accepts 9 props, all optional.
| Prop | Type | Default |
|---|---|---|
| eyebrow | string | "Integrations" |
| title | string | "Works with the tools you already use" |
| description | string | "Connect your code, chat, design and support tools in a couple of clicks. Nexora keeps th… |
| integrations | Integration[] | DEFAULT_INTEGRATIONS |
| searchable | boolean | true |
| onToggle Called when Connect or Disconnect is pressed. Return a promise: the button shows a spinner while it runs and the new state sticks only if it resolves. Without it the state just toggles. | (id: string, connect: boolean) => void | Promise<void> | — |
| requestHref Link for the "Request an integration" card. Pass null to hide the card. | string | null | "#" |
| theme | "dark" | "light" | "dark" |
| className | string | — |
- eyebrowstringDefault: "Integrations"
- titlestringDefault: "Works with the tools you already use"
- descriptionstringDefault: "Connect your code, chat, design and support tools in a couple of clicks. Nexora keeps th…
- integrationsIntegration[]Default: DEFAULT_INTEGRATIONS
- searchablebooleanDefault: true
- onToggle
Called when Connect or Disconnect is pressed. Return a promise: the button shows a spinner while it runs and the new state sticks only if it resolves. Without it the state just toggles.
(id: string, connect: boolean) => void | Promise<void> - requestHref
Link for the "Request an integration" card. Pass null to hide the card.
string | nullDefault: "#" - theme"dark" | "light"Default: "dark"
- classNamestring
npm dependencies
Installed for you by the shadcn CLI.
Integrations Grid FAQ
- How do I connect it to my backend?
- Handle onToggle(id, connect) and call your API. Return the promise: the button spins while it runs, the card switches to Connected only if it resolves, and a rejection shows 'Could not connect'.
- Can I use real app icons?
- Pass icon for each integration, for example icon={<img src="/icons/app.svg" alt="" />}. Without it a coloured tile with a simple glyph is drawn from color and the id. The default apps are fictional.
- How are the categories made?
- They come from the category field of your integrations, in the order they first appear, with All first. Each chip shows how many apps it has.
- Can I hide the search or the request card?
- Set searchable={false} to hide the search field and requestHref={null} to hide the request card.
- Is it keyboard accessible?
- The search has a label, category chips and Connect buttons use aria-pressed, each button names its app (Connect Gitline), the connected count is announced, and errors use role alert.
