Systaliko UI
uianimated-border-demosource: ok · hit
Animated Border Demo
Demo showing Animated border component.
npx shadcn add "https://systaliko-ui.vercel.app/r/animated-border-demo.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
https://systaliko-ui.vercel.app/r/animated-border
Files1 · source cached 10/14/2026, 3:35:41 PM
registry/demo/components/animated-border/index.tsx
import { AnimatedBorder } from '@/components/systaliko-ui/components/animated-border';
import { Button } from '@/components/systaliko-ui/shadcn/button';
export function AnimatedBorderDemo() {
return (
<div className="flex justify-center gap-8 flex-wrap">
<div className="rounded relative bg-card shadow-2xs ring ring-ring/10 size-60 overflow-hidden">
<AnimatedBorder
color="#DE6449"
className="absolute inset-0 border border-[#DE6449]/20"
/>
</div>
<Button variant="outline" className="relative">
<AnimatedBorder
color="#791E94"
className="p-0 absolute -inset-px border border-[#791E94]/10"
/>
Get Started
</Button>
</div>
);
}