Integrations
OAuth connect cards, API key managers, and webhook configuration UIs.
OAuth Connect Card
Card for connecting or disconnecting an OAuth provider integration.
GitHub
Connect your GitHub account to sync repositories.
Permissions
import { OAuthConnectCard } from "@launchapp/design-system/blocks/integrations";export default function Page() { return ( <OAuthConnectCard provider={{ id: "github", name: "GitHub", description: "Connect your GitHub account", scopes: ["repo", "user"] }} isConnected={false} onConnect={() => console.log("connect")} onDisconnect={() => console.log("disconnect")} /> );}API Key Manager (Integrations)
Manage third-party API keys for external service integrations.
API Keys
Manage your API access keys.
Production Key
sk-prod••••••••••••••••••••
Staging Key
sk-stage••••••••••••••••••••
import { ApiKeyManager } from "@launchapp/design-system/blocks/integrations";const keys = [ { id: "1", service: "Stripe", key: "sk_live_xxxx", createdAt: "2024-01-01" },];export default function Page() { return ( <ApiKeyManager keys={keys} onAdd={() => console.log("add")} onDelete={(id) => console.log("delete", id)} /> );}Webhook Config
Configure webhook URLs and select event triggers for integrations.
Webhook Configuration
Endpoint
Your endpoint URL must be accessible via HTTPS and respond with a 2xx status code.
Events
Choose which events trigger your webhook. 2 enabled.
import { WebhookConfig } from "@launchapp/design-system/blocks/integrations";export default function Page() { return ( <WebhookConfig endpoint="https://example.com/webhook" events={["payment.succeeded", "subscription.canceled"]} onSave={(config) => console.log("save", config)} /> );}Integration Card Grid
Searchable grid of integration cards with connect/disconnect/configure actions.
Integrations
Connect your favorite tools and services.
GitHub
Sync repositories and pull requests.
Slack
Send notifications to Slack channels.
Stripe
Process payments and subscriptions.
HubSpot
Sync leads and customer data.
Google Analytics
Track user behavior.
Zapier
Automate workflows between apps.
2 of 6 integrations connected
import { IntegrationCardGrid } from "@launchapp/design-system/blocks/integrations";const integrations = [ { id: "github", name: "GitHub", description: "Sync repositories.", category: "developer", status: "connected" }, { id: "slack", name: "Slack", description: "Team notifications.", category: "communication", status: "disconnected" }, { id: "stripe", name: "Stripe", description: "Payment processing.", category: "payments", status: "connected" },];export default function Page() { return ( <IntegrationCardGrid integrations={integrations} searchable onConnect={(i) => console.log("connect", i.id)} onDisconnect={(i) => console.log("disconnect", i.id)} onConfigure={(i) => console.log("configure", i.id)} /> );}Integration Marketplace
App marketplace with search, categories, install/uninstall, and toggle controls.
Integration Marketplace
Discover and install integrations to extend your workflow.
GitHub
Version control and collaboration.
Slack
Team messaging and notifications.
Stripe
Payment processing platform.
Zapier
Workflow automation tool.
import { IntegrationMarketplace } from "@launchapp/design-system/blocks/integrations";const integrations = [ { id: "github", name: "GitHub", description: "Version control.", category: "developer", status: "installed", version: "2.1.0", enabled: true, isOfficial: true }, { id: "slack", name: "Slack", description: "Messaging.", category: "communication", status: "available", version: "1.3.0", enabled: false, isOfficial: true },];export default function Page() { return ( <IntegrationMarketplace integrations={integrations} showSearch showCategories onInstall={(i) => console.log("install", i.id)} onConfigure={(i) => console.log("configure", i.id)} onUninstall={(i) => console.log("uninstall", i.id)} onToggle={(i, enabled) => console.log("toggle", i.id, enabled)} /> );}Webhooks List
Manage outbound webhooks with status, event subscriptions, and test functionality.
Webhooks
Manage webhook endpoints that receive event notifications.
Production Webhook
https://api.example.com/webhooks/prod
Staging Webhook
https://staging.example.com/webhooks
Analytics Sink
https://ingest.analytics.io/hook
import { WebhooksList } from "@launchapp/design-system/blocks/integrations";const webhooks = [ { id: "1", name: "Production Webhook", url: "https://api.example.com/hooks", status: "active", events: ["user.created", "payment.success"], createdAt: "2024-01-01", successRate: 98.5 }, { id: "2", name: "Staging Webhook", url: "https://staging.example.com/hooks", status: "inactive", events: ["user.created"], createdAt: "2024-02-01" },];export default function Page() { return ( <WebhooksList webhooks={webhooks} canManage onAdd={(data) => console.log("add", data)} onEdit={(wh) => console.log("edit", wh.id)} onDelete={(wh) => console.log("delete", wh.id)} onToggle={(wh) => console.log("toggle", wh.id)} onTest={(wh) => console.log("test", wh.id)} /> );}