{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "feature-card",
  "type": "registry:ui",
  "title": "Feature Card",
  "description": "Feature card with icon, title, and description. The most reused card pattern on any SaaS landing page.",
  "dependencies": [
    "@saasflare/ui"
  ],
  "files": [
    {
      "path": "components/ui/feature-card.tsx",
      "type": "registry:ui",
      "content": "\"use client\"\n\n/**\n * @fileoverview Feature card with icon, title, and description.\n * @author Saasflare™\n * The most reused card pattern on any SaaS site. Simple and composable.\n * @module packages/ui/components/ui/feature-card\n * @package ui\n *\n * @component\n * @example\n * import { FeatureCard } from '@saasflare/ui';\n * <FeatureCard\n *   icon={<ZapIcon />}\n *   title=\"Lightning Fast\"\n *   description=\"Deploy in under 30 seconds with zero configuration.\"\n * />\n */\n\nimport { type ReactNode } from \"react\"\nimport { cn } from \"@saasflare/ui\"\nimport { useSaasflareProps, type SaasflareComponentProps } from \"@saasflare/ui\"\n\n/** Props for the FeatureCard component. */\nexport interface FeatureCardProps extends SaasflareComponentProps {\n  /** Icon element displayed at the top. */\n  icon?: ReactNode\n  /** Feature title. */\n  title: string\n  /** Feature description text. */\n  description: string\n  /** Additional class names. */\n  className?: string\n}\n\n/**\n * Feature card with icon, title, and description.\n *\n * @component\n * @package ui\n */\nexport function FeatureCard({\n  icon,\n  title,\n  description,\n  className,\n  surface,\n  radius,\n  animated,\n  iconWeight,\n}: FeatureCardProps) {\n  const sf = useSaasflareProps({ surface, radius, animated, iconWeight })\n  return (\n    <div\n      data-slot=\"feature-card\"\n      data-surface={sf.surface}\n      data-radius={sf.radius}\n      data-animated={String(sf.animated)}\n      className={cn(\n        \"rounded-xl border surface-card p-6\",\n        \"transition-all duration-200 hover:-translate-y-px hover:shadow-md\",\n        \"motion-reduce:hover:transform-none\",\n        className,\n      )}\n    >\n      {icon && (\n        <div className=\"mb-4 flex size-10 items-center justify-center rounded-lg bg-primary/10 text-primary [&_svg]:size-5\">\n          {icon}\n        </div>\n      )}\n      <h3 className=\"text-base font-semibold\">{title}</h3>\n      <p className=\"mt-1.5 text-sm leading-relaxed text-muted-foreground\">\n        {description}\n      </p>\n    </div>\n  )\n}\n",
      "target": "components/ui/feature-card.tsx"
    }
  ],
  "$meta": {
    "source": "https://ui.saasflare.io/r/feature-card.json"
  }
}