Split hero

The promise and three reasons beside the product itself: a live dashboard in a browser frame.

$ pnpm dlx shadcn@latest add @dashral/hero-split

When to use

The promise and three reasons beside the product itself, a live dashboard in a browser frame.
SaaS home pages where seeing the product sells it.

When not to use

Products without a screen worth showing yet: Centered hero.
Pitches made in results: Stats hero.

Usage

Split hero with your own data: every prop has the sample as its default, so pass only what you have.

example.tsx

1import { HeroSplit } from "@/components/dashral/blocks/hero-split"
2
3<HeroSplit
4  title="Know your numbers before Monday"
5  points={reasons}
6  primary={{ label: "Start free", href: "/register" }}
7  periods={sampleMetrics}
8  currency="EUR"
9/>

API reference

HeroSplit

A split hero: the promise, three reasons and the actions on one side; on the other, the product itself — a small live dashboard in a browser frame, where switching the period moves every number. Stacks on phones. Every part comes from props, the preview's numbers too.

Prop	Type	Default
`eyebrow`	`React.ReactNode`	`sample`
`title`	`React.ReactNode`	`sample`
`description`	`React.ReactNode`	`sample`
`points`	`string[]`	`sample`
`primary`	`BlockAction`	`sample`
`secondary`	`BlockAction \| null` The second button; null hides it.	`sample`
`address`	`string` The preview's address bar.	`"app.acme.com/overview"`
`periods`	`HeroPeriod[]`	`sample`
`defaultPeriod`	`string`	`"month"`
`currency`	`string`	`"USD"`

type BlockAction

A button: a link with href, or your handler with onClick.

Prop	Type	Default
`label`	`string`	—
`href`	`string`	—
`onClick`	`() => void`	—

type HeroPeriod

One period the preview can switch to: its figures, their trends and the top pages.

Prop	Type	Default
`value`	`string`	—
`label`	`string`	—
`revenue`	`number`	—
`revenueChange`	`number`	—
`users`	`number`	—
`usersChange`	`number`	—
`trend`	`number[]`	—
`usersTrend`	`number[]`	—
`pages`	`{ label: string; value: number }[]`	—