caliper uidocs
DemoSign inGet Pro

Team block

Block

People introduced by what they own and how to reach them, with initials when there is no photo.

Installs components/ui/team-block.tsxDepends on lucide-reactMotion none in component source
pnpm dlx shadcn@latest add https://caliperui.site/r/team-block.json

Team

The people behind your close

Write to any of us directly. A person answers.

14 people in Lisbon and London. We are hiring a second support lead.

When to use #

Use it for

  • About, security or support pages where buyers want a named contact.
  • A small team that is part of the pitch.

Skip it when

  • A grid of headshots with job titles only.
  • Large organisations; link to a directory.

Installation #

terminal
pnpm dlx shadcn@latest add https://caliperui.site/r/team-block.json

Adds its 4 files to components/ui/, each with its own stylesheet, and installs their packages. No account needed. The first part also adds Caliper UI’s tokens; import them once as in Installation.

Usage #

This is the code behind the preview above.

example.tsx
import { type ReactNode } from "react"
import { TeamBlock } from "@/components/ui/team-block"

function Frame({ children }: { children: ReactNode }) {
  return <div className="w-full overflow-hidden rounded-[14px] shadow-[0_0_0_1px_var(--border)]">{children}</div>;
}

const team: Parameters<typeof TeamBlock>[0] = { eyebrow: "Team", title: "The people behind your close", lead: "Write to any of us directly. A person answers.", footnote: "14 people in Lisbon and London. We are hiring a second support lead.", people: [
    { name: "Priya Raman", role: "Co-founder", owns: "owns the matching engine", contact: { label: "priya@halden.app", href: "mailto:priya@halden.app" } },
    { name: "Rafael Abreu", role: "Head of support", owns: "answers in under 2h", contact: { label: "help@halden.app", href: "mailto:help@halden.app" } },
    { name: "Kiara Murayama", role: "Security", owns: "SOC 2, DPAs, pen tests", contact: { label: "security@halden.app", href: "mailto:security@halden.app" } },
    { name: "Tomás Ferreira", role: "Accountant in residence", owns: "CPA", contact: { label: "tomas@halden.app", href: "mailto:tomas@halden.app" } },
  ] };

export function TeamBlockDemo() {
  return <Frame><TeamBlock {...team} /></Frame>;
}

API reference #

TeamBlock

component
PropTypeDefault
eyebrowstring—
title *string—
leadstring—
people *readonly BlockPerson[]—
footnotestring—
classNamestring—

Accessibility #

It is built on native elements, so roles and focus come from the browser.

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.