Adventureland Registry

Cursor

An inline blinking text cursor that mimics a terminal caret using CSS and a timer.

Cursor renders a narrow vertical bar that blinks at the standard 530 ms rate. Drop it anywhere inline text runs — after a heading, beside a label, or inside a typewriter animation — to give content a terminal feel. Set blinking={false} to freeze it as a static accent.

Installation

npx shadcn@latest add @adv/cursor

Usage

import { Cursor } from '@/components/ui/Cursor';

<Cursor />
<Cursor blinking={false} className="bg-green-500" />

Example

Blinking cursor:

Static cursor:

Props

PropTypeDefaultDescription
blinkingbooleantrueToggles the blink animation on/off.
classNamestring""Additional Tailwind classes applied to the cursor span (e.g. a custom colour).

On this page