Cursor

A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

A custom cursor component with optional spring animations. It can be globally applied to the page or attached specifically to a parent element.

Examples

Christian Church, Eastern Europe

npx shadcn@latest add "https://components.dylanwlim.com/c/cursor.json"

Prop	Type	Default	Description
children	ReactNode	required	Children to be rendered within the custom cursor. Mandatory.
className	string		Optional CSS class for styling the custom cursor container.
springConfig	SpringOptions		Configuration for the spring physics used in the cursor's movement.
attachToParent	boolean	false	If `true`, the cursor will only be visible when hovering over its parent component.
transition	Transition		Transition settings from motion for animation effects.
variants	Object (with initial, animated, exit properties)		Variants for controlling the animation states with specific properties for initial, animate, and exit states.
onPositionChange	`(position: { x: number, y: number }) => void`		Callback function that is called when the cursor position changes.

On This Page

Build with DWL Components

Use the copied registry, charts, blocks, and create tools in one place.

Start from the DWL Components create flow and customize from there.