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/cursorUsage
import { Cursor } from '@/components/ui/Cursor';
<Cursor />
<Cursor blinking={false} className="bg-green-500" />Example
Blinking cursor:
Static cursor:
Props
| Prop | Type | Default | Description |
|---|---|---|---|
blinking | boolean | true | Toggles the blink animation on/off. |
className | string | "" | Additional Tailwind classes applied to the cursor span (e.g. a custom colour). |