Staaarter

Compact Two-Column Icon Feature List

A feature section that leads with a badge, heading, and description, then lists many compact items (ten in the demo) in a two-column grid. Each item pairs a lucide icon in a rounded bg-muted tile with a title and a one-line description, favoring density over a wide grid of large cards.

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 badge dependencies and any missing npm packages, and installs them straight into your project.

npx shadcn add https://staaarter.com/r/compact-two-column-icon-list.json

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

Usage

The file also exports feature36Demo, 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 { Feature36, feature36Demo } from "@/components/blocks/feature/feature36";

export default function Page() {
  return <Feature36 {...feature36Demo} />;
}

Props

PropTypeDefaultDescription
badgestringundefinedSmall label above the heading; omitted entirely when unset.
headingReactNodenoneSection heading.
descriptionstringundefinedSupporting copy under the heading.
itemsCompactFeatureItem[]noneIcon, title, and description entries rendered in a two-column grid.
classNamestringundefinedExtra classes for the outer section element.

Types

type CompactFeatureItem = {
  icon: LucideIcon;
  title: string;
  description: string;
};

Behavior notes

  • Plain server component with no interactivity; the entire list is static markup.
  • Each item's icon is passed as a real LucideIcon component reference, which is fine here since the block is a server component and never crosses a client boundary.
  • Items wrap to a single column below the sm breakpoint and form two columns above it.