Stats Bento
Bento & Grids
Source and install need .
pnpm dlx shadcn@latest add @assembli/feature-bentoFeature Bento
A landing-page features section of five bento cards, each a small working picture of its feature: a deploy log that builds and ships branches, a traffic chart that draws in, a search box that types queries, live cursors over a comment, and a 30-day uptime strip. Animations start in view and stop under reduced motion.
Props
Other props pass through to the root element.
eyebrow
React.ReactNode
Default
"Platform"heading
React.ReactNode
Default
"Everything you need to ship"subheading
React.ReactNode
Default
"From the first push to the millionth visitor, without stit…cards
[FeatureBentoCopy, FeatureBentoCopy, FeatureBentoCopy, FeatureBentoCopy, Featur…
Default
DEFAULT_CARDSCopy for the five cards, in order: deploys, analytics, search, collaboration, uptime.
branches
string[]
Default
["feat/checkout", "fix/nav-focus", "chore/deps", "feat/sear…Branch names the deploy log cycles through.
queries
string[]
Default
["deploy failed", "env vars", "domains"]Words the search card types, one after another.
| Prop | Type | Default | Description |
|---|---|---|---|
| eyebrow | React.ReactNode | "Platform" | |
| heading | React.ReactNode | "Everything you need to ship" | |
| subheading | React.ReactNode | "From the first push to the millionth visitor, without stit… | |
| cards | [FeatureBentoCopy, FeatureBentoCopy, FeatureBentoCopy, FeatureBentoCopy, Featur… | DEFAULT_CARDS | Copy for the five cards, in order: deploys, analytics, search, collaboration, uptime. |
| branches | string[] | ["feat/checkout", "fix/nav-focus", "chore/deps", "feat/sear… | Branch names the deploy log cycles through. |
| queries | string[] | ["deploy failed", "env vars", "domains"] | Words the search card types, one after another. |
Related
Block
Bento Features
Bento & Grids
Marigold — AI Automation SaaS Landing Page
Landing pages · AI products
Plenum — Indoor Air Quality Landing Page
Landing pages · SaaS