Sigil Cursor
Apply the active preset's custom pointer treatment.
Preview
Import
import { SigilCursor } from "@sigil-ui/components";Usage
<div className="relative w-full h-32 border border-[color:var(--s-border)] flex items-center justify-center text-sm text-[var(--s-text-muted)]">
<SigilCursor variant="dot" />
Hover this surface to see the custom cursor
</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
enabled | boolean | true | Enable the custom cursor. |
hideNative | boolean | true | Hide the native cursor while this component is mounted. |
variant | SigilCursorVariant | sigil | Cursor drawing style. |
size | number | string | — | Cursor outer size. Accepts a number of pixels or any CSS length. |
dotSize | number | string | — | Center dot size. Accepts a number of pixels or any CSS length. |
color | string | — | Primary cursor color. |
ringColor | string | — | Ring stroke color. |
dotColor | string | — | Center dot color. |
blendMode | CSSProperties["mixBlendMode"] | — | CSS mix-blend-mode value. |
Token integration
| CSS Variable | Purpose |
|---|---|
--s-cursor-size | Cursor size |
--s-cursor-color | Cursor color |
--s-primary | Primary |
--s-cursor-blend-mode | Cursor blend mode |
--s-duration-fast | Duration fast |
--s-ease-default | Ease default |
--s-cursor-opacity | Cursor opacity |
--s-cursor-stroke-width | Cursor stroke width |
--s-cursor-ring-color | Cursor ring color |
--s-cursor-radius | Cursor radius |
--s-radius-full | Radius full |
--s-cursor-glow | Cursor glow |