Browse components
Text Modifier
Hand-drawn pen annotations (circles, underlines, boxes, strikes and crosses) that sketch themselves around words.
Installation
npx shadcn@latest add @glint-ui/text-modifierFirst time using @glint-ui? Add the registry to components.json once, or install by URL: npx shadcn@latest add https://glint-ui-seven.vercel.app/r/text-modifier.json
Usage
import { TextModifier } from "@/components/ui/text-modifier";
<p>Make it <TextModifier action="circle">pop</TextModifier>.</p>Props
| Prop | Type | Default | Description |
|---|---|---|---|
| children | ReactNode | — | The words to annotate. |
| action | "circle" | "underline" | "box" | "strike" | "cross" | "circle" | Annotation to draw. |
| color | string | "#fb7185" | Pen color. |
| strokeWidth | number | 3 | Pen width, in px. |
| padding | number | 8 | Space between the text and the annotation, in px. |
| duration | number | 900 | Draw duration, in ms. |
| delay | number | 0 | Delay after entering view, in ms. |
| seed | number | 3 | Changes the hand-drawn wobble. |
| className | string | — | Extra classes for the root element. |