Moving Border

SVG-path-tracing animated border that orbits a button or card.

UniqueUI CLI

npx uniqueui add moving-border

shadcn CLI

npx shadcn@latest add https://uniqueui.com/r/moving-border.json -y

shadcn path expects @/lib/utils (run shadcn init first). Same source file is installed to components/ui/.

Preview

Usage

import { Button } from "@/components/ui/moving-border";

export default function Example() {
  return (
    <div className="flex flex-wrap gap-6 items-center justify-center p-10">
      <Button
        borderRadius="1.75rem"
        className="bg-zinc-950 text-white border-neutral-200 dark:border-slate-800"
      >
        Click me
      </Button>
      <Button
        borderRadius="1rem"
        className="bg-zinc-950 text-white border-neutral-200 dark:border-slate-800"
        containerClassName="h-12 w-48"
      >
        Rounded Button
      </Button>
    </div>
  );
}

Props

Prop	Type	Description
`theme`	`"light" \| "dark"`	Visual theme; light or dark. Default: dark.
`borderRadius`	`string`	The radius for rounding the button edges and the orbiting path.
`children`	`React.ReactNode`	The label or content displayed inside the button.
`as`	`React.ElementType`	The HTML element tag to use for the button wrapper (e.g., 'button', 'div').
`containerClassName`	`string`	Add CSS classes to the outermost container.
`borderClassName`	`string`	Add CSS classes directly to the moving animated SVG border.
`duration`	`number`	Time in milliseconds to complete one full orbit around the border.
`className`	`string`	Add CSS classes to the inner content layer.