Staaarter

Icon Capability Grid

A capability section with an eyebrow sitting over a hairline rule, a two-column heading and description pair below it, and a responsive grid of icon-led features further down. Each grid item has a tinted icon chip, a title, and a short description.

By Staaarter Team
Feature
Docs
Live preview

Docs

Installation

A real shadcn registry command, not a copy-paste stand-in: it fetches this block plus its dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/icon-capability-grid.json

Prefer not to use the CLI? Copy the source from the Code toggle above into src/components/blocks/feature/feature28.tsx instead.

Usage

The file also exports feature28Demo, the exact props behind the preview above. Spread it to get a working section in one line, then replace it with your own data.

import { Feature28, feature28Demo } from "@/components/blocks/feature/feature28";

export default function Page() {
  return <Feature28 {...feature28Demo} />;
}

Props

PropTypeDefaultDescription
eyebrowstringundefinedSmall label above the hairline rule.
headingstringnoneSection heading, left column of the two-column header.
descriptionstringundefinedSupporting paragraph, right column of the two-column header.
itemsFeature28Item[]noneIcon-led capability entries in the grid.
classNamestringnoneExtra classes for the outer section element.

Types

interface Feature28Item {
  icon: LucideIcon;
  title: string;
  description: string;
}

Behavior notes

  • Purely presentational, there is no click or hover interaction anywhere in this block.
  • The grid reflows from 1 to 2 to 3 columns by breakpoint and works for any number of items, though the demo uses six.
  • Icon chips use a tinted bg-primary/10 background with a text-primary icon, matching the accent-tinted-chip convention used elsewhere in this repo's blocks.