Team Coverage Matrix

Installation

pnpm dlx shadcn@latest add @cleverui/team-coverage-matrix

Requires the @cleverui registry in your components.json, a one-off, two-line setup.

Usage

tsx

import { TeamCoverageMatrix } from '@/components/blocks/team-coverage-matrix'

Exampletsx

import { TeamCoverageMatrix } from '@/components/blocks/team-coverage-matrix'

export default function TeamCoverageMatrixDemo() {
  return (
    <div className="mx-auto w-full">
      <TeamCoverageMatrix
        eyebrow="Coverage"
        heading="Who covers what"
        footnote="Reviewed quarterly · Q2 2026"
        areas={[
          'Design systems',
          'Infrastructure',
          'Billing',
          'Support',
          'ML pipeline',
        ]}
        members={[
          {
            name: 'Aisha Rahman',
            jobTitle: 'Staff Engineer · Platform',
            covers: ['Infrastructure', 'Billing'],
            leads: ['Infrastructure'],
          },
          {
            name: 'Gabriel Soto',
            jobTitle: 'Frontend Engineer · Design Systems',
            covers: ['Design systems', 'Billing'],
            leads: ['Design systems'],
          },
          {
            name: 'Noah Patel',
            jobTitle: 'Staff SRE',
            covers: ['Infrastructure', 'Support', 'ML pipeline'],
            leads: ['Support'],
          },
          {
            name: 'Maya Chen',
            jobTitle: 'Product Manager · Billing',
            covers: ['Billing', 'Support'],
            leads: ['Billing'],
          },
          {
            name: 'Priya Nair',
            jobTitle: 'ML Engineer',
            covers: ['ML pipeline', 'Infrastructure'],
            leads: ['ML pipeline'],
          },
          {
            name: 'Elena Vasquez',
            jobTitle: 'Head of Support',
            covers: ['Support', 'Billing'],
            leads: [],
          },
          {
            name: 'Diego Marquez',
            jobTitle: 'Senior Backend Engineer',
            covers: ['Billing', 'Infrastructure', 'ML pipeline'],
          },
          {
            name: 'Camille Duval',
            jobTitle: 'Engineering Manager · Data',
            covers: ['ML pipeline', 'Design systems', 'Infrastructure'],
          },
        ]}
      />
    </div>
  )
}

API reference

TeamCoverageMatrix accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'Who covers what'`	section heading; level overridable via headingLevel
`eyebrow`	`string`	`'Coverage'`	mono micro-label above the heading, preceded by the primary tick
`areas`*	`string[]`	–	3-6 column labels in display order
`members`*	`TeamCoverageMember[]`	–	4-8 people
`footnote`	`string`	–	optional mono source line under the legend
`headingLevel`	`2 \| 3`	`2`	–

…plus everything from React.HTMLAttributes<HTMLElement>: className, event handlers, aria attributes and the rest pass straight through.

Referenced types

Typestsx

export interface TeamCoverageMember {
  name: string
  jobTitle: string
  /** area labels this person covers, entries from areas */
  covers: string[]
  /** area labels this person leads, subset of covers; filled mark */
  leads?: string[]
}

Related components

Team Cohort Timeline

React team timeline grouping members into year-joined cohorts along a hairline spine, mono year markers and Tailwind-ruled rows tell the growth story.

Team Directory Rows

Dense industry-neutral directory rows under alphabetical mono group headers, name, role, and location column ruled by hairlines; scales from ten people to two hundred.

Editorial Team Grid

Industry-neutral team grid, initials-panel portraits, mono focus-area lines, and link icons with real visible labels; one principal card carries a hairline primary keyline.

Team Hover Dossier

Master-detail React team section, hover or focus a roster name to swap a monogram dossier panel; Tailwind hairlines, tabs semantics, no photos needed.

Team Timezone Strip

Distributed React team strip grouping members under city and UTC-offset mono headers, a Tailwind hairline band for remote-team pages, no headshots or WebGL.

Platform Matrix Features

Feature availability matrix for React product sites, capabilities as rows, platforms as columns, tri-state Tailwind-token cells for shipped, partial, and planned. Docs-grade truth.

Frequently asked questions

How do I install the Team Coverage Matrix component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/team-coverage-matrix`. The shadcn CLI copies the source into your project, you own the code from that point. You can also copy the source directly from this page.

What dependencies does Team Coverage Matrix require?

Team Coverage Matrix uses motion on top of React and Tailwind CSS. You don't need to install it manually, the shadcn CLI resolves and installs npm dependencies automatically when you add the component.

Can I theme Team Coverage Matrix to match my brand?

Yes. The component is styled entirely with Tailwind utilities over standard design tokens (primary, background, muted, border), so it inherits your existing shadcn/ui theme automatically. Change your CSS variables and the component follows, no source edits needed for palette, radius, or fonts.

Preview & code