Shadcn.io is not affiliated with official shadcn/ui
Border Trace Button
Button with an animated border that traces around the perimeter on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Border Trace Button preview
Watch the line draw itself. Hover and a glowing line starts tracing around the button's edge—like a pen drawing a box in real-time. The trace completes the full perimeter, then pulses gently. It's technical, precise, and satisfying to watch. The SVG stroke animation feels premium and intentional, like something loading or activating. Perfect for tech products, developer tools, or any UI that should feel engineered. Built on top of the shadcn Button so every variant and size you already use just works.
Install with AI
If you've connected the shadcn.io MCP server to Claude Code, Cursor, Windsurf, or any MCP-ready AI editor, prompt your agent to install this button for you — no copy-paste, no CLI:
use shadcnio to install the border-trace-button button into my projectRelated Components
Glow Border Button
Continuous rotating glow
Flow Button
Hover rotating border
Stitch Button
Dashed stitched border
Shimmer Button
Animated shimmer ring
Shine Button
Diagonal light sweep
Pill Button
Pill with inset highlight
FAQ
Was this page helpful?
Sign in to leave feedback.
Arrow Button
Button with an animated arrow that slides in on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on base-ui Button.
Confetti Button
Button that bursts confetti particles on click for celebratory moments in React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.