{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "featured-icon",
  "title": "Featured Icon",
  "description": "A component that places an icon inside a styled square or circle frame for extra prominence. This component makes supporting visuals stand out in marketing layouts.",
  "files": [
    {
      "path": "components/shadcncraft/pro-marketing/featured-icon.tsx",
      "content": "import * as React from \"react\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport const featuredIconVariants = cva(\n  \"flex shrink-0 items-center justify-center border bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='text-'])]:text-primary\",\n  {\n    variants: {\n      size: {\n        sm: \"size-8 rounded-sm [&_svg]:size-3\",\n        md: \"size-12 rounded-md [&_svg]:size-4\",\n        lg: \"size-16 rounded-lg [&_svg]:size-6\",\n      },\n    },\n    defaultVariants: {\n      size: \"md\",\n    },\n  }\n);\n\nexport function FeaturedIcon({\n  size = \"md\",\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof featuredIconVariants>) {\n  return (\n    <div\n      data-slot=\"featured-icon\"\n      className={cn(featuredIconVariants({ size }), className)}\n      {...props}\n    />\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/shadcncraft/pro-marketing/featured-icon.tsx"
    }
  ],
  "meta": {
    "tier": "free",
    "figmaNodeId": "17897-100009",
    "bundle": "pro-marketing"
  },
  "type": "registry:ui"
}