caliper uidocs
DemoSign inGet Pro

Team screen

Pro

Members, roles and invitations. Paste a whole list of addresses, see problems marked in place and the seat cost before sending.

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

Team

3 members · 1 invitation · 1 seat free

    1 seat free · extra seats $32 a month each

    • Maya ChenOwner · now
    • Noor HaddadAdmin · 2 h ago
    • Ravi PatelMember · two-factor off
    • ana@forma.exampleExpires in 1 day

    When to use #

    Use it for

    • Workspaces where admins add people in batches.
    • Seats cost money and roles matter.

    Skip it when

    • Single-user products.
    • Directories of hundreds of people; use a searchable table.

    Installation #

    terminal
    pnpm dlx shadcn@latest add @caliper/team-screen

    Adds its 11 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. It is built from TeamScreen and parseEmails.

    example.tsx
    import { TeamScreen, parseEmails } from "@/components/ui/team-screen"

    The worked example comes with Pro

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

    Checking your licence…

    API reference #

    TeamScreen

    component
    PropTypeDefault
    members *readonly TeamScreenMember[]—
    invites *readonly TeamInvite[]—
    roles *readonly string[]—
    seats *{ limit: number; price?: string | undefined; }—
    onInvite *(emails: string[], role: string) => void | Promise<void>—
    onRoleChange((memberId: string, role: string) => void)—
    onResend((email: string) => void)—
    actionsReactNode—
    classNamestring—

    parseEmails

    component

    No props of its own; it accepts the native props of its root element.

    Accessibility #

    It is built on native elements and keeps aria-label, aria-hidden, aria-describedby and aria-live in step with state. Changes that matter are announced through a live region.

    KeyBehaviour
    EnterActivates the focused control.
    BackspaceRemoves the previous character or item.

    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.