Cursor & Interaction Effects

Hover Pointer

요소에 호버했을 때 사용자 지정 포인터를 보여주는 컴포넌트입니다.

Preview

desktop only

Hover Pointer

desktop pointer preview

Desktop preview

Installation

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

Code

typescript
Copied
1import { Pointer } from "@/components/pointer"23export default function Example() {4  return (5    <div className="relative">6      <Pointer />7    </div>8  )9}

Props

className

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

children

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

...props

Type
HTMLMotionProps<"div">
Default
-
Description
Motion props for wrapper.

Reference

Reference Hover Pointer