Marketing block

Team Grid

An about-page team section on initials avatars rather than photos, so shipping it never waits on headshots and there is no broken-image state to design.

166 lineslucide-reactAdded 13 Aug 2026

team
about
people
avatars
company

What's included

components/team-grid.tsx
Needs lucide-react

Works with

React
Next.js
Tailwind CSS
TypeScript

npx hoverlab add team-grid

Or over MCP, from your editor's agent — no account needed.

License

Free to read, copy and install, for personal and non-commercial projects. Shipping it in client work or a paid product needs Pro ($79 once). The source lands in your repo and stops being ours — no attribution, nothing to upgrade.

Was this useful?

Start a page with this section — add more, order them, and leave with the page source.

Preview

The people building it

A small team spread across four time zones, shipping every week since 2023.

Priya Raghavan
Co-founder & CEO
Previously led platform at a payments unicorn; still reviews PRs.
Marcus Okafor
Co-founder & CTO
Wrote the first commit in March 2023 and the incident runbook the week after.
Elena Sokolova
Head of Design
Believes every empty state deserves as much care as the dashboard.
Tom Whitfield
Staff Engineer
Owns the sync engine; measures success in p99s, not features.
Aisha Diallo
Product Manager
Turns forty support tickets a week into a roadmap the team believes in.
Daniel Kim
Developer Advocate
If you found us through a conference talk in 2026, it was probably his.

Rendered live in your current theme — this is the same component whose source is below, not a screenshot of it.

Source

components/team-grid.tsx

/**
 * <TeamGrid> — the about-page team section, without the photo shoot.
 *
 * Initials avatars instead of photos is the load-bearing decision. Photos
 * mean an asset pipeline, a cropping convention, a retina variant, and a
 * broken-image state for the person who joined last week — the grid looks
 * unfinished until everyone has sat for the same photographer. Initials
 * drawn from the design tokens are correct on day one, theme with the
 * page, and never 404. The palette varies by person but stays inside the
 * token system, so both themes hold without a single hex value.
 *
 * Social links are real anchors with accessible names — an icon-only link
 * with no label is a mystery button to a screen reader.
 */

import * as React from 'react'
import { Github, Linkedin, Twitter } from 'lucide-react'

export interface TeamMember {
  name: string
  role: string
  bio: string
  /** Overrides the initials derived from the name. */
  initials?: string
  twitter?: string
  linkedin?: string
  github?: string
}

export interface TeamGridProps {
  heading?: string
  intro?: string
  members?: TeamMember[]
  className?: string
}

/** Token/opacity combos only — no hex, so both themes stay coherent. */
const AVATAR_STYLES = [
  'bg-primary/15 text-primary',
  'bg-secondary text-secondary-foreground',
  'bg-muted text-foreground',
  'bg-primary/10 text-primary',
  'bg-accent text-accent-foreground',
  'bg-muted/60 text-muted-foreground',
]

const DEFAULT_MEMBERS: TeamMember[] = [
  {
    name: 'Priya Raghavan',
    role: 'Co-founder & CEO',
    bio: 'Previously led platform at a payments unicorn; still reviews PRs.',
    twitter: '#', linkedin: '#', github: '#',
  },
  {
    name: 'Marcus Okafor',
    role: 'Co-founder & CTO',
    bio: 'Wrote the first commit in March 2023 and the incident runbook the week after.',
    twitter: '#', github: '#',
  },
  {
    name: 'Elena Sokolova',
    role: 'Head of Design',
    bio: 'Believes every empty state deserves as much care as the dashboard.',
    twitter: '#', linkedin: '#',
  },
  {
    name: 'Tom Whitfield',
    role: 'Staff Engineer',
    bio: 'Owns the sync engine; measures success in p99s, not features.',
    github: '#', linkedin: '#',
  },
  {
    name: 'Aisha Diallo',
    role: 'Product Manager',
    bio: 'Turns forty support tickets a week into a roadmap the team believes in.',
    twitter: '#', linkedin: '#',
  },
  {
    name: 'Daniel Kim',
    role: 'Developer Advocate',
    bio: 'If you found us through a conference talk in 2026, it was probably his.',
    twitter: '#', github: '#', linkedin: '#',
  },
]

function initialsOf(name: string): string {
  const parts = name.trim().split(/\s+/)
  const first = parts[0]?.[0] ?? ''
  const last = parts.length > 1 ? parts[parts.length - 1][0] : ''
  return (first + last).toUpperCase()
}

export function TeamGrid({
  heading = 'The people building it',
  intro = 'A small team spread across four time zones, shipping every week since 2023.',
  members = DEFAULT_MEMBERS,
  className = '',
}: TeamGridProps) {
  return (
    <section className={`mx-auto w-full max-w-5xl px-6 py-16 ${className}`}>
      <h2 className="text-2xl font-bold tracking-tight sm:text-3xl">{heading}</h2>
      <p className="mt-2 max-w-2xl text-sm text-muted-foreground sm:text-base">{intro}</p>

      <ul className="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
        {members.map((member, index) => (
          <li
            key={member.name}
            className="flex min-w-0 flex-col rounded-2xl border border-border/60 bg-card/60 p-5 text-card-foreground"
          >
            <div className="flex items-center gap-3">
              <span
                aria-hidden
                className={`flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm font-bold ${
                  AVATAR_STYLES[index % AVATAR_STYLES.length]
                }`}
              >
                {member.initials ?? initialsOf(member.name)}
              </span>
              <div className="min-w-0 flex-1">
                {member.name ? (
                  <h3 data-stress-ignore className="break-words text-sm font-semibold">{member.name}</h3>
                ) : null}
                <p className="break-words text-xs text-muted-foreground">{member.role}</p>
              </div>
            </div>

            <p className="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">
              {member.bio}
            </p>

            <div className="mt-4 flex gap-1">
              {member.twitter ? (
                <a
                  href={member.twitter}
                  aria-label={`${member.name} on X`}
                  className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                >
                  <Twitter aria-hidden className="h-4 w-4" />
                </a>
              ) : null}
              {member.linkedin ? (
                <a
                  href={member.linkedin}
                  aria-label={`${member.name} on LinkedIn`}
                  className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                >
                  <Linkedin aria-hidden className="h-4 w-4" />
                </a>
              ) : null}
              {member.github ? (
                <a
                  href={member.github}
                  aria-label={`${member.name} on GitHub`}
                  className="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
                >
                  <Github aria-hidden className="h-4 w-4" />
                </a>
              ) : null}
            </div>
          </li>
        ))}
      </ul>
    </section>
  )
}

Before you paste

Styling is Tailwind utility classes on semantic tokens (bg-card, text-muted-foreground) — it inherits your theme instead of overriding it.
Install: npm i lucide-react
Every prop has a default, so it renders standalone before you wire it up.

Where it goes

Drop it at components/team-grid.tsx and import it where you need the section:

import { TeamGrid } from '@/components/team-grid'

Customize

2 of this block’s props are simple enough to drive from here. Change them and the block below re-renders — it is the same component whose source is above, not a mock of it. Everything else it accepts is in the table underneath.

Props

Read out of the component’s own type and signature, so this cannot drift from the source below. Every prop has a default — the component renders standalone before you pass it anything.

Prop	Type	Default
`heading`	`string`	`'The people building it'`
`intro`	`string`	`'A small team spread across four time zones, …`
`members`	`TeamMember[]`	`DEFAULT_MEMBERS`
`className`	`string`	`''`

Not using React?

The same block rendered once to markup, wrapped as a file your framework compiles. Tailwind classes are framework-agnostic, so the design transfers intact — the behaviour does not.

team-grid.html

<!--
  Team Grid — markup from the Hoverlab catalog.

  This is the block rendered once to HTML and wrapped as a component
  file. It is not a port of the React source: the Tailwind classes carry
  the design, which is the part that took the work, and they are the same
  in every framework.

  This block has no interactive behaviour, so nothing is missing.
-->
<section class="mx-auto w-full max-w-5xl px-6 py-16 ">
  <h2 class="text-2xl font-bold tracking-tight sm:text-3xl">The people building it</h2>
  <p class="mt-2 max-w-2xl text-sm text-muted-foreground sm:text-base">A small team spread across four time zones, shipping every week since 2023.</p>
  <ul class="mt-10 grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3">
    <li class="flex min-w-0 flex-col rounded-2xl border border-border/60 bg-card/60 p-5 text-card-foreground">
      <div class="flex items-center gap-3">
        <span aria-hidden="true" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm font-bold bg-primary/15 text-primary">PR</span>
        <div class="min-w-0 flex-1">
          <h3 data-stress-ignore="true" class="break-words text-sm font-semibold">Priya Raghavan</h3>
          <p class="break-words text-xs text-muted-foreground">Co-founder &amp; CEO</p>
        </div>
      </div>
      <p class="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">Previously led platform at a payments unicorn; still reviews PRs.</p>
      <div class="mt-4 flex gap-1">
        <a href="#" aria-label="Priya Raghavan on X" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter h-4 w-4" aria-hidden="true">
            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
          </svg>
        </a>
        <a href="#" aria-label="Priya Raghavan on LinkedIn" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-4 w-4" aria-hidden="true">
            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
            <rect width="4" height="12" x="2" y="9"></rect>
            <circle cx="4" cy="4" r="2"></circle>
          </svg>
        </a>
        <a href="#" aria-label="Priya Raghavan on GitHub" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github h-4 w-4" aria-hidden="true">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg>
        </a>
      </div>
    </li>
    <li class="flex min-w-0 flex-col rounded-2xl border border-border/60 bg-card/60 p-5 text-card-foreground">
      <div class="flex items-center gap-3">
        <span aria-hidden="true" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm font-bold bg-secondary text-secondary-foreground">MO</span>
        <div class="min-w-0 flex-1">
          <h3 data-stress-ignore="true" class="break-words text-sm font-semibold">Marcus Okafor</h3>
          <p class="break-words text-xs text-muted-foreground">Co-founder &amp; CTO</p>
        </div>
      </div>
      <p class="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">Wrote the first commit in March 2023 and the incident runbook the week after.</p>
      <div class="mt-4 flex gap-1">
        <a href="#" aria-label="Marcus Okafor on X" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter h-4 w-4" aria-hidden="true">
            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
          </svg>
        </a>
        <a href="#" aria-label="Marcus Okafor on GitHub" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github h-4 w-4" aria-hidden="true">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg>
        </a>
      </div>
    </li>
    <li class="flex min-w-0 flex-col rounded-2xl border border-border/60 bg-card/60 p-5 text-card-foreground">
      <div class="flex items-center gap-3">
        <span aria-hidden="true" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm font-bold bg-muted text-foreground">ES</span>
        <div class="min-w-0 flex-1">
          <h3 data-stress-ignore="true" class="break-words text-sm font-semibold">Elena Sokolova</h3>
          <p class="break-words text-xs text-muted-foreground">Head of Design</p>
        </div>
      </div>
      <p class="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">Believes every empty state deserves as much care as the dashboard.</p>
      <div class="mt-4 flex gap-1">
        <a href="#" aria-label="Elena Sokolova on X" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter h-4 w-4" aria-hidden="true">
            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
          </svg>
        </a>
        <a href="#" aria-label="Elena Sokolova on LinkedIn" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-4 w-4" aria-hidden="true">
            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
            <rect width="4" height="12" x="2" y="9"></rect>
            <circle cx="4" cy="4" r="2"></circle>
          </svg>
        </a>
      </div>
    </li>
    <li class="flex min-w-0 flex-col rounded-2xl border border-border/60 bg-card/60 p-5 text-card-foreground">
      <div class="flex items-center gap-3">
        <span aria-hidden="true" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm font-bold bg-primary/10 text-primary">TW</span>
        <div class="min-w-0 flex-1">
          <h3 data-stress-ignore="true" class="break-words text-sm font-semibold">Tom Whitfield</h3>
          <p class="break-words text-xs text-muted-foreground">Staff Engineer</p>
        </div>
      </div>
      <p class="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">Owns the sync engine; measures success in p99s, not features.</p>
      <div class="mt-4 flex gap-1">
        <a href="#" aria-label="Tom Whitfield on LinkedIn" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-4 w-4" aria-hidden="true">
            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
            <rect width="4" height="12" x="2" y="9"></rect>
            <circle cx="4" cy="4" r="2"></circle>
          </svg>
        </a>
        <a href="#" aria-label="Tom Whitfield on GitHub" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github h-4 w-4" aria-hidden="true">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg>
        </a>
      </div>
    </li>
    <li class="flex min-w-0 flex-col rounded-2xl border border-border/60 bg-card/60 p-5 text-card-foreground">
      <div class="flex items-center gap-3">
        <span aria-hidden="true" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm font-bold bg-accent text-accent-foreground">AD</span>
        <div class="min-w-0 flex-1">
          <h3 data-stress-ignore="true" class="break-words text-sm font-semibold">Aisha Diallo</h3>
          <p class="break-words text-xs text-muted-foreground">Product Manager</p>
        </div>
      </div>
      <p class="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">Turns forty support tickets a week into a roadmap the team believes in.</p>
      <div class="mt-4 flex gap-1">
        <a href="#" aria-label="Aisha Diallo on X" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter h-4 w-4" aria-hidden="true">
            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
          </svg>
        </a>
        <a href="#" aria-label="Aisha Diallo on LinkedIn" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-4 w-4" aria-hidden="true">
            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
            <rect width="4" height="12" x="2" y="9"></rect>
            <circle cx="4" cy="4" r="2"></circle>
          </svg>
        </a>
      </div>
    </li>
    <li class="flex min-w-0 flex-col rounded-2xl border border-border/60 bg-card/60 p-5 text-card-foreground">
      <div class="flex items-center gap-3">
        <span aria-hidden="true" class="flex h-12 w-12 shrink-0 items-center justify-center rounded-full text-sm font-bold bg-muted/60 text-muted-foreground">DK</span>
        <div class="min-w-0 flex-1">
          <h3 data-stress-ignore="true" class="break-words text-sm font-semibold">Daniel Kim</h3>
          <p class="break-words text-xs text-muted-foreground">Developer Advocate</p>
        </div>
      </div>
      <p class="mt-3 flex-1 text-sm leading-relaxed text-muted-foreground">If you found us through a conference talk in 2026, it was probably his.</p>
      <div class="mt-4 flex gap-1">
        <a href="#" aria-label="Daniel Kim on X" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-twitter h-4 w-4" aria-hidden="true">
            <path d="M22 4s-.7 2.1-2 3.4c1.6 10-9.4 17.3-18 11.6 2.2.1 4.4-.6 6-2C3 15.5.5 9.6 3 5c2.2 2.6 5.6 4.1 9 4-.9-4.2 4-6.6 7-3.8 1.1 0 3-1.2 3-1.2z"></path>
          </svg>
        </a>
        <a href="#" aria-label="Daniel Kim on LinkedIn" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-linkedin h-4 w-4" aria-hidden="true">
            <path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-2-2 2 2 0 0 0-2 2v7h-4v-7a6 6 0 0 1 6-6z"></path>
            <rect width="4" height="12" x="2" y="9"></rect>
            <circle cx="4" cy="4" r="2"></circle>
          </svg>
        </a>
        <a href="#" aria-label="Daniel Kim on GitHub" class="rounded-lg p-1.5 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground">
          <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-github h-4 w-4" aria-hidden="true">
            <path d="M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4"></path>
            <path d="M9 18c-4.51 2-5-2-7-2"></path>
          </svg>
        </a>
      </div>
    </li>
  </ul>
</section>

This is rendered HTML, not a translation of the React source. The Tailwind classes carry the design and work in any framework.
It is one frame: the component in its initial state, with no props applied beyond the defaults.
Requires Tailwind, and the design tokens the classes reference (bg-card, text-muted-foreground, and so on). The template ZIPs ship a globals.css that defines them.

What each framework gets across the whole catalog — effects convert properly; this rung is markup.

For AI

The component, its props, the design tokens it expects and the command that installs it — as one prompt. Paste it into Claude, Cursor, v0 or ChatGPT and what they build around it will match the rest of the catalog instead of inventing its own system.

See the prompt

Used in these pages

Want the whole screen instead of this one section? Open a page and copy it entire.

11 more blocks in Content & Blog

All of them free to read, copy and install — no account, no locked tiles, no watermarked preview. The whole catalog is open, and so are the API and the CLI.

Browse Content & Blog

Shipping one commercially

Copying the code is free. Putting it in client work or a paid product is what Pro is for — the licence, not the access.

A commercial licence for everything in the catalog
Unlimited bundle exports, in Vue, Svelte and Tailwind
One payment — no subscription, nothing to renew

Pro — $79 once

What shipped recently

Every release, in plain language.

Dashboard blocks
v2.4.0Jul 14, 2026
- addedTwelve dashboard and data-table sections
- addedKeyboard navigation across every table block
- changedSidebar collapses below 1024px instead of 768px
Accessibility pass
v2.3.1Jun 2, 2026
- fixedFocus ring clipped inside overflow containers
- fixedMarquee ignored prefers-reduced-motion
Theming
v2.3.0May 19, 2026
- addedToken generator with contrast validation
- changedAll blocks now read semantic colour tokens

Release Timeline

A dated changelog on a vertical rail with added/changed/fixed tags and machine-readable <time> values.

Content & Blog145 linesNo deps13 Sept

Roadmap

What is done, what is being built, and what is next.

Shipped

Marketing sections
Heroes, pricing, FAQ, footers.
Dark mode tokens
Every block reads semantic colours.

In progress

Dashboard blocksQ3 2026
Shells, tables, settings.
CLI installQ3 2026
Add a block straight to your repo.

Planned

Full page layoutsQ4 2026
Composed screens, not sections.
Starter templatesQ4 2026
Multi-page projects, ready to deploy.
Vue and Svelte ports2027

Public Roadmap Columns

Shipped / in progress / planned in three columns, with status carried by icon as well as colour.

Content & Blog122 lines1 dep2 Sept

From the blog

Engineering

How we run incident reviews nobody dreads

Blameless is easy to say and hard to schedule. The template, the timebox, and the one question we ask before anyone opens a dashboard.

Priya RamanJul 8, 20269 min read

Blog Index Grid

A featured post at full width above a card grid, with drawn covers built from tokens — a blog index with no image pipeline and no broken-thumbnail state.

Content & Blog188 lines1 dep

What changed for them

Three teams, three different problems, one number each that a colleague can check.

Case Study Card Grid

A grid of case-study cards that lead with the metric rather than the company name, each one linking out to the full write-up — the block a customer-stories section or a home page needed and only had a full case-study page for.

Content & Blog136 lines1 dep

Engineering

The day we deleted 40,000 lines of feature flags

Flags are borrowed complexity — this is what it cost to pay ours back, and the two rules that keep the debt from growing again.

Priya Raman

Staff Engineer · July 21, 2026 · 12 min read

The pull request was titled “remove stale flags, part 1 of 8” and it deleted more code than the previous quarter had added. Our flag service listed 312 active flags; production telemetry showed 41 of them had evaluated to the same value for every user since at least January. The rest were split roughly evenly between experiments nobody remembered starting and kill switches for services we had already decommissioned.

“A feature flag is a loan. The interest is every engineer who has to reason about both branches forever.”

Article Header & Byline

Kicker, headline, standfirst, byline and share row, with the opening prose and a pull quote included — the type scale of a post, decided once instead of per-article.

Content & Blog171 lines1 dep2 Sept

Open roles

We’re hiring across three teams. Every role lists the real salary range — no “competitive”.

Engineering3 openings

Design2 openings

Go-to-market2 openings

Nothing that fits? We read every speculative application — jobs@hoverlab.dev.

Careers Openings Board

Openings grouped by department with location, type and salary on every row — candidates self-select by craft first, and a flat list makes them scan for it.

Content & Blog186 lines1 dep10 Sept

Docs navigation

Authentication

Every request to the Acme API is authenticated with a bearer token. This page covers creating a key, storing it safely, and rotating it without downtime.

Acme issues two kinds of keys. Secret keys (prefixed sk_live_) can read and write everything in your project and must only ever live on a server. Publishable keys (prefixed pk_live_) are safe to ship in a browser bundle and can only create client sessions.

Keys are scoped to a project, not to your account. Deleting a project revokes its keys immediately; removing a teammate does not, so treat offboarding as a reason to rotate.

Creating an API key

Create a key from the dashboard under Settings → API keys, then pass it as a bearer token on every request:

curl https://api.acme.dev/v1/projects \
  -H "Authorization: Bearer $ACME_API_KEY"

Note: the full secret is shown once, at creation. Acme stores only a hash, so a lost key cannot be recovered — it can only be rotated.

Rotating keys

Rotation is overlap, not replacement: create the new key, deploy it everywhere, and only then revoke the old one. Both keys stay valid during the window, so a slow rollout never turns into an outage.

Three-Column Docs Frame

Sidebar, article and on-this-page rail — each column answers a different question, and they collapse on mobile in the order that keeps the article alive.

Content & Blog290 lines1 dep13 Sept

GET/v1/projects/{project_id}/deployments

List the deployments for a project, newest first.

Parameters

Name	Type	Required	Description
project_id	string	Required	The project to list deployments for. Passed in the path.
status	string	Optional	Filter by state: building, ready or failed.
limit	integer	Optional	Page size, 1–100. Defaults to 20.
cursor	string	Optional	Opaque cursor from a previous page’s next_cursor.

Request

curl "https://api.acme.dev/v1/projects/prj_8kq2/deployments?limit=2" \
  -H "Authorization: Bearer $ACME_API_KEY"

Response200 OK

{
  "data": [
    {
      "id": "dep_9f2c1a",
      "status": "ready",
      "branch": "main",
      "created_at": "2026-08-12T09:41:00Z"
    },
    {
      "id": "dep_8e1b0d",
      "status": "failed",
      "branch": "fix/session-ttl",
      "created_at": "2026-08-11T17:03:12Z"
    }
  ],
  "next_cursor": "dep_7d0a9c"
}

API Endpoint Reference

Method badge, path, parameter table and a request/response pair kept side by side — an example request whose response is a scroll away gets pasted blind.

Content & Blog237 lines1 dep2 Sept

Package Manager Code Tabs

One install command behind npm/pnpm/yarn/bun tabs with a working copy button — every reader uses exactly one package manager, so showing all four wastes three lines.

Content & Blog152 lines1 dep11 Sept

Aisling Moreau

Principal engineer — platform, performance and the unglamorous parts

Print or save as PDF

Ten years building systems that other engineers depend on, mostly by removing things. I am at my best on a team that has outgrown its first architecture and has to keep shipping while it changes. Looking for a principal or staff role where the hard problem is technical rather than political.

Experience

Principal Engineer, Platform · Northwind
Mar 2023 — Present · Remote
Series B logistics platform, 40 engineers, one Rails monolith and four Go services.
- Cut p95 checkout latency from 2.4s to 610ms by deleting a caching layer rather than adding one — the invalidation cost more than the reads saved.
- Led the migration off a managed search product onto Postgres full-text, against a hard contract-expiry date. Saved $310k a year with no change to result quality anyone could measure.
- Wrote the on-call handbook and cut pages per engineer per week from 11 to 2, mostly by deleting alerts nobody had ever acted on.
Senior Software Engineer · Contoso Health
Jun 2019 — Feb 2023 · Dublin
Patient records for 60 clinics. Regulated, audited, and slow to change by design.
- Rebuilt the appointment booking flow to meet WCAG 2.1 AA before the deadline the procurement contract set. It passed audit first time, which nothing else that year did.
- Introduced contract tests between the scheduling service and three consumers, ending a class of release that broke a downstream team every quarter.
Software Engineer · Umbra Labs
Sep 2016 — May 2019 · Dublin
- Second engineer. Built the billing integration that the company ran on unchanged for six years.

Skills

TypeScript · Go · Postgres · React · Next.js · Terraform · OpenTelemetry · WCAG 2.2 AA · Incident command

Education

BA (Mod) Computer Science — Trinity College Dublin — First Class Honours2012 — 2016

Selected writing and talks

“The cache we deleted” — SRECon EMEA, main track2025
“Accessibility as a procurement requirement” — Write the Docs2024

Résumé Document

A CV as a document rather than a timeline of cards — one column, dates on the end edge, and a print layer that puts it on paper without a separate PDF to keep in step.

Content & Blog347 lines1 dep

Episode 3

4:18 / 12:04

Profiling, end to end

Where the time actually goes

48,219 views · Episode 3 of 7 · Published 4 March

We take a page that feels slow and find out what is actually slow about it — with a profiler open the whole time, and no guessing. The fix at the end is two lines; finding it is the other eleven minutes.

Video Player Shell

The watch screen with no playback in it: a ratio-locked stage, a control bar drawn down to the buffered layer, and an up-next rail. Drop a video element in and wire your own player.

Content & Blog327 lines1 dep

What's included

Works with

License

Preview

The people building it

Priya Raghavan

Marcus Okafor

Elena Sokolova

Tom Whitfield

Aisha Diallo

Daniel Kim