Glow Button

A button with a pulsing electric glow effect on hover.

Code

import { GlowButton } from "@/components/ui/glow-button"

export default function Example() {
  return <GlowButton>Get started</GlowButton>
}

Installation

$npx particleui-cli add glow-button

Usage

TSX

import { GlowButton } from "@/components/ui/glow-button"

export default function Example() {
  return <GlowButton>Get started</GlowButton>
}

Examples

Variants

TSX

import { GlowButton } from "@/components/ui/glow-button"

export default function Example() {
  return (
    <div className="flex flex-wrap gap-3">
      <GlowButton variant="default">Default</GlowButton>
      <GlowButton variant="secondary">Secondary</GlowButton>
      <GlowButton variant="outline">Outline</GlowButton>
      <GlowButton variant="ghost">Ghost</GlowButton>
    </div>
  )
}

Sizes

TSX

import { GlowButton } from "@/components/ui/glow-button"

export default function Example() {
  return (
    <div className="flex items-center gap-3">
      <GlowButton size="sm">Small</GlowButton>
      <GlowButton size="default">Default</GlowButton>
      <GlowButton size="lg">Large</GlowButton>
    </div>
  )
}

Props

Prop	Type	Default	Required
variant	"default" \| "secondary" \| "outline" \| "ghost"	`"default"`	no
size	"sm" \| "default" \| "lg"	`"default"`	no

Details

Source filecomponents/ui/glow-button.tsx

Typeui

Categoriesbuttons

npm dependenciesclass-variance-authority, clsx, tailwind-merge

Registry deps

Claude skill—