Pointer

Replace the system cursor with a custom glyph on hover.

Preview

Hover each card. Same Pointer API: default arrow, className color, or custom children.

Loading…

source.tsx

npx @sonojs/ui@latest add …
import { Component } from "@/components/…"
export function Example() {
  return <Component />}

source.tsx

npx @sonojs/ui@latest add …
import { Component } from "@/components/…"
export function Example() {
  return <Component />}

Keep the default arrow and tint it with className (fill / text utilities).

source.tsx

npx @sonojs/ui@latest add …
import { Component } from "@/components/…"
export function Example() {
  return <Component />}

Pass any React node as children to replace the arrow.

source.tsx

npx @sonojs/ui@latest add …
import { Component } from "@/components/…"
export function Example() {
  return <Component />}

Children can be text or an emoji — not only SVG.

source.tsx

npx @sonojs/ui@latest add …
import { Component } from "@/components/…"
export function Example() {
  return <Component />}

Wrap your glyph in motion (or any animator). Pointer only positions it.

source.tsx

npx @sonojs/ui@latest add …
import { Component } from "@/components/…"
export function Example() {
  return <Component />}