caliper uidocs
DemoSign inGet Pro

Integrations directory

Pro

A searchable list of apps that can be connected, with status.

Installs components/ui/integrations-directory.tsxDepends on @radix-ui/react-slot, lucide-reactMotion none in component source
pnpm dlx shadcn@latest add @caliper/integrations-directory

  • GitHubConnected

    Source control

    Link repositories and show build status on pull requests.

    as northwind-co

  • Team chat

    Messaging

    Post deploys and alerts into the channels you choose.

  • Email digest

    Messaging

    Send a weekly summary to people who are not in the app.

  • Warehouse sync

    Data

    Copy events into your data warehouse every hour.

  • Dashboards

    Data

    Embed live charts in the tools your team already uses.

    Coming soon

  • Cloud storage

    Data

    Archive exports to your own bucket.

  • Issue tracker

    Source control

    Create issues from failed builds and keep them in sync.

  • Automation

    Messaging

    Trigger workflows in thousands of apps.

When to use #

Use it for

  • Letting users connect the product to other tools.
  • Showing what is already connected.

Skip it when

  • There are only one or two integrations.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/integrations-directory

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. Pro installs with your access token, set up once per project. See Pro access. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

Import it from your copy of the source. The example behind the preview comes with the source.

example.tsx
import { IntegrationsDirectory } from "@/components/ui/integrations-directory"

The worked example comes with Pro

The 33-line example behind the preview opens here with a Pro or Team licence.

Checking your licence…

API reference #

IntegrationsDirectory

component
PropTypeDefaultDescription
integrations *readonly Integration[]—
onConnect *(id: string) => Promise<void>—Resolve when connected, throw when it failed.
onDisconnect *(id: string) => void—
classNamestring—

Accessibility #

It exposes group, status and alert semantics, with aria-label, aria-hidden and aria-pressed kept in step with state. Changes that matter are announced through a live region.

No custom key handling; Tab and the native activation keys do the work.

Motion #

It declares no animation in its component source. Any transition comes from its stylesheet, which uses the duration tokens that collapse to instant under prefers-reduced-motion.