Two-By-Two With Icon Tiles

Installation

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

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

Usage

The file also exports feature74Demo, 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 { Feature74, feature74Demo } from "@/components/blocks/feature/feature74";

export default function Page() {
  return <Feature74 {...feature74Demo} />;
}

Props

Types

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

type HeaderCta = { label: string; href: string };

Behavior notes

• Server component, no client-side interactivity: the CTA renders as a real Next.js Link via the button's render prop but has no destination behavior beyond navigating wherever href points.
• Tile icons are a real per-item `icon: LucideIcon` prop, safe here because the component is a server component.
• The grid is authored for exactly four tiles (2x2 on sm and up, single column below); supplying a different count still renders but won't fill a clean 2x2 shape.