Team Hover Dossier

Installation

pnpm dlx shadcn@latest add @cleverui/team-hover-dossier

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

Usage

tsx

import { TeamHoverDossier } from '@/components/blocks/team-hover-dossier'

Exampletsx

import { TeamHoverDossier } from '@/components/blocks/team-hover-dossier'

export default function TeamHoverDossierDemo() {
  return (
    <div className="mx-auto w-full">
      <TeamHoverDossier
        eyebrow="Dossier"
        heading="The team"
        defaultIndex={0}
        members={[
          {
            name: 'Aisha Rahman',
            jobTitle: 'Staff Engineer · Platform',
            focus: 'Infrastructure · Edge',
            location: 'Melbourne, AU',
            tenure: 'Since 2020',
            bio: 'Owns the multi-region control plane and the deploy pipeline that ships Meridian twice a day. Previously built edge caches at Cloudflare.',
          },
          {
            name: 'Gabriel Soto',
            jobTitle: 'Frontend Engineer · Design Systems',
            focus: 'Design systems · Type',
            location: 'Buenos Aires, AR',
            tenure: 'Since 2023',
            bio: 'Maintains the CleverOps component kit and the token pipeline behind every product surface. Obsessed with tabular figures and focus rings.',
          },
          {
            name: 'Maya Chen',
            jobTitle: 'Product Manager · Billing',
            focus: 'Monetization · Contracts',
            location: 'Singapore, SG',
            tenure: 'Since 2022',
            bio: 'Runs the usage-based billing program across 14 currencies. Writes the pricing RFCs engineering actually wants to read.',
          },
          {
            name: 'Noah Patel',
            jobTitle: 'Staff SRE',
            focus: 'Reliability · On-call',
            location: 'Bangalore, IN',
            tenure: 'Since 2022',
            bio: 'Keeps p99 under 120ms and the pager quiet. Built the error-budget dashboard the whole company watches on Mondays.',
          },
          {
            name: 'Priya Nair',
            jobTitle: 'ML Engineer',
            focus: 'Ranking · Features',
            location: 'Sydney, AU',
            tenure: 'Since 2023',
            bio: 'Ships the ranking models behind search and the weekly feature store refresh. Trained as a statistician, ships like a product engineer.',
          },
          {
            name: 'Elena Vasquez',
            jobTitle: 'Head of Support',
            focus: 'Customer ops · Playbooks',
            location: 'Austin, US',
            tenure: 'Since 2025',
            bio: 'Built the tiered support ladder from first reply to executive escalation. Turns every severity-1 into a permanent runbook.',
          },
        ]}
      />
    </div>
  )
}

API reference

TeamHoverDossier accepts the following props.

Prop	Type	Default	Description
`heading`	`string`	`'The team'`	section heading; level overridable via headingLevel
`eyebrow`	`string`	`'Dossier'`	mono micro-label above the heading, preceded by the primary tick
`members`*	`TeamHoverDossierMember[]`	–	–
`defaultIndex`	`number`	`0`	index of the member whose dossier is open on load
`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 TeamHoverDossierMember {
  name: string
  jobTitle: string
  /** mono one-liner like 'Design systems · Type' */
  focus?: string
  /** short PREFORMATTED string like 'Melbourne, AU' */
  location?: string
  /** short PREFORMATTED string like 'Since 2021' */
  tenure?: string
  /** 1-2 plain sentences */
  bio?: string
  /** derived from name when omitted */
  initials?: 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.

Team Coverage Matrix

Accessible React team matrix mapping people to focus areas, real table semantics and a Tailwind hairline grid, with ink marks showing who covers and leads what.

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 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.

Coach Roster

Trainer cards with a coach's confidence, bold uppercase names over structural portrait panels, specialty chips, certifications as mono marks, and a book-your-intro CTA per card.

Frequently asked questions

How do I install the Team Hover Dossier 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-hover-dossier`. 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 Hover Dossier require?

Team Hover Dossier 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 Hover Dossier 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