Hero

The welcome banner at the top of a home screen, with a greeting, one paragraph and the first actions. Use it once per page.

Hero

PreviewLink to the section Preview

Live in all three themes. Everything here is interactive.

Light theme, Hero

Monday, 9 November

Good morning. Your agents are ready.

One window for every coding agent: tasks from your trackers, skills, pipelines and commits in the style of the project.

2 agents ready

Dark theme, Hero

Monday, 9 November

Good morning. Your agents are ready.

One window for every coding agent: tasks from your trackers, skills, pipelines and commits in the style of the project.

2 agents ready

High contrast theme, Hero

Monday, 9 November

Good morning. Your agents are ready.

One window for every coding agent: tasks from your trackers, skills, pipelines and commits in the style of the project.

2 agents ready

UsageLink to the section Usage

tsx

import { Hero } from '@skribly/ui/surfaces'

tsx

<Hero
  eyebrow="Monday, 9 November"
  title="Good morning. Your agents are ready."
  lead="One window for every coding agent."
  actions={<Button>Start an agent</Button>}
  aside={<AgentChip … />}
/>

Every label is a prop, so the app passes its own words in its own language. See no built-in text.

AccessibilityLink to the section Accessibility

A region named by its heading, which is an h1 unless level says otherwise.
The art is hidden from screen readers and dropped on narrow containers so the text keeps the width.
Actions and the aside wrap; the lead keeps a readable line length.

This demo runs through axe in all three themes on every test run. See what the tests check.