Author Bio Card

Installation

pnpm dlx shadcn@latest add @cleverui/author-bio-card

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

Usage

tsx

import { AuthorBioCard } from '@/components/blocks/author-bio-card'

Exampletsx

import { AuthorBioCard } from '@/components/blocks/author-bio-card'

export default function AuthorBioCardDemo() {
  return (
    <div className="mx-auto w-full">
      <AuthorBioCard
        name="Mara Chen"
        jobTitle="Head of Platform"
        bio="Mara leads the platform group at Meridian Ops, where she rebuilt the incident board around progressive disclosure. She previously shipped observability for multi-region control planes and writes about calm tools for night rotations."
        links={[
          { label: 'meridianops.dev', href: '#site' },
          { label: 'Newsletter', href: '#newsletter' },
          { label: 'Notes archive', href: '#archive' },
        ]}
        moreArticles={[
          {
            title: 'Why we killed the status page carousel',
            href: '#carousel',
            dateLabel: '28 Jun 2026',
          },
          {
            title: 'Mute windows that still leave a paper trail',
            href: '#mute',
            dateLabel: '9 May 2026',
          },
          {
            title: 'Ship notes: the ledger view in Fieldkit 2.4',
            href: '#fieldkit',
            dateLabel: '12 Apr 2026',
          },
        ]}
      />
    </div>
  )
}

API reference

AuthorBioCard accepts the following props.

Prop	Type	Default	Description
`name`*	`string`	–	author name, e.g. 'Mara Chen'
`jobTitle`	`string`	–	e.g. 'Head of Platform', set beside the name in mono
`bio`*	`string`	–	two-to-three sentence bio in plain prose
`eyebrow`	`string`	`'Written by'`	mono micro-label opening the block
`links`	`AuthorBioLink[]`	–	quiet text anchors, site, newsletter, social, never an icon row
`moreArticles`	`AuthorBioArticle[]`	–	'More from' reading list; dateLabel is preformatted
`as`	`'h2' \| 'h3'`	`'h2'`	heading element for the author name

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

Referenced types

Typestsx

export interface AuthorBioLink {
  label: string
  href: string
}

export interface AuthorBioArticle {
  title: string
  href: string
  /** PREFORMATTED string, e.g. '12 Jul 2026', never built from Date in render */
  dateLabel: string
}

Related components

Article Header

The opening block of a post, category eyebrow, display title, standfirst, and a byline row with preformatted date and read time, closed by a hairline rule that draws itself.

Article Card Grid

Editorial article cards, mono kicker with category and read time, display titles, a dek line, and initials-avatar bylines. The featured story spans wide inside a hairline frame.

Article TOC Rail

Sticky table-of-contents rail for React articles, mono indices, a hairline spine, and a primary tick that slides to the active heading via built-in scroll-spy. Tailwind tokens throughout.

Prev Next Articles

End-of-article pagination, two hairline panels with mono direction labels and display titles, hairlines extending on hover. A lone neighbour panel spans the full width.

Pull Quote Break

An in-article pause, an oversized pull quote set against a primary quote-bar keyline, attribution in mono, and generous whitespace on both sides. Typography does all the work.

Hover Index Card

Editorial cards fronted by a giant mono index numeral that fills from outline to solid ink on hover or focus, a zero-movement hover language built on clip-path, solid by default on touch.

Frequently asked questions

How do I install the Author Bio Card component?

Register the @cleverui registry in your components.json ("@cleverui": "https://cleverops.com.au/r/{name}.json"), then run `npx shadcn@latest add @cleverui/author-bio-card`. 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 Author Bio Card require?

Author Bio Card 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 Author Bio Card 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