caliper uidocs
DemoSign inGet Pro

Connection consent

Pro

Ask before an assistant connects to something on someone’s behalf: who made it and whether that is verified, each permission in plain words with write and admin marked, optional ones left off, and for how long.

Installs components/ui/connection-consent.tsxDepends on @radix-ui/react-slot, lucide-reactMotion shared motion tokens
pnpm dlx shadcn@latest add @caliper/connection-consent

Linear wants to connect to Halden workspace

Verified · Linear Orbit, Inc.linear.app(opens in a new tab)

Read and update issues from the assistant.

It will be able to
  • Read issues, projects and comments, required
  • It can change status, assignee and labels.Can change
  • Can change
  • Includes members and webhooks.Admin

Granting as maya@halden.app. Read-only.

When to use #

Use it for

  • Connecting MCP servers, plugins or integrations.
  • OAuth-style consent inside your own product.

Skip it when

  • Cookie consent; use the cookie consent banner.

Installation #

terminal
pnpm dlx shadcn@latest add @caliper/connection-consent

Adds its 7 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 { ConnectionConsent } from "@/components/ui/connection-consent"

The worked example comes with Pro

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

Checking your licence…

API reference #

ConnectionConsent

component
PropTypeDefaultDescription
app *{ name: string; publisher: string; verified?: boolean | undefined; logo?: string | undefined; url?: string | undefined; description?: string | undefined; }—
target *{ name: string; logo?: string | undefined; }—What it connects to, e.g. "Acme workspace".
scopes *readonly ConsentScope[]—
account *string—Who is granting, e.g. "dana@acme.com".
defaultDurationConsentDuration"30d"
onAllow *(grant: { scopes: string[]; duration: ConsentDuration; }) => void | Promise<void>—
onDeny *() => void—
classNamestring—

Accessibility #

It exposes note and alert semantics, with aria-labelledby, aria-describedby and aria-hidden 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 #

Transitions use the shared duration and easing tokens. Under prefers-reduced-motion those tokens collapse to instant and travel distances go to zero, so state changes still happen without movement.