Product heroPro

A headline whose ending changes, above an app window that tours itself: numbers count up, live events stream in, a summary writes itself. Pauses under the pointer.

When to use

A headline whose ending changes above an app window that tours itself: numbers, events and views.
Flagship launches and home pages that want the product to demo itself.

When not to use

Products without real screens yet: the tour would show made-up ones; Centered hero.
Pages people come to read and act on quickly, like docs or pricing: a still hero keeps the eye on the words.

Usage

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

example.tsx

1import { HeroProduct } from "@/components/dashral/blocks/hero-product"
2
3<HeroProduct
4  title="One place for"
5  endings={["every metric", "every team", "every customer"]}
6  brand="Acme"
7  data={productData}
8  cta={{ label: "Start free", href: "/register" }}
9/>

API reference

HeroProduct

A hero that shows the product working: the promise and actions above a full app window that tours itself — Overview (numbers count up, the chart draws, orders arrive), Live (visitors tick, events stream in) and Reports (channels and a summary that writes itself). Each tab's bar fills while it's on; it pauses while the pointer is over the window, and a click picks a view. News pops up beside it now and then. With reduced motion, nothing moves on its own. Every part comes from props: your words and links, the sample screens' data, or views with screens of your own.

Prop	Type	Default
`announcement`	`{ label: string; text: string; href: string } \| null` The pill above the headline; null hides it.	`sample`
`title`	`string` The headline: these words, then each of `endings` in turn on a line of its own.	`sample`
`endings`	`string[]`	`sample`
`description`	`React.ReactNode`	`sample`
`cta`	`{ label: string; href: string }`	`sample`
`secondary`	`{ label: string; href?: string; onClick?: () => void } \| null` The second button; null hides it.	`sample`
`rating`	`{ score: number; label: string } \| null`	`sample`
`brand`	`string` Your name and app's host, in the window.	`"Acme"`
`host`	`string`	`"app.acme.com"`
`views`	`HeroView[]`	`sample`
`data`	`HeroData`	`sample`
`toasts`	`{ icon: LucideIcon; title: string; detail: string; tone: string }[]` The news popping up beside the window; none hides it.	`sample`
`dwell`	`number` How long each view stays before the next, in ms.	`6000`

type HeroView

A view in the window's tour: its tab, its address, and its screen (the sample screens play the data without one).

Prop	Type	Default
`id`	`string`	—
`label`	`string`	—
`icon`	`LucideIcon`	—
`path`	`string`	—
`screen`	`React.ReactNode`	—

type HeroKpi

Prop	Type	Default
`label`	`string`	—
`value`	`number`	—
`prefix`	`string`	—
`suffix`	`string`	—
`trend`	`string`	—

type HeroHappening

Prop	Type	Default
`icon`	`LucideIcon`	—
`text`	`string`	—
`tone`	`string`	—

type HeroData

What the sample screens show: Overview, Live and Reports.

Prop	Type	Default
`kpis`	`HeroKpi[]`	—
`revenue`	`number[]`	—
`orders`	`{ name: string; item: string; amount: string }[]`	—
`happenings`	`HeroHappening[]` Live: events that stream in, one after another.	—
`channels`	`{ key: string; label: string; value: number }[]`	—
`summary`	`string`	—