Marketing sectionPro

Live features

shadcn add @detent-pro/live-features

detentui.com

Wire it up

All optional. With none, it plays exactly as it does here and hands over to whoever touches it.

Usage

<FeatureBento
  features={features}
  product={product}
  eyebrow={eyebrow}
/>

Your data

PropDescriptionDefault

features

The words on the five tiles, in order. The live part of each tile stays as it is.

{ title: string; line: string }[]

Default—

product

The product’s name, in the eyebrow, the heading’s sentence and the tiles.

string

Default'Detent'

eyebrow

The small accent line above the heading.

string

Default'Why Detent'

title

The heading: the claim, then its turn, set in two tones.

[string, string]

Default—

subline

One sentence beside the heading, or under it on narrow screens.

string

Default—

Every block also takes accent, the one colour everything in it derives from; autoplay, which plays the demo until someone touches it; and className.

Wire it up

More in Marketing sections