Integrations
BlockA directory of services to connect — searchable, filterable by category or connected, each with a labelled switch.
- SaaS
- 2 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add integrationsimport { IntegrationsBlock } from "@/components/blocks/integrations"; export default function Page() { return <IntegrationsBlock />;}<IntegrationsBlock>
| Prop | Type | Default |
|---|---|---|
description | string | "Connect the tools your team already uses." |
headingLevelThe headline's level. | 1 | 2 | 3 | 4 | 5 | 6 | 2 |
integrations | Integration[] | DEFAULT_INTEGRATIONS |
onConnectedChangeCalled when a switch is flipped. Return a rejected promise to undo it. | (id: string, connected: boolean) => void | Promise<void> | — |
title | string | "Integrations" |
Plus every attribute of <section> except title.
Each integration is a list item whose switch is named by the service, with its state also in words ("Connected" / "Not connected"), never colour or knob position alone. The search has a visible label; category filters are toggle buttons (aria-pressed) in a named group; a status line counts what is shown and connected. A switch whose change is rejected goes back, and settings links carry the service name.