{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-card",
  "title": "Feature Card",
  "description": "An icon + heading + one line of copy, as the repeating tile in the features or benefits section of a landing or marketing page — a “why us” grid, “what’s included”, value props, product highlights, services, capabilities, or a perks row on a pricing page. Drop several into a responsive grid (grid-cols-2 / grid-cols-3) and that is the whole section; each card takes icon, title, description and optionally href. Set href and the entire card becomes the click target: it renders as an <a> rather than a <div>, with hover and a focus-visible ring, so keyboard users get one tab stop per card instead of hunting for a small link nested inside it. shadcn/ui ships no feature card. Its card is a generic container (~1.8KB of source, no dependencies) with no icon slot and no href — the icon square, the heading and the link are all yours to assemble. Its newer item is the closest thing in shape and does have an icon slot, but it is a ten-part compound kit (ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions, ItemHeader, ItemFooter, ItemSeparator) that also pulls in separator, and it is built for list rows rather than a marketing grid. Two concrete differences past the assembly work: official’s ItemTitle renders a <div>, so a features grid built from it contributes nothing to the document outline, whereas this renders a real heading you choose with headingLevel (h2/h3/h4, default h3) so screen-reader users can jump feature to feature; and official’s ItemMedia sets no aria-hidden, so a purely decorative icon can still be announced, whereas this marks the icon square aria-hidden and lets the title carry the meaning. Neither official component accepts an href, so “make the whole tile a link” is hand-wired in both. Zero dependencies — bring your own icon element (a lucide-react icon, an emoji, an <img>); it sits in a tinted primary/10 square, and everything else follows your shadcn tokens including dark mode.",
  "files": [
    {
      "path": "registry/ui/feature-card.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// Element-agnostic: the card renders a <div>, or an <a> when `href` is set.\ninterface FeatureCardProps\n  extends Omit<React.HTMLAttributes<HTMLElement>, \"title\"> {\n  /**\n   * Leading icon, usually a lucide-react icon element. Rendered inside a\n   * tinted square and marked decorative (`aria-hidden`) since the title\n   * carries the meaning.\n   */\n  icon?: React.ReactNode\n  /** Feature name, rendered as the card heading. */\n  title: React.ReactNode\n  /** Short supporting copy under the title. */\n  description?: React.ReactNode\n  /**\n   * Make the whole card a link. When set, the card renders as an `<a>` with a\n   * hover and `focus-visible` ring so the entire surface is the click target.\n   */\n  href?: string\n  /** Accessible heading level for the title. Defaults to `h3`. */\n  headingLevel?: \"h2\" | \"h3\" | \"h4\"\n}\n\n/**\n * An icon + title + description feature card for a \"why us\" / features grid on\n * a landing or marketing page. Set `href` to turn the whole card into a link\n * with hover and focus-visible states. Compose several in a responsive grid to\n * build a feature section. shadcn/ui ships no feature card. The icon is treated\n * as decorative; the title is a configurable heading level. Theme-aware via\n * shadcn tokens with dark mode.\n */\nexport function FeatureCard({\n  icon,\n  title,\n  description,\n  href,\n  headingLevel = \"h3\",\n  className,\n  ...props\n}: FeatureCardProps) {\n  const Heading = headingLevel\n\n  const body = (\n    <>\n      {icon ? (\n        <span\n          className=\"mb-4 inline-flex h-10 w-10 items-center justify-center rounded-lg bg-primary/10 text-primary [&_svg]:h-5 [&_svg]:w-5\"\n          aria-hidden=\"true\"\n        >\n          {icon}\n        </span>\n      ) : null}\n      <Heading className=\"font-semibold tracking-tight\">{title}</Heading>\n      {description ? (\n        <p className=\"mt-1.5 text-sm text-muted-foreground\">{description}</p>\n      ) : null}\n    </>\n  )\n\n  if (href) {\n    return (\n      <a\n        href={href}\n        className={cn(\n          \"block rounded-lg border bg-card p-6 text-card-foreground transition-colors hover:bg-accent hover:text-accent-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2\",\n          className\n        )}\n        {...props}\n      >\n        {body}\n      </a>\n    )\n  }\n\n  return (\n    <div\n      className={cn(\n        \"rounded-lg border bg-card p-6 text-card-foreground\",\n        className\n      )}\n      {...props}\n    >\n      {body}\n    </div>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}