Glow Border
An animated border effect.
Preview
Code
This component uses the nuxt-only syntax with the <ClientOnly>. If you are not using Nuxt, you can simply remove it.
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.