Shadcn.io is not affiliated with official shadcn/ui
Stitch Button
Button with a stitched dashed inner border and double inner shadows for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Stitch Button preview
Tactile and handcrafted. A primary-themed button with a dashed inner stitch line and layered inner shadows — top-side highlight, bottom-side tint — that flatten just slightly when you press. It reads like a piece of stitched leather: solid, deliberate, made-with-care. Perfect for craft brands, fashion sites, DIY apps, or anywhere a button should feel like a physical object. 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 stitch-button button into my projectRelated Components
Border Trace Button
SVG perimeter trace
Underline Button
Growing underline
Pill Button
Pill with inset highlight
Depth Button
Tactile 3D press
Shimmer Button
Animated shimmer ring
Gradient Button
Shifting gradient bg
FAQ
Was this page helpful?
Sign in to leave feedback.
Spotlight Button
Button with a soft light that follows your cursor on hover for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.
Success Button
Button that transforms into a success checkmark when completed for React, Next.js, shadcn/ui, Tailwind CSS, TypeScript. Built on the base-ui shadcn Button.