Rotation

Smooth rotation effect on interaction

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

Live preview

Customize

Label

Size

Background

Text

Speed3s

Border2px

Always spin

import ButtonRotation from "@/components/repeat-ui/button-rotation/preview";

<ButtonRotation>Rotate</ButtonRotation>

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-rotation --variant ts-tailwind

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

import ButtonRotation from "@/components/repeat-ui/button-rotation/preview";

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

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
`colors`	`string[]`	["#00ff88", "#00ccff", "#ff00ff", "#ffaa00"]	Colours of the spinning border.	-
`background`	`string`	"#1f2937"	Background colour.	-
`textColor`	`string`	"#ffffff"	Text colour.	-
`speed`	`number`	3	Seconds per turn.	-
`borderWidth`	`number`	2	Border thickness in pixels.	-
`alwaysOn`	`boolean`	false	Spin all the time, not only on hover.	-
`onClick`	`(event: MouseEvent) => void`	-	Click event handler.	-
`className`	`string`	""	Extra classes for the button.	-