Cursor

An animated cursor component that allows you to customize both the cursor and cursor follow elements with smooth animations.

Open in

Move your mouse over the div

global

enableCursor

enableCursorFollow

side

sideOffset

align

alignOffset

Installation

Usage

Global

<CursorProvider>
  <Cursor>
    <div>Cursor</div>
  </Cursor>
  <CursorFollow>
    <div>Cursor Follow</div>
  </CursorFollow>
</CursorProvider>

Local

<CursorProvider>
  <CursorContainer>
    <Cursor>
      <div>Cursor</div>
    </Cursor>
    <CursorFollow>
      <div>Cursor Follow</div>
    </CursorFollow>
  </CursorContainer>
</CursorProvider>

API Reference

CursorProvider

Prop	Type	Default
`children`	`React.ReactNode`	-
`global?`	`boolean`	`false`

CursorContainer

Prop	Type	Default
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"div">`	-

Cursor

Prop	Type	Default
`asChild?`	`boolean`	`false`
`...props?`	`HTMLMotionProps<"div">`	-

CursorFollow

Prop	Type	Default
`asChild?`	`boolean`	`false`
`side?`	`CursorFollowSide`	`bottom`
`sideOffset?`	`number`	`0`
`align?`	`CursorFollowAlign`	`end`
`alignOffset?`	`number`	`0`
`transition?`	`SpringOptions`	`{ stiffness: 500, damping: 50, bounce: 0 }`
`...props?`	`HTMLMotionProps<"div">`	-

Cursor

On this page