Glare Hover

PreviewCode

Pro

Popular

For teams that need more.

$49/mo

Unlimited projects

Team collaboration

Advanced analytics

SSO (coming soon)

Get started

@/demos/GlareHoverDemo.tsx

import { For } from 'solid-js'
import { Button } from '@/components/ui/button'
import { GlareHover } from '@/registry/magicui/glare-hover'

const features = [
  'Unlimited projects',
  'Team collaboration',
  'Advanced analytics',
]

export function GlareHoverDemo() {
  return (
    <GlareHover class="rounded-xl" duration={600}>
      <div class="w-85 rounded-xl border bg-card text-card-foreground shadow-sm">
        <div class="p-6 pb-2">
          <div class="flex items-center justify-between">
            <h3 class="text-lg font-semibold tracking-tight">Pro</h3>
            <span class="
              inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs
              font-semibold
            "
            >
              Popular
            </span>
          </div>
          <p class="text-sm text-muted-foreground">
            For teams that need more.
          </p>
          <div class="flex items-baseline gap-1 pt-2">
            <span class="text-4xl font-semibold tracking-tight">$49</span>
            <span class="text-sm text-muted-foreground">/mo</span>
          </div>
        </div>
        <div class="flex flex-col gap-2.5 p-6 pt-2">
          <For each={features}>
            {f => (
              <div class="flex items-center gap-2 text-sm">
                <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
                  <path
                    d="M12.5 3.5L6 10L2.5 6.5"
                    stroke="currentColor"
                    stroke-width="1.5"
                    stroke-linecap="round"
                    stroke-linejoin="round"
                  />
                </svg>
                {f}
              </div>
            )}
          </For>
          <div class="flex items-center gap-2 text-sm text-muted-foreground">
            <svg width="15" height="15" viewBox="0 0 15 15" fill="none">
              <circle cx="7.5" cy="7.5" r="1.5" fill="currentColor" opacity="0.4" />
            </svg>
            SSO (coming soon)
          </div>
        </div>
        <div class="p-6 pt-0">
          <Button class="w-full">Get started</Button>
        </div>
      </div>
    </GlareHover>
  )
}

Examples

CTA

PreviewCode

14-day free trial · No card required

Ready to get started?

Join 4,000+ teams already using our platform to ship faster.

Start free trialView demo

@/demos/GlareHoverDemoCta.tsx

import { Button } from '@/components/ui/button'
import { GlareHover } from '@/registry/magicui/glare-hover'

export function GlareHoverDemoCta() {
  return (
    <GlareHover class="rounded-xl" color="#505050" duration={700}>
      <div class="
        w-full rounded-xl border bg-card text-center text-card-foreground
        shadow-sm
      "
      >
        <div class="space-y-1.5 p-6 pb-0">
          <p class="
            text-xs font-medium tracking-widest text-muted-foreground uppercase
          "
          >
            14-day free trial · No card required
          </p>
          <h3 class="text-2xl font-semibold tracking-tight">
            Ready to get started?
          </h3>
          <p class="mx-auto max-w-sm text-sm text-muted-foreground">
            Join 4,000+ teams already using our platform to ship faster.
          </p>
        </div>
        <div class="flex justify-center gap-2 p-6">
          <Button>Start free trial</Button>
          <Button variant="outline">View demo</Button>
        </div>
      </div>
    </GlareHover>
  )
}

Alerts

PreviewCode

Action required

Your plan expires in 3 days. Renew to keep access.

Payment declined

Check your card details and try again.

Subscription confirmed

You have full Pro access until April 5, 2027.

@/demos/GlareHoverDemoAlert.tsx

import { CircleCheck, Info, TriangleAlert } from 'lucide-solid'
import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
import { GlareHover } from '@/registry/magicui/glare-hover'

export function GlareHoverDemoAlert() {
  return (
    <div class="flex flex-col gap-3">
      <GlareHover class="rounded-lg" duration={550} opacity={0.25}>
        <Alert class="[&>svg~*]:pl-10">
          <Info />
          <AlertTitle>Action required</AlertTitle>
          <AlertDescription>
            Your plan expires in 3 days. Renew to keep access.
          </AlertDescription>
        </Alert>
      </GlareHover>

      <GlareHover
        class="w-full rounded-lg"
        color="#ff6070"
        opacity={0.25}
        duration={550}
      >
        <Alert
          variant="destructive"
          class="
            bg-background
            [&>svg~*]:pl-10
          "
        >
          <TriangleAlert />
          <AlertTitle>Payment declined</AlertTitle>
          <AlertDescription>
            Check your card details and try again.
          </AlertDescription>
        </Alert>
      </GlareHover>

      <GlareHover
        class="w-full rounded-lg"
        color="#60ff70"
        opacity={0.25}
        duration={550}
      >
        <Alert class="[&>svg~*]:pl-10">
          <CircleCheck class="stroke-emerald-500" />
          <AlertTitle class="text-emerald-500">
            Subscription confirmed
          </AlertTitle>
          <AlertDescription class="text-emerald-500">
            You have full Pro access until April 5, 2027.
          </AlertDescription>
        </Alert>
      </GlareHover>
    </div>
  )
}

Installation

pnpm

pnpm dlx shadcn@latest add @magicui-solid/glare-hover

bun

bunx shadcn@latest add @magicui-solid/glare-hover

yarn

yarn dlx shadcn@latest add @magicui-solid/glare-hover

npm

npx shadcn@latest add @magicui-solid/glare-hover

Usage

The effect is implemented with a ::before pseudo-element: a linear-gradient tile moves from one corner to the opposite on hover. Color is parsed from hex (#rgb or #rrggbb) into rgba for the glare band.

import { GlareHover } from '@/components/magicui/glare-hover'

<GlareHover class="rounded-lg">
  <div>Hello World</div>
</GlareHover>

Colors and opacity

Use color (hex glare highlight) and opacity (alpha of that highlight). background sets the container background (default #000).

<GlareHover class="rounded-lg" color="#a78bfa" opacity={0.35} background="#0a0a0a">
  <div>{/* ... */}</div>
</GlareHover>

Angle and size

angle is the gradient angle in degrees (default -45). size is the glare tile size as a percentage of the element (default 250), passed to background-size.

<GlareHover class="rounded-lg" angle={-30} size={280}>
  <div>{/* ... */}</div>
</GlareHover>

Duration

duration is the transition length in milliseconds (default 650).

<GlareHover class="rounded-lg" duration={500}>
  <div>{/* ... */}</div>
</GlareHover>

playOnce

With playOnce (default false), the glare only animates while hovering: transitions are disabled until hover, so the sweep runs each time you enter the element instead of animating on first paint.

<GlareHover class="rounded-lg" playOnce>
  <div>{/* ... */}</div>
</GlareHover>

Layout

Optional width and height are merged onto the root style (string values, e.g. "100%"). You can also rely on class (e.g. w-full) and normal style / div props.

Props

GlareHover

Prop	Type	Default	Description
children	JSX.Element	—	Content inside the wrapper.
class	string	—	Classes on the root div (use rounded-*, overflow-hidden, etc.).
style	CSSProperties	—	Merged after CSS variables and background.
background	string	"#000"	Root background color.
color	string	"#ffffff"	Glare highlight (hex #rgb / #rrggbb).
opacity	number	0.5	Alpha for the parsed glare color.
angle	number	-45	Gradient angle in degrees (--gh-angle).
size	number	250	Glare tile size in % (--gh-size).
duration	number	650	Transition duration in ms (--gh-duration).
playOnce	boolean	false	If true, animation runs on hover only (no transition until hover).
width	string	—	Optional width on the root style.
height	string	—	Optional height on the root style.

The root forwards standard div props (onClick, data-*, etc.). The glare is drawn on ::before with z-10 above the content.

Credits

• Credit to @chishiyac

Original:

magicui.design/docs/components/glare-hover