Integration Card
Team and settingsMITThird-party service integration card with connected/disconnected toggle.
bun add @otfdashkit/ui
Preview
Integration CardTeam and settings
Code
@otfdashkit/uiimport { 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.
| Prop | Type | Default | Description |
|---|---|---|---|
| className | string | ||
| connected | boolean | false | |
| description | string | 'Send notifications and updates to your Slack workspace.' | |
| icon | ReactNode | ||
| name | string | 'Slack' |