{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "border-beam-button", "description": "Shadcn Button wrapped in Border Beam: animated border glow with compact icon and text variants", "dependencies": [ "border-beam" ], "registryDependencies": [ "button" ], "files": [ { "path": "registry/default/ui/border-beam-button.tsx", "content": "\"use client\"\n\n/**\n * `border-beam` around `Button` — compact `beamSize=\"sm\"` glow for controls.\n * `className` styles the button; `borderBeamClassName` styles the beam wrapper.\n */\nimport type { ComponentProps, CSSProperties } from \"react\"\nimport { forwardRef } from \"react\"\nimport {\n BorderBeam,\n type BorderBeamProps,\n type BorderBeamSize,\n} from \"border-beam\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Button } from \"@/components/ui/button\"\n\ntype BeamShellProps = Pick<\n BorderBeamProps,\n | \"colorVariant\"\n | \"theme\"\n | \"staticColors\"\n | \"duration\"\n | \"active\"\n | \"borderRadius\"\n | \"brightness\"\n | \"saturation\"\n | \"hueRange\"\n | \"strength\"\n | \"onActivate\"\n | \"onDeactivate\"\n> & {\n beamSize?: BorderBeamSize\n borderBeamClassName?: string\n borderBeamStyle?: CSSProperties\n}\n\nexport type BorderBeamButtonProps = ComponentProps &\n BeamShellProps\n\nexport type BorderBeamIconButtonProps = BorderBeamButtonProps\n\nexport const BorderBeamButton = forwardRef<\n HTMLDivElement,\n BorderBeamButtonProps\n>(function BorderBeamButton(\n {\n beamSize = \"sm\",\n borderBeamClassName,\n borderBeamStyle,\n theme = \"auto\",\n colorVariant,\n staticColors,\n duration,\n active,\n borderRadius,\n brightness,\n saturation,\n hueRange,\n strength,\n onActivate,\n onDeactivate,\n className,\n ...buttonProps\n },\n ref\n) {\n return (\n \n