A responsive grid of feature cards, one to three columns wide, each with an optional icon, a title and a short description. Built with React and Tailwind.
npx shadcn@latest add @minidev/feature-gridCode Feature sections: grids, bento layouts and feature rows
Free feature section blocks for React and Tailwind CSS v4: icon feature grids, bento grids, alternating feature rows with motion and sticky scroll stories. Copy the code, MIT.
7 blocksFree, MITshadcn CLI compatibleTailwind CSS v4Light and dark
Feature sections explain what the product does in a way people actually read: a grid of short benefits with icons, a bento layout that gives the main feature more room, or alternating rows that pair a sentence with a screenshot.
Pick the density that matches your product. Three to six features fit a grid; one hero feature plus a few supporting ones suit a bento; a product with a story reads better as rows or a sticky scroll section.
A responsive bento grid for feature sections: tiles with icon, title, copy and a visual slot on a six column grid that collapses to one column on phones.
npx shadcn@latest add @minidev/bento-gridCode Feature Bento Motion
motionA four cell Tailwind bento grid of feature cards that rise in with a stagger and lift slightly on hover, alternating wide and narrow tiles across rows.
npx shadcn@latest add @minidev/feature-bento-motionCode Bento Live
blockA React bento feature grid where each tile runs a live demo: a rolling MRR counter, a typed AI answer, ranked alerts and an orbiting integrations ring.
npx shadcn@latest add @minidev/bento-liveCode Animated Feature Row
motionA row of feature cards that slide up with a staggered delay when scrolled into view. Pass title and description pairs; reduced motion keeps them still.
npx shadcn@latest add @minidev/animated-feature-rowCode Sticky Feature Story
motionA sticky scroll section where the active step highlights as you scroll and a pinned preview swaps with a step counter. Pass your own steps as props.
npx shadcn@latest add @minidev/sticky-feature-storyCode Tailwind section header with a title, optional muted description and a right-aligned actions slot that wraps on narrow screens. Use it above cards and tables.
npx shadcn@latest add @minidev/section-headerCode Frequently asked questions
What is a bento grid?
A bento grid is a layout of cards in different sizes on one grid, named after Japanese lunch boxes. One or two large cards hold the main feature and smaller cards hold the rest. The glossary entry explains when it works.
Can I use my own icons?
Yes. The feature grid takes any React node as the icon, so lucide icons, your own SVGs or small screenshots all work.