Features Icon Grid

A connected grid layout displaying features with colored indicators, perfect for Next.js landing pages and marketing sections.

Display your product features in a clean, even grid with color-coded indicators. Built with React and Tailwind CSS, this shadcn/ui component uses a gap-px border pattern to create connected cells that emphasize feature relationships. Perfect for Next.js applications showcasing multiple capabilities in a scannable format.

Features Icon Grid preview

Scroll to load preview

Installation

Install

Pro block

npx shadcn@latest add https://www.shadcn.io/r/features-icon-grid.json

npx shadcn@latest add https://www.shadcn.io/r/features-icon-grid.json

pnpm dlx shadcn@latest add https://www.shadcn.io/r/features-icon-grid.json

bunx shadcn@latest add https://www.shadcn.io/r/features-icon-grid.json

Features Checklist

Grouped feature list with categories

Features Bento Grid

Asymmetric feature showcase

Features Metric Highlights

Features with key metrics

Features Alternating Rows

Alternating layout pattern

Features Split Panel

Master-detail feature view

Features Accordion

Expandable feature details

FAQ

Last updated on March 16, 2026

Was this page helpful?

Features Hover Highlight

Feature list with active hover highlight effect showing contextual detail for interactive Next.js pages

Features Icon List

Simple icon plus text feature list with Lucide icons for clean Next.js feature sections

Features Icon Grid