StickerCursor

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>
  );
}