Center Aligned (default)
Now in Public Beta
Ship faster with tools that just work
The modern platform for building, deploying, and scaling your applications.
Left Aligned
Build something great
Start with a solid foundation and scale as you grow.
Minimal
Welcome
Props
| Prop | Type | Description |
|---|---|---|
| badge | ReactNode | Small element above the title (e.g. a badge) |
| title | ReactNode | Main headline |
| subtitle | ReactNode | Supporting text below the title |
| actions | ReactNode | Action buttons |
| children | ReactNode | Additional content below actions |
| align | "left" | "center" | Text alignment (default center) |
| className | string | Additional classes on the root element |
Usage
<Hero
badge={<Badge>New</Badge>}
title="Ship faster"
subtitle="The modern platform."
align="center"
actions={
<>
<Button>Start Free Trial</Button>
<Button variant="outline">Learn More</Button>
</>
}
/>