Home/Utilities/Cursors

Cursors

Cursor utility classes for every CSS cursor value - with hover:, focus:, and active: pseudo-state variants. Also includes .disabled and :disabled cursor reset.

Cursor classes

Set the cursor style with .cursor-{name}. Hover over each box below to see the cursor in action.

Preview - hover to test

pointer
grab
move
not-allowed
wait
crosshair
text
help
zoom-in
none
<div class="cursor-pointer">Clickable</div>
<div class="cursor-grab">Draggable</div>
<div class="cursor-not-allowed">Disabled</div>

<!-- Hover variant -->
<div class="hover:cursor-pointer">Pointer on hover</div>

All cursor values

ClassCSS valueCategory
.cursor-autoautoGeneral
.cursor-defaultdefaultGeneral
.cursor-pointerpointerGeneral
.cursor-waitwaitGeneral
.cursor-texttextGeneral
.cursor-movemoveGeneral
.cursor-helphelpGeneral
.cursor-not-allowednot-allowedGeneral
.cursor-nonenone + user-select: noneGeneral
.cursor-context-menucontext-menuInteraction
.cursor-progressprogressInteraction
.cursor-cellcellInteraction
.cursor-crosshaircrosshairInteraction
.cursor-vertical-textvertical-textInteraction
.cursor-aliasaliasInteraction
.cursor-copycopyInteraction
.cursor-no-dropno-dropInteraction
.cursor-grabgrabDrag
.cursor-grabbinggrabbingDrag
.cursor-all-scrollall-scrollDrag
.cursor-col-resizecol-resizeResize
.cursor-row-resizerow-resizeResize
.cursor-n-resizen-resizeResize
.cursor-e-resizee-resizeResize
.cursor-s-resizes-resizeResize
.cursor-w-resizew-resizeResize
.cursor-zoom-inzoom-inZoom
.cursor-zoom-outzoom-outZoom

Disabled state

The :disabled pseudo-class and .disabled class both reset the cursor to default.

<button disabled>Disabled button</button>
<div class="disabled">Disabled element</div>
Pseudo-state variants. Every cursor class supports hover:, focus:, and active: prefixes - e.g. hover:cursor-pointer or active:cursor-grabbing.