Components / Interaction

Cursor

Custom pointer cursor with dot, ring, and label variants.

Preview

Move your pointer across this preview

1"use client"2
3import { Cursor } from "@/components/ui/cursor"4
5export function CursorDemo() {6  return <Cursor variant="ring" />7}

dot

The dot style of this component.

Move your pointer across this preview

1"use client"2
3import { Cursor } from "@/components/ui/cursor"4
5export function CursorDemo() {6  return <Cursor variant="dot" />7}

label

The label style of this component.

Move your pointer across this preview

1"use client"2
3import { Cursor } from "@/components/ui/cursor"4
5export function CursorDemo() {6  return <Cursor variant="label" label="Explore" />7}

Installation

Add the source directly to your project with the shadcn CLI.

npx shadcn@latest add qentrah/DUI/cursor

Usage

Install the component, import it from your configured UI directory, and adapt the source to your product. Open the source panel under any example to copy that exact variant.

Navigation