Four Cards With Centered Icon

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.

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

Usage

The file also exports feature172Demo, 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 { Feature172, feature172Demo } from "@/components/blocks/feature/feature172";

export default function Page() {
  return <Feature172 {...feature172Demo} />;
}

Props

Types

type Feature172Accent =
  | "emerald" | "primary" | "foreground" | "rose" | "blue"
  | "amber" | "violet" | "sky" | "orange" | "teal";

interface Feature172Step {
  icon: LucideIcon;
  title: string;
  description: string;
  accent: Feature172Accent;
}

Behavior notes

• This is a plain Server Component with no interactivity, the numbered corner tag is a static label, not a step tracker with real state.
• The accent color is a closed union type mapped to a fixed lookup of Tailwind classes, callers cannot pass an arbitrary color string.
• Distinct from the similarly-titled four-card icon block elsewhere in this category: this variant uses a large circular badge with a numbered corner tag and a per-card accent color, laid out for a 4-step process rather than a general feature list.