Stats Bento
Bento & Grids
Source and install need .
pnpm dlx shadcn@latest add @assembli/stats-sectionStats Section
"By the numbers" marketing section: heading and intro over a hairline grid of large figures that count up in a staggered wave when the row scrolls into view. Each figure can carry a prefix or unit, a short description, a before/after bar that fills beside a muted baseline, and a footnote that links to its source under the grid. Server and reduced-motion views show final values.
- Dependencies
- motion(npm, opens in a new tab)
Props
Other props pass through to the root element.
eyebrow
React.ReactNode
Default
"By the numbers"title
React.ReactNode
Default
"The results speak for themselves"intro
React.ReactNode
stats*
StatsSectionStat[]
accent
string
The accent color for compare bars, as any CSS color. Defaults to the primary token.
| Description | |||
|---|---|---|---|
| eyebrow | React.ReactNode | "By the numbers" | |
| title | React.ReactNode | "The results speak for themselves" | |
| intro | React.ReactNode | – | |
| stats* | StatsSectionStat[] | – | |
| accent | string | – | The accent color for compare bars, as any CSS color. Defaults to the primary token. |
