meowerse_
docs menu

Cursor

The block cursor of the wordmarks, blinking at 1 Hz in steps.

import { Cursor } from "@meowerse/ui"; · source packages/ui/src/components/Cursor.tsx

variants and states

blinking
static

props

proptypedefaultrequired
blinkboolean whether the cursor blinks; false renders it static.trueno

css custom properties

variabledarklight
--c-accent-fill#00ff82same

Classes: .mw-cursor. Set any of these variables on an ancestor (or wrap a subtree in .mw-theme--dark / .mw-theme--light) to restyle just that part of a page.

usage

blinking

tsx
import { Cursor } from "@meowerse/ui";

<Cursor />

html (needs @meowerse/ui/tokens.css)
<span class="mw-cursor mw-cursor--blink" aria-hidden="true"></span>

static

tsx
import { Cursor } from "@meowerse/ui";

<Cursor blink={false} />

html (needs @meowerse/ui/tokens.css)
<span class="mw-cursor" aria-hidden="true"></span>

accessibility

  • aria-hidden: purely decorative.
  • It stops blinking under reduced motion.

do and don't

do

  • Use it in wordmarks and headings.

don't

  • Never put a blinking block cursor in an input field (spec §7).