The FeatureGrid block arranges a set of features into a bento layout, letting each one declare how many columns it spans so the arrangement itself ranks them.
Add it with the CLI, open it in v0, or copy the source into your project.
Adds the component and installs its dependencies for you.
npx shadcn@latest add https://uibeats.com/r/feature-grid.jsonEverything Feature Grid accepts.
| Prop | Type | Default | Description |
|---|---|---|---|
| features (required) | Feature[] | No default | The features to lay out, in display order |
| heading | string | No default | Section heading above the grid |
| description | string | No default | Supporting line under the heading |
| columns | number | 3 | Columns from the sm breakpoint up. Below it every card is full width |
| Feature: title | string | No default | The feature's name |
| Feature: description | string | No default | One or two lines on what it does |
| Feature: icon | LucideIcon | No default | Optional icon shown above the title |
| Feature: colSpan | number | 1 | Columns this feature spans, from sm up |
| className | string | '' | Additional CSS classes for styling |
Required.
Four things that matter more than the component count.
Every component lands in your repo as plain source you can edit.
Animation is part of the component, not a wrapper added later.
Colours come from your own tokens.
Every prop has a table, a playground, and a reason to exist.