Scribbled Text
Mark inline text with colorful hand-drawn annotations.
Features
- Includes twelve underline, highlight, enclosure, and cancellation marks.
- Inherits typography and text color from the surrounding content.
- Draws each annotation once when it enters the viewport.
Installation
pnpm dlx shadcn@latest add @tentui/scribbled-text
Usage
import { ScribbledText } from "@/components/scribbled-text";<p>
This detail is <ScribbledText variant="circle">important</ScribbledText>.
</p>Each phrase stays on one line so its mark remains aligned. Keep annotated phrases short enough to fit their container.
Customize the mark without changing the surrounding text styles.
<ScribbledText variant="arrowUnderline" scribbleClassName="text-rose-400">
Read the announcement
</ScribbledText>Render a complete mark without the drawing animation.
<ScribbledText variant="box" animated={false}>
Always visible
</ScribbledText>Accessibility
Scribble graphics are hidden from assistive technology, leaving the wrapped text
unchanged. The component is visual-only; use semantic elements such as mark or
del when the annotation conveys meaning.
With reduced motion enabled, every annotation renders complete without its drawing animation.
API reference
PropType
Examples
Use the variant prop to choose a hand-drawn mark.