Controls & Inputs

Shine Button

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

Preview

action control

Shine Button

hover for a soft shine

Installation

bash
Copied
1pnpm dlx shadcn@latest add https://ryong-blog.vercel.app/r/shiny-button.json

Code

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

Props

children

Type
React.ReactNode
Default
-
Description
Content rendered inside the component.

className

Type
string
Default
-
Description
Additional classes merged onto the component.

shineColor

Type
string
Default
"currentColor"
Description
Color used by the moving shine mask.

...props

Type
HTMLAttributes<HTMLElement> & MotionProps
Default
-
Description
Motion button props.

Reference

Reference Shine Button