# Custom Cursor

- Page: <https://kznlabs.github.io/labsUI/components/cursor>

## Custom Cursor (`custom-cursor`, component)

Optional spring cursor that expands over interactive elements. Off on touch and reduced motion.

- Install: `npx @kznlabs/labsui add custom-cursor`
- Docs: <https://kznlabs.github.io/labsUI/components/cursor>
- Brings: platform, utils
- npm: clsx@^2.1.1, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<CustomCursor>`: Opt-in spring cursor (dot + trailing ring; ring expands over interactive elements).
Mount once. Renders nothing on touch/coarse pointers or with reduced motion.

### Usage

```tsx
{enabled && <CustomCursor />}
```

### Example: layout.tsx

```tsx
import { CustomCursor } from "@/components/ui/custom-cursor";
export function Layout({ enabled }: { enabled: boolean }) {
  return <>{enabled && <CustomCursor />}</>;
}
```