Team & credentials
The people behind the business and what they are qualified to do.
Installation
npx shadcn@latest add http://localhost:3000/r/team-credentials.jsonMKT UI is not published yet, so this points at your local development server. Set NEXT_PUBLIC_REGISTRY_URL to the deployed origin to show the public command.
Also installs: container, section, section-heading, person-card, credential-badge.
Usage
import { TeamCredentials } from "@/components/team-credentials";
<TeamCredentials
eyebrow="Who you'll meet"
title="Licensed people, not subcontractors"
people={[
{ id: "p1", name: "Alina Mercer", jobTitle: "Master plumber", photo: { src: "/team/alina.jpg", alt: "" } },
{ id: "p2", name: "Ben Okafor", jobTitle: "Operations lead" },
]}
credentials={[
{ id: "c1", title: "Licensed Master Plumber", issuer: "Texas State Board", detail: "M-40219", href: "https://example.gov/licence/M-40219" },
]}
/>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title (required) | ReactNode | — | Section heading. |
| people | TeamMember[] | [] | The team. Each needs `id` and `name`. |
| credentials | TeamCredential[] | [] | Licences, certifications, memberships. |
| credentialsTitle | ReactNode | "Licenses & accreditations" | Heading above the credential list. |
| variant | "compact" | "detailed" | "compact" | `detailed` shows bios and per-person credentials. |
| columns | 2 | 3 | 4 | 4 | Columns on wide screens. |
| surface | "default" | "muted" | "brand" | "inverted" | "default" | Background treatment. |
Behaviour
People and credentials share one section because they answer the same question — "can I trust these people with my house?" — and splitting them across two sections makes a small business look thinner than it is.
A person without a photo falls back to their initials, not a broken frame. A team section stays usable before every headshot has been taken, which is the state most small businesses are permanently in.
Credentials accept an href. Point it at the public register or certificate that
backs the claim. A credential nobody can check is decoration.
Photos use a portrait ratio and reserve their space, so a grid of people does not reflow as headshots load.
Limitations
- No founder-spotlight or editorial-narrative variant yet.
- No per-person detail pages.
columns={4}gets tight below about 1280px with long job titles.