Skip to content
SCOUT UI α

alpha · @scout-ui/react

StickerCursor playground

Add a safety-first custom pointer enhancement.

Live · bounded

StickerCursor preview

Native cursor wins whenever safety is uncertain.
CodeAI Prompt · M15

Deterministic React output

Generated code

Plain TSX ready
import { StickerCursor } from "@scout-ui/react";
import { chunkyCheck } from "@scout-ui/stickers/definitions/chunky-check";
import { scribblePointer } from "@scout-ui/stickers/definitions/scribble-pointer";
import "@scout-ui/react/styles.css";

export default function StickerCursorExample() {
  return (
    <StickerCursor
      visuals={{
        default: { source: scribblePointer },
        hover: { source: chunkyCheck },
      }}
      size={48}
    >
      <section style={{ minHeight: 320, padding: 32 }}>
        <h2>Cursor showcase</h2>
        <button data-sticker-cursor="hover" type="button">
          Hover target
        </button>
        <input aria-label="Native cursor text field" />
      </section>
    </StickerCursor>
  );
}