The Hero block is a complete landing page opening: eyebrow, headline, description, two calls to action and a row of faces for social proof, over a field of falling meteors. Installing it installs the three components it is built from.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/hero.jsonEverything Hero accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| title (required) | React.ReactNode | No default | The headline. Takes nodes, so part of it can be styled or animated |
| eyebrow | string | No default | Small line above the headline, such as a release note |
| description | string | No default | Supporting line under the headline |
| primaryAction | { label: string; href: string } | No default | The main call to action, rendered as a Shimmer Button |
| secondaryAction | { label: string; href: string } | No default | A quieter second action beside the first |
| avatars | AvatarStackItem[] | No default | Faces for the social proof row. Omit it and the row is not rendered |
| proof | string | No default | The line beside those faces, e.g. 'Joined by 2,400 teams' |
| showMeteors | boolean | true | Streaks behind the content. Set false for a plain surface |
| className | string | '' | Additional CSS classes for styling |
Required.
Now with 40 components
Install one block and it brings every component it uses along with it.