Shine Border

An animated shining radial-gradient border effect. Inspired by Magic UI’s Shine Border . Implemented with pure CSS — no external animation library required.

Installation

npx shadcn@latest add https://prismaui.com/components/shine-border.json

Import


import { ShineBorder } from '@/components/ui/shine-border';
import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardContent,
  CardFooter,
} from '@/components/ui/card';

Preview

Shine Border

A radial gradient sweeps continuously around the border.

Drop <ShineBorder /> inside any Card with relative.


<Card className='relative w-85'>
  <ShineBorder shineColor='#9c40ff' />
  <CardHeader>
    <CardTitle>Shine Border</CardTitle>
    <CardDescription>
      A radial gradient sweeps continuously around the border.
    </CardDescription>
  </CardHeader>
  <CardContent>
    <p className='text-sm text-muted-foreground'>
      Drop &lt;ShineBorder /&gt; inside any Card with relative.
    </p>
  </CardContent>
  <CardFooter>
    <Button size='sm'>Action</Button>
  </CardFooter>
</Card>

Multi-color Shine

Pass an array of colors to shineColor to create a rainbow-like shine effect.

Multi-color Shine

Array of colors with a thicker border.

Multiple colors blend into the radial gradient sweep.


<Card className='relative'>
  <ShineBorder shineColor={['#ffaa40', '#9c40ff', '#00d2ff']} borderWidth={2} />
  ...
</Card>

Slow Duration

Slow Shine

Longer duration for a subtle effect.

Increase duration for a slower, more ambient glow.


<Card className='relative'>
  <ShineBorder shineColor='#00d2ff' duration={30} />
  ...
</Card>

Props

Prop	Type	Default	Description
`borderWidth`	`number`	`1`	Width of the shining border in pixels
`duration`	`number`	`14`	Duration of the shine animation in seconds
`shineColor`	`string \| string[]`	`#000000`	Color(s) for the shine gradient