{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "beam-card", "title": "Beam Card", "description": "A card wrapped in an animated border beam, traveling or breathing, in four color palettes.", "dependencies": [ "border-beam" ], "registryDependencies": [ "@spectrumui/use-surface-theme" ], "files": [ { "path": "components/spectrumui/beam-card.tsx", "content": "/**\n * Spectrum UI — BeamCard\n *\n * A card wrapped in an animated border beam from `border-beam` (Jakub Antalík,\n * MIT, https://libraries.dev/beam). The beam either travels around the edge\n * (rotate family) or breathes (pulse family), in four palettes, and reads the\n * card's own border radius so it always hugs the corners. This wrapper adds a\n * ready-made card surface with an eyebrow, title, description and slot, plus\n * class-based dark/light detection so the beam matches a `.dark` theme.\n *\n * Dependencies: border-beam, @/lib/utils\n *\n * @example\n * \n */\n\n'use client';\n\nimport * as React from 'react';\nimport { BorderBeam, type BorderBeamColorVariant, type BorderBeamSize } from 'border-beam';\n\nimport { cn } from '@/lib/utils';\nimport { useSurfaceTheme, type SurfaceTheme } from '@/components/spectrumui/use-surface-theme';\n\nexport interface BeamCardProps {\n /** Small mono label above the title */\n eyebrow?: string;\n title?: string;\n description?: string;\n /** Body content rendered under the description */\n children?: React.ReactNode;\n /** Beam family: \"md\" travels, \"pulse-inner\" breathes inside, \"pulse-outside\" blooms out. Default \"md\" */\n size?: Extract;\n /** Palette: \"colorful\" | \"ocean\" | \"sunset\" | \"mono\". Default \"colorful\" */\n colorVariant?: BorderBeamColorVariant;\n /** \"auto\" follows a `.dark`/`.light` class on , then the OS. Default \"auto\" */\n theme?: SurfaceTheme;\n /** Play or fade the beam out. Default true */\n active?: boolean;\n /** Beam intensity 0–1. Default 1 */\n strength?: number;\n /** Classes for the inner card */\n className?: string;\n}\n\nexport function BeamCard({\n eyebrow,\n title,\n description,\n children,\n size = 'md',\n colorVariant = 'colorful',\n theme = 'auto',\n active = true,\n strength = 1,\n className,\n}: BeamCardProps) {\n const resolved = useSurfaceTheme(theme);\n return (\n \n \n {eyebrow && (\n

\n {eyebrow}\n

\n )}\n {title && (\n

\n {title}\n

\n )}\n {description && (\n

\n {description}\n

\n )}\n {children &&

{children}

}\n \n \n );\n}\n", "type": "registry:component", "target": "components/spectrumui/beam-card.tsx" } ], "type": "registry:component" }