Components
Type something
Customize
1
28
1
3
Installation
$ pnpm dlx shadcn@latest add @framecn/caret
Usage
Controlled — the consumer decides visibility:
import { Caret } from "@/components/ui/caret";
<Caret color="#1F1E1D" height={24} opacity={typing ? 1 : 0} />;Standalone blink — a self-animating caret driven by useCurrentFrame():
import { Caret } from "@/components/ui/caret";
<Caret blink blinkPerSecond={1} height={28} />;The docs preview shows a blinking caret after placeholder text, matching remocn’s preview scene.
How blink works
visible = floor(frame × speed / halfPeriod) is even
halfPeriod = fps / blinkPerSecond / 2
When opacity is provided it always wins; otherwise blink drives the bar, and with neither the caret stays solid.
API Reference
Caret
| Prop | Type | Default |
|---|---|---|
color | string | "currentColor" |
width | number | 2 |
height | number | 18 |
radius | number | 1 |
opacity | number | - (overrides blink) |
blink | boolean | false |
blinkPerSecond | number | 1 |
speed | number | 1 |
marginLeft | number | 0 |
className | string | - |
style | CSSProperties | - |