{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "liquid-metal-card",
  "title": "Liquid Metal Card",
  "dependencies": [
    "@paper-design/shaders-react"
  ],
  "registryDependencies": [
    "@fab-ui/card"
  ],
  "files": [
    {
      "path": "registry/default/ui/liquid-metal-card.tsx",
      "content": "'use client';\n\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from '@/registry/default/ui/card';\nimport { LiquidMetal, LiquidMetalProps } from '@paper-design/shaders-react';\n\nimport { cn } from '@/lib/utils';\n\ntype ShaderProps = Omit<LiquidMetalProps, 'className' | 'style' | 'shape'>;\n\ntype LiquidMetalCardProps = React.ComponentProps<typeof Card> &\n  Partial<ShaderProps>;\n\nfunction LiquidMetalCard({\n  className,\n  children,\n  speed = 0.6,\n  repetition = 4,\n  softness = 0.5,\n  shiftRed = 0.3,\n  shiftBlue = 0.3,\n  distortion = 0,\n  contour = 0,\n  angle = 45,\n  scale = 8,\n  offsetX = 0.1,\n  offsetY = -0.1,\n  ...props\n}: LiquidMetalCardProps) {\n  return (\n    <Card\n      data-slot='liquid-metal-card'\n      className={cn(\n        'relative overflow-hidden bg-transparent ring-0',\n        className\n      )}\n      {...props}\n    >\n      <LiquidMetal\n        className='absolute inset-0 rounded-2xl'\n        shape='none'\n        speed={speed}\n        repetition={repetition}\n        softness={softness}\n        shiftRed={shiftRed}\n        shiftBlue={shiftBlue}\n        distortion={distortion}\n        contour={contour}\n        angle={angle}\n        scale={scale}\n        offsetX={offsetX}\n        offsetY={offsetY}\n      />\n      <div className='absolute inset-0.75 rounded-[calc(1rem-1px)] bg-card inset-shadow-lg' />\n      <div className='relative flex flex-col gap-6 group-data-[size=sm]/card:gap-4'>\n        {children}\n      </div>\n    </Card>\n  );\n}\n\nexport {\n  LiquidMetalCard,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n};\n",
      "type": "registry:ui"
    }
  ],
  "cssVars": {
    "theme": {
      "--inset-shadow-lg": "inset 0 10px 8px color-mix(in oklch, var(--background) 7%, transparent)"
    }
  },
  "type": "registry:ui"
}