Atelier UI

Search components…

Search components…

Feature Bento

Asymmetric bento grid for showcasing product features.

Edit in sandbox

Copy a prompt for your AI coding tool with the source, dependencies and usage

Props

FeatureBentoProps

Also accepts all props of Omit<React.ComponentProps<"section">, "title">

PropTypeDefaultDescription
eyebrowstring——
titleReact.ReactNode——
descriptionReact.ReactNode——
features* requiredBentoFeature[]—Five features fill the grid; the 1st and 4th get the wide slots

Install

$ npx shadcn@latest add https://chromotion.dev/r/feature-bento.json

The CLI installs the base component; your customizations live in the code generated on the Customize tab.

More like this