Systaliko UI
componentanimated-bordersource: ok · hit
Animated Border
Animated border rotates infinitely around content
npx shadcn add "https://systaliko-ui.vercel.app/r/animated-border.json"free
No selection tags yet — empty means no evidence, not lack of support.
Files1 · source cached 10/14/2026, 12:34:30 PM
registry/components/animated-border/index.tsx
import { cn } from '@/lib/utils';
import React from 'react';
export function AnimatedBorder({
className,
style,
color = 'var(--primary)',
...props
}: React.ComponentProps<'div'> & { color?: string }) {
return (
<div
className={cn(
'pointer-events-none touch-none z-0 rounded-[inherit] border border-border/5 bg-transparent p-[1.5px]',
className,
)}
style={{
WebkitMask:
'linear-gradient(#000, #000) content-box, linear-gradient(#000, #000) border-box',
mask: 'linear-gradient(#000, #000) content-box, linear-gradient(#000, #000) border-box',
WebkitMaskComposite: 'xor',
maskComposite: 'exclude',
...style,
}}
data-slot="animated-border"
{...props}
>
<div className="absolute left-1/2 top-1/2 aspect-square w-[250%] -translate-x-1/2 -translate-y-1/2">
<div
className="size-full animate-[spin_4s_linear_infinite] bg-[conic-gradient(from_0deg,transparent_0%,var(--color)_10%,transparent_20%)] will-change-transform"
style={{ '--color': color } as React.CSSProperties}
/>
</div>
</div>
);
}