Aura Beam

A unified ambient glow wrapper that brings three distinct border-light effects into a single component. Wrap any element with <AuraBeam> for a diffuse rotating conic-gradient aura, add variant="beam" for a sharp focused arc of light that travels around the border, or use variant="shine" for a sweeping radial-gradient highlight. Every variant shares the same multi-layer blur and glow for a consistently refined look.

Installation

npx shadcn@latest add https://prismaui.com/components/aura-beam.json

Import


import { AuraBeam } from '@/components/ui/aura-beam';
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from '@/components/ui/card';

Default

The default variant wraps the element from outside with a soft, diffuse conic-gradient halo using the theme’s --primary color.

Aura Beam

Ambient glow wrapping the card from outside.

Wrap any Card with <AuraBeam> to apply the effect.


<AuraBeam className='w-[340px]'>
  <Card className='rounded-[inherit]'>
    <CardHeader>
      <CardTitle>Aura Beam</CardTitle>
      <CardDescription>
        Ambient glow wrapping the card from outside.
      </CardDescription>
    </CardHeader>
    <CardContent>
      <p className='text-sm text-muted-foreground'>
        Wrap any Card with &lt;AuraBeam&gt; to apply the effect.
      </p>
    </CardContent>
    <CardFooter>
      <Button size='sm'>Action</Button>
    </CardFooter>
  </Card>
</AuraBeam>

Beam

variant="beam" projects a focused, narrow arc of light that continuously travels around the border. It preserves the AuraBeam’s soft blur layers so the beam feels deep and elegant rather than flat.

Beam

A focused arc of light travels along the border.

Use variant="beam" for a sharp travelling arc.


<AuraBeam variant='beam' className='w-[340px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>

Custom Colors

Pass an array to color for a gradient beam that transitions from one color to another.

Orange → Purple

Gradient beam with two colors.

Blue Beam

Cool blue gradient beam.


<AuraBeam variant='beam' color={['#ffaa40', '#9c40ff']} className='w-[300px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>
 
<AuraBeam variant='beam' color={['#00c6ff', '#0072ff']} className='w-[300px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>

Shine

variant="shine" produces a sweeping radial-gradient highlight that glides across the border, elevated by the aura’s glow layers for a polished, lustrous result.

Shine

A radial highlight sweeps continuously across the border.

Use variant="shine" for a sweeping glow.


<AuraBeam variant='shine' className='w-[340px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>

Multi-color Shine

Pass an array of colors to color to blend multiple stops into the sweep.

Multi-color

Three-color radial gradient sweep.

Gold Shine

Warm gold sweep.


<AuraBeam variant='shine' color={['#ffaa40', '#9c40ff', '#00d2ff']} className='w-[300px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>
 
<AuraBeam variant='shine' color={['#f7971e', '#ffd200']} className='w-[300px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>

Duration

Control the animation speed with the duration prop (seconds).

Fast Beam

duration=3

Slow Shine

duration=20


<AuraBeam variant='beam' duration={3} className='w-[280px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>
 
<AuraBeam variant='shine' duration={20} className='w-[280px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>

Border Width

Use borderWidth to thicken the glow border.

Thick Beam

borderWidth=3

Thick Shine

borderWidth=3


<AuraBeam variant='beam' borderWidth={3} className='w-[300px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>
 
<AuraBeam variant='shine' borderWidth={3} className='w-[300px]'>
  <Card className='rounded-[inherit]'>...</Card>
</AuraBeam>

Props

Prop	Type	Default	Description
`variant`	`"beam" \| "shine"`	—	Visual variant. Omit for the default ambient aura
`duration`	`number`	`6`	Animation cycle duration in seconds
`color`	`string \| string[]`	`--primary`	Glow color(s). Array → gradient for beam or multi-stop sweep for shine
`borderWidth`	`number`	`2`	Glow border thickness in pixels
`radius`	`string`	`"0.75rem"`	Corner radius — should match the wrapped element
`className`	`string`	—	Additional CSS classes
`style`	`React.CSSProperties`	—	Inline style overrides
`children`	`React.ReactNode`	—	Content wrapped by the aura