Animated Border

Pro

A border with a band of light that keeps travelling around a card or a button.

Team plan

Customize

Tail color#ff784f

Head color#ffc24a

Lap time4s

Width2px

Installation

Animated Border is part of Pro. After purchase you're invited to the private mekai-ui/mekai-ui-pro GitHub repository: copy animated-border.tsx into components/ui and run npm install motion.

See Pro pricing

Usage

import { AnimatedBorder } from "@/components/ui/animated-border";

<AnimatedBorder colors={["#ff784f", "#ffc24a"]} speed={4} radius={28}>
  <div className="p-7">Team plan</div>
</AnimatedBorder>

Props

6 properties

Property	Type	Default	Description
children	ReactNode	—	Content inside the border.
colors	string[]	["#ff784f", "#ffc24a", "#ffa585"]	Colors of the travelling light, from tail to head.
speed	number	4	Seconds for one full lap.
borderWidth	number	2	Border thickness in pixels.
radius	number	24	Corner radius in pixels.
className	string	—	Extra classes for the outer frame.

Dependencies: motion