# Hero

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

- Name: `hero`
- Status: beta
- Categories: hero, header, marketing
- Files: the install writes `hero.tsx`, and any part files named `hero-*.tsx`, to your `components` alias, `@/components` by default. Edit them freely. They are yours.
- Gallery: https://arbokui.com/website/hero
- Registry item: https://arbokui.com/r/hero.json

## Install

1. Add the registry to `components.json`. Do this first, once:

   ```bash
   npx shadcn@latest registry add "@arbokui=https://arbokui.com/r/{name}.json"
   ```

   The command writes this entry. You can also add it by hand:

   ```json
   {
     "registries": {
       "@arbokui": "https://arbokui.com/r/{name}.json"
     }
   }
   ```

   Without this step, the shadcn CLI looks up `@arbokui` in a public list that Arbokui does not control.

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

   ```bash
   npx shadcn@latest add @arbokui/theme
   ```

3. Add the website component. It also adds every component it uses:

   ```bash
   npx shadcn@latest add @arbokui/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`: `ReactNode`. The page's one big claim, as the h1. 36 to 48px, growing with the hero's width.
- `accent`: `ReactNode`. The end of the claim, in the brand color, on the same line.
- `description`: `ReactNode`. The lead, in a sentence or three. It sits to the right on wide screens.
- `note`: `ReactNode`. A small line under the lead, like a log in link.
- `actions`: `ReactNode`. The call to action. It sits at the end of the lead, aligned right.
- `logos`: `ReactNode`. Customer logos under the claim, shown in gray. Give each one alt text.
- `logosLabel`: `string`. Default `"Trusted by"`. The small label over the logos.
- `preview`: `ReactNode`. A product preview under the text, on drawn art. Usually a HeroWindow.
- `art`: `ReactNode`. Default `a brand-colored pattern`. Your own art behind the preview, like an \<img> that fills the frame.
- `className`: `string`. Extra classes on the section, which holds the container query.
- `HeroWindow`: `{ title: ReactNode; subtitle?: ReactNode; icon?: ReactNode; badge?: ReactNode } & ComponentProps<"div">`. 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.

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

```tsx
<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

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