Hero

Badge, headline, lede, command and actions.

Preview

Astro · Tailwind · shadcn/ui

Documentation sites that look like a product.

A design system with a light and a dark theme, and a scaffold that publishes to GitHub Pages.

npx docs-sitekit init

src/examples/hero/example.astro

---
import Hero from "@/presentation/components/site/hero.astro";
---

<Hero
  badge="Astro · Tailwind · shadcn/ui"
  title="Documentation sites that look like a product."
  lede="A design system with a light and a dark theme, and a scaffold that publishes to GitHub Pages."
  command="npx docs-sitekit init"
  primary={{ label: "Get started", href: "#" }}
  secondary={{ label: "Browse the components", href: "#" }}
/>

Add to your site

npx docs-sitekit add hero

It writes these files, and keeps a file you changed:

src/presentation/components/site/hero.astro

It requires these entries of the registry, which add restores first:

Props

Built from the TypeScript types and the TSDoc comments of the component, so they cannot drift from the code.

Props of hero
Key	Type	Default	Allowed values	Description
`badge`	string	-	-	A short status in a badge over the headline.
`title`	string	required	-	The headline, as the h1 of the page.
`lede`	string	required	-	A sentence under the headline.
`command`	string	-	-	A command to copy, in a CommandBox.
`primary`	{ label: string; href: string; }	required	-	The main action.
`secondary`	{ label: string; href: string; }	-	-	A second action, as an outline button.

Variants and states

Only what is required

A headline, a lede and one action. The badge, the command and the second action are optional.

A site from your repository.

The markdown you already have becomes pages.

Get started

src/examples/hero/minimal.astro

---
import Hero from "@/presentation/components/site/hero.astro";
---

<Hero
  title="A site from your repository."
  lede="The markdown you already have becomes pages."
  primary={{ label: "Get started", href: "#" }}
/>

About

The first screen of the home page: a badge, a headline, a lede, a command to copy and up to two actions. The copy button of the command hydrates when it scrolls into view, and nothing else in the component runs JavaScript.

Accessibility

The headline is the h1 of the page, so a page that uses Hero has no other h1.
The two actions are links styled by buttonVariants at the lg size, which is 40 px high.
The grid and the glow behind the text are aria-hidden, and they are outside the text, so they do not take part in the contrast of the text.
The command is a CommandBox, see its notes for the copy button.

Source

hero.astro

Edit this page

Last updated 5 November 2026