Controls & Inputs

Shine Button

반복되는 광택 마스크와 탄성 있는 탭 피드백을 가진 버튼입니다.

Preview

action control

Shine Button

hover for a soft shine

bash

Copied

1pnpm dlx shadcn@latest add https://ryong.dev/r/shiny-button.json

bash

Copied

1npx shadcn@latest add https://ryong.dev/r/shiny-button.json

bash

Copied

1yarn dlx shadcn@latest add https://ryong.dev/r/shiny-button.json

bash

Copied

1bunx shadcn@latest add https://ryong.dev/r/shiny-button.json

typescript

Copied

1import { ShinyButton } from "@/components/shiny-button"23export default function Example() {4  return <ShinyButton>Shiny Button</ShinyButton>5}

Prop	Type	Default	Description
children	React.ReactNode	-	Content rendered inside the component.
className	string	-	Additional classes merged onto the component.
shineColor	string	"currentColor"	Color used by the moving shine mask.
...props	HTMLAttributes<HTMLElement> & MotionProps	-	Motion button props.