Shadcn.io is not affiliated with official shadcn/ui
Stitch Button
Button with animated dashed border that looks like stitching being sewn on hover for React.
Stitch Button preview
Watch it stitch. Hover and a dashed border animates around the button like thread being sewn by an invisible needle—marching ants with purpose. It's handcrafted and tactile, bringing a human touch to digital UI. The stitching loops continuously while hovered, creating this mesmerizing border march. Perfect for craft brands, DIY apps, fashion sites, or any design that should feel artisanal and made-with-care. The effect is subtle enough for professional use but distinctive enough to stand out.
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 stitch-button button into my projectRelated Components
Border Trace Button
SVG border drawing
Underline Button
Growing underline
Outline Fill Button
Rising fill animation
Corner Accent Button
Animated corners
Shimmer Button
Flowing shimmer
Shine Button
Diagonal light sweep
FAQ
Was this page helpful?
Sign in to leave feedback.