Hero flow field
BlockA developer hero over a flowing current — headline, an install command to copy, two actions and a row of figures.
- Heroes
- 3 components
- 1 file
Loading the example…
pnpm dlx @dowel-ui/cli add hero-flow-fieldimport { HeroFlowFieldBlock } from "@/components/blocks/hero-flow-field"; export default function Page() { return <HeroFlowFieldBlock />;}<HeroFlowFieldBlock>
| Prop | Type | Default |
|---|---|---|
commandA command to copy, e.g. an install line. | string | null | "npx dowel add button" |
description | string | "Install accessible components as code you own. Every one is themed, keyboard-ready and tested before it reaches your repository." |
eyebrowA short line above the headline. | string | null | "Source-first React components" |
flowColorStreak colour: a token or any CSS colour. Default "primary". | string | "primary" |
headingLevelThe headline's level, so the block fits any page outline. | 1 | 2 | 3 | 4 | 5 | 6 | 1 |
primaryActionThe main call to action. | HeroFlowFieldAction | null | { label: "Read the docs", href: "#" } |
secondaryActionThe quieter call to action. | HeroFlowFieldAction | null | { label: "View on GitHub", href: "#" } |
statsFigures under the copy. An empty list hides the row. | HeroFlowFieldStat[] | DEFAULT_STATS |
titleThe headline. | string | "Ship the interface, not the boilerplate" |
Plus every attribute of <section> except title.
One section landmark named by its headline, whose level is a prop. The current is aria-hidden decoration on a canvas that pauses off-screen and holds still under reduced motion. The command is real text in <code> with a named copy button that announces the copy. The figures are a description list, so each number is read with what it counts.