Stamp

New

Every press thumps a rubber stamp down beside it

$ npx @hritik-sharmaa/repeat-ui add button-stamp

Live preview

Customize

Label

Size

Stamp text

Ink

Button

Text

Max stamps6

Duration1.6s

Radius10px

import ButtonStamp from "@/components/repeat-ui/button-stamp/preview";

<ButtonStamp stampText="Approved">Approve</ButtonStamp>

Installation

Run the command
Adds the files and installs any packages they need. Works with npm, pnpm, yarn and bun.
$ npx @hritik-sharmaa/repeat-ui add button-stamp --variant ts-tailwind

The files are in components/repeat-ui/button-stamp/.

import ButtonStamp from "@/components/repeat-ui/button-stamp/preview";

export default function Page() {
  return <ButtonStamp />;
}

Prop	Type	Default	Description	Options
`children`	`ReactNode`	-	The button label.	-
`size`	`"sm" \| "md" \| "lg"`	"md"	Height, padding and font size. Every Repeat UI button shares this scale.	sm \| md \| lg
`stampText`	`string`	"Approved"	Word on the stamp.	-
`stampColor`	`string`	"#e11d48"	Ink colour of the stamp.	-
`color`	`string`	"#fafafa"	Button colour.	-
`textColor`	`string`	"#0a0a0a"	Button text colour.	-
`maxStamps`	`number`	6	Most stamps on screen at once.	-
`duration`	`number`	1.6	Seconds before a stamp fades away.	-
`radius`	`number`	10	Button corner radius in pixels.	-
`onClick`	`(event: MouseEvent) => void`	-	Click event handler.	-
`className`	`string`	""	Extra classes for the button.	-