{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "neon-card",
  "title": "Neon Card",
  "author": "Ballmac <https://ui.ballmac.com>",
  "description": "A card framed by a two-color neon border with a soft outer light and inner glow, tunable thickness, intensity and corner radius, with an optional warm-up flicker that never plays under reduced motion.",
  "dependencies": [
    "motion@^12"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/ballmac/components/neon-card.tsx",
      "content": "// Ballmac UI: Neon Card. https://ui.ballmac.com/components/neon-card\n\"use client\"\n\nimport * as React from \"react\"\nimport { motion, useReducedMotion } from \"motion/react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype NeonTone = \"chart-1\" | \"chart-2\" | \"chart-3\" | \"chart-4\" | \"chart-5\" | \"primary\" | \"destructive\"\n\nconst VAR: Record<NeonTone, string> = {\n  \"chart-1\": \"var(--chart-1)\",\n  \"chart-2\": \"var(--chart-2)\",\n  \"chart-3\": \"var(--chart-3)\",\n  \"chart-4\": \"var(--chart-4)\",\n  \"chart-5\": \"var(--chart-5)\",\n  primary: \"var(--primary)\",\n  destructive: \"var(--destructive)\",\n}\n\ntype NeonCardProps = Omit<React.ComponentProps<\"div\">, \"ref\"> & {\n  /** Color at the start of the border. */\n  from?: NeonTone\n  /** Color at the end of the border. */\n  to?: NeonTone\n  /** Border thickness in pixels. */\n  borderWidth?: number\n  /** How strongly the outer light spreads, from 0 to 1. */\n  glow?: number\n  /** Let the light flicker like a neon sign that is warming up. Off by default and never on under reduced motion. */\n  flicker?: boolean\n  /** Corner radius. */\n  radius?: \"lg\" | \"xl\" | \"2xl\" | \"3xl\"\n  /** Classes for the inner surface. */\n  contentClassName?: string\n}\n\nconst RADIUS = {\n  lg: [\"rounded-lg\", \"rounded-[calc(var(--radius-lg)-var(--nw))]\"],\n  xl: [\"rounded-xl\", \"rounded-[calc(var(--radius-xl)-var(--nw))]\"],\n  \"2xl\": [\"rounded-2xl\", \"rounded-[calc(var(--radius-2xl)-var(--nw))]\"],\n  \"3xl\": [\"rounded-3xl\", \"rounded-[calc(var(--radius-3xl)-var(--nw))]\"],\n}\n\nfunction NeonCard({ from = \"chart-1\", to = \"chart-4\", borderWidth = 1.5, glow = 0.6, flicker = false, radius = \"xl\", className, contentClassName, children, style, ...props }: NeonCardProps) {\n  const reduce = useReducedMotion()\n  const gradient = `linear-gradient(135deg, ${VAR[from]}, ${VAR[to]})`\n  const [outer, inner] = RADIUS[radius]\n  const flickers = flicker && !reduce\n\n  return (\n    <div\n      data-slot=\"neon-card\"\n      className={cn(\"group/neon relative isolate\", outer, className)}\n      style={{ ...style, [\"--nw\" as string]: `${borderWidth}px` } as React.CSSProperties}\n      {...props}\n    >\n      {/* The light: the same gradient, blurred, behind the card. */}\n      <motion.span\n        aria-hidden=\"true\"\n        className={cn(\"pointer-events-none absolute -inset-1 -z-10 blur-xl\", outer)}\n        style={{ background: gradient, opacity: 0.18 + glow * 0.5 }}\n        animate={flickers ? { opacity: [0.18 + glow * 0.5, 0.1, 0.18 + glow * 0.5, 0.05, 0.18 + glow * 0.5, 0.18 + glow * 0.5] } : undefined}\n        transition={flickers ? { duration: 4, repeat: Infinity, times: [0, 0.04, 0.08, 0.12, 0.16, 1], ease: \"linear\" } : undefined}\n      />\n      <div className={cn(\"p-[var(--nw)]\", outer)} style={{ background: gradient }}>\n        <div className={cn(\"relative h-full bg-card text-card-foreground\", inner, contentClassName)}>\n          <span aria-hidden=\"true\" className={cn(\"pointer-events-none absolute inset-0 opacity-60 dark:opacity-100\", inner)} style={{ boxShadow: `inset 0 0 28px -6px color-mix(in oklab, ${VAR[from]} ${Math.round(glow * 45)}%, transparent)` }} />\n          <div className=\"relative\">{children}</div>\n        </div>\n      </div>\n    </div>\n  )\n}\n\nexport { NeonCard, type NeonCardProps, type NeonTone }\n",
      "type": "registry:ui",
      "target": "@components/ballmac/neon-card.tsx"
    }
  ],
  "meta": {
    "schema": 1,
    "tier": "free",
    "tags": [
      "card",
      "neon",
      "glow",
      "border",
      "gradient"
    ],
    "version": "1.0.0",
    "updated": "2026-10-01",
    "ai": {
      "summary": "<NeonCard from to borderWidth glow flicker radius contentClassName>content</NeonCard>. Colors are theme tokens, so it follows any theme. The light is strongest in dark mode.",
      "whenToUse": [
        "A single highlighted plan, product or announcement",
        "Dark-themed landing pages"
      ],
      "whenNotToUse": [
        "Several cards at once",
        "A rotating border (glow-border)"
      ],
      "composesWith": [
        "glow-border",
        "magic-card",
        "card"
      ],
      "a11y": [
        {
          "keys": "Contrast",
          "action": "Content sits on the normal card surface; the glow is decorative"
        },
        {
          "keys": "Reduced motion",
          "action": "Flicker is never played"
        }
      ],
      "customization": [
        "from and to",
        "borderWidth",
        "glow",
        "flicker",
        "radius"
      ]
    },
    "examples": [
      "neon-card-demo",
      "neon-card-tones"
    ],
    "url": "https://ui.ballmac.com/components/neon-card"
  },
  "categories": [
    "motion"
  ],
  "type": "registry:ui"
}