Skip to content

Integration Card

Team and settingsMIT
View in Storybook

Third-party service integration card with connected/disconnected toggle.

bun add @otfdashkit/ui

Preview

Integration Card

Code

import { IntegrationCard } from '@otfdashkit/ui'

export function Example() {
  return (
    <div className="max-w-xl space-y-3">
      <IntegrationCard name="Slack" description="Send notifications and updates to your Slack workspace." connected />
      <IntegrationCard name="GitHub" description="Sync your repositories and automate workflows." />
      <IntegrationCard name="Zapier" description="Connect with 5000+ apps using Zapier." />
    </div>
  )
}

Free with the SDK. This block ships in @otfdashkit/ui under the MIT license.

Props

Props declared in the IntegrationCard source. Inherited HTML attributes are not listed.

PropTypeDefaultDescription
classNamestring
connectedbooleanfalse
descriptionstring'Send notifications and updates to your Slack workspace.'
iconReactNode
namestring'Slack'