Glow Border

An animated border effect.

This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.

Installation

Add following entry to inline theme in your main.css file.

@theme inline {
  --animate-glow: glow var(--duration) infinite linear;
  @keyframes glow {
    0% {
      background-position: 0% 0%;
    }
    50% {
      background-position: 100% 100%;
    }
    to {
      background-position: 0% 0%;
    }
  }
}

Install using CLI

npm

pnpm

bun

yarn

npx shadcn-vue@latest add "https://inspira-ui.com/r/glow-border.json"

Install Manually

Copy and paste the following code

GlowBorder.vue

API

Prop Name	Type	Default	Description
`duration`	`number`	`10`	Duration of the glowing border animation.
`color`	`string \| string[]`	`#FFF`	Color or array of colors to applied on the glowing border.
`borderRadius`	`number`	`10`	Radius of the border.
`borderWidth`	`number`	`2`	Width of the border.

Credits

Credits to Magic UI for this fantastic component.

Confetti

A Vue component for confetti animations.

Glowing Effect

A dynamic proximity-based glow effect that reacts to mouse movements and scroll events, perfect for highlighting interactive elements.

On This Page

Installation
Install using CLI
Install Manually
API
Credits

Star on GitHub Create Issues Join Discord Forum Follow on X Follow on Bluesky