Skip to content
txbrendan/ui

Hero

beta

The top of a landing page: a big claim, a lead with a call to action, customer logos, and a framed product preview.

Preview

The app your team is missing.

Used by teams at

StudioClinicLibraryAgency

One app the whole team is in. Leads and members each get their own dashboard: who's coming, the plan, the calendar, and how each goal is going. Take the tour.

Now taking early access requests. Already a customer? Log in.

WorkspaceReports · Tasks doneOverview

Tasks done · Design team · This quarter

  • Tom H.48 tasks
  • Ben O.41 tasks
  • Sam D.36 tasks
  • Ravi P.30 tasks
  • Joris V.24 tasks

Sample data · Not customer data

text only, no preview

Ship the page, not the plumbing.

Every section is a part you own.

narrow container

The app your team is missing.

One app the whole team is in.

WorkspaceReports · Tasks doneOverview

Tasks done · Design team · This quarter

  • Tom H.48 tasks
  • Ben O.41 tasks
  • Sam D.36 tasks
  • Ravi P.30 tasks
  • Joris V.24 tasks

Sample data · Not customer data

Install

  1. 1. Add the registry to components.json, once per app. Without it, the shadcn CLI looks up @txbrendan in a public list that txbrendan/ui does not control.

    npx shadcn@latest registry add "@txbrendan=https://txbrendan.dev/r/{name}.json"

  2. 2. Add the theme, once per app. It replaces your color tokens with ones checked for contrast.

    npx shadcn@latest add @txbrendan/theme

  3. 3. Add the website component. It also adds every component it uses. Its own files go in your components folder, and they are yours to edit.

    npx shadcn@latest add @txbrendan/hero

Use it for

  • The first section of a landing page, right under the Navbar.
  • Split the claim: the setup in `title`, the payoff in `accent`, which draws in the brand color.
  • Put one main call to action in `actions`, like a brand Button. Add a quiet second one at most.
  • Show the product in `preview` with HeroWindow, and build the screen inside it from real parts.
  • Leave `art` off to get the drawn pattern. Pass your own image there only if it is yours to use.
  • The headline is set in the theme's `font-headline`. Load Geist Serif as `--font-geist-serif`, like `geist/font/serif/variable` in Next.js, or it falls back to the system serif.

Avoid it for

  • More than one Hero on a page. It renders the page's h1.
  • A screenshot as the preview. Build it from parts, so it stays sharp and follows the theme.
  • A headline for a lower section. Use Headline.

Props

  • title

    The page's one big claim, as the h1. 36 to 48px, growing with the hero's width.

    ReactNode

  • accent

    The end of the claim, in the brand color, on the same line.

    ReactNode

  • description

    The lead, in a sentence or three. It sits to the right on wide screens.

    ReactNode

  • note

    A small line under the lead, like a log in link.

    ReactNode

  • actions

    The call to action. It sits at the end of the lead, aligned right.

    ReactNode

  • logos

    Customer logos under the claim, shown in gray. Give each one alt text.

    ReactNode

  • logosLabel

    The small label over the logos.

    string · default "Trusted by"

  • preview

    A product preview under the text, on drawn art. Usually a HeroWindow.

    ReactNode

  • art

    Your own art behind the preview, like an <img> that fills the frame.

    ReactNode · default a brand-colored pattern

  • className

    Extra classes on the section, which holds the container query.

    string

  • HeroWindow

    Part. A framed app window for the preview: a top bar with the app's name, a dark badge, and your mock screen as children.

    { title: ReactNode; subtitle?: ReactNode; icon?: ReactNode; badge?: ReactNode } & ComponentProps<"div">

Accessibility

  • The title is the page's h1, and the accent is inside it, so screen readers hear one sentence.
  • The accent is large text in the brand fill color. The theme checks that fill at 3:1 on the page, which is the WCAG level for large text.
  • The drawn art is aria-hidden. If you pass your own `art`, give it empty alt text, since it is decoration.
  • Logos are shown in gray. Give each one alt text with the customer's name.
  • A HeroWindow is a picture of the product. Keep its mock screen free of real buttons, or label them as a preview.
  • In forced colors the preview panel gets a border, so its edge still shows when its fill is painted away.

Examples

A landing page hero

<Hero
  title="The app your team"
  accent="is missing."
  description="One app the whole team is in."
  actions={<Button tone="brand" size="lg">Get early access</Button>}
  preview={
    <HeroWindow title="Workspace" subtitle="Reports" badge="Overview">
      <StatsCards items={[{ label: "Active", value: "1,204" }]} />
    </HeroWindow>
  }
/>

Text only

<Hero title="Ship the page," accent="not the plumbing." description="Every section is a part you own." />