shadcn.io is an independent project built on shadcn/ui
Buttons
ProStitch Button for Svelte
A button with a stitched line just inside its edge and soft inner shading, like leather. For Svelte with Ark UI, when a button should feel handmade.
The Stitch Button has a dashed line running just inside its edge, with soft shading along the top and bottom that makes it look padded. On hover or keyboard focus the stitching shows a little clearer, and while it's pressed the shading fades, so it looks pressed flat.
Use it where the brand is about making things: a craft shop, a fashion label, a DIY app. It's a strong texture, so keep it to one or two buttons a page. It wraps the Button, so every variant and size works, and the stitch and shading are drawn in the label's color, so they suit each variant. It's CSS only, short opacity transitions with no JavaScript and no animation library; with reduced motion the stitch and the shading change at once instead of easing.
Installation
Usage
<script lang="ts">
import { StitchButton } from "@/components/ui/stitch-button";
</script>
<StitchButton>Add to bag</StitchButton>
Demos
Dotted Stitch
stitch="dotted" swaps the dashes for a finer dotted line, closer to hand sewing. Use it on smaller buttons, where dashes get too few to read as stitching.
Variants and Sizes
The stitch takes the label's color at a little under half strength, so it shows on outline, secondary and destructive as well as on the primary fill. It sits the same distance from the edge at every size.
Accessibility
The stitch and shading are decoration and hidden from assistive tech: the button is announced and activated as any Button. Holding Space shows the flattened, pressed look, as a pointer press does.
- Enter
- Activate the button.
- Space
- Activate the button.
FAQ
How do I change the color?
Pick a variant, or pass a background and text color in className, such as bg-secondary text-secondary-foreground. The stitch and shading follow the text color, so they always match.
How is the stitch drawn?
It's a 1px dashed border in the label's color on a layer set 3px inside the button, at 45% opacity (70% on hover). The shading is a second layer with two inset shadows, one along the top and one along the bottom.
What happens when it's pressed?
The shading layer fades to 30%, so the button looks pressed flat, and it returns as soon as it's released. Only its opacity changes, never the shadows themselves, so the press is cheap to draw.
Does it work in dark mode?
Yes. Everything is drawn from the button's own colors, which already change with the mode.
API Reference
StitchButton
data-slot="stitch-button-shading"
children?Snippet
The label, inside the stitching.
clickEffect?boolean
Apply a click effect to the button.
- Default
true
isLoading?boolean
Show a loading indicator.
- Default
false
stitch?"dashed" | "dotted"
The stitch line: dashed like machine stitching, dotted for a finer,
hand-sewn look.
- Type
"dashed" | "dotted"- Default
"dashed"
asChild?Snippet<[PropsFn]>
Render your own element: a snippet that gets the part's props to spread on it.
- Type
Snippet<[PropsFn]>
class?string
Merged with the part's classes.
