DocsAnnotated Text

Annotated Text

Inline text marked up by hand: circles, highlighter, underlines, brackets and cross-outs, with gently irregular strokes that draw themselves as they enter view.

Installation

pnpm dlx shadcn@latest add @componentry/annotated-text

Usage

import { AnnotatedText } from "@/components/ui/annotated-text"

<div className="grid grid-cols-2 items-center justify-items-center gap-x-8 gap-y-7 text-base sm:gap-x-16 sm:gap-y-12 sm:text-xl">
  <AnnotatedText variant="wavy" delay={0.0}>wavy</AnnotatedText>
  <AnnotatedText variant="underline" delay={0.08}>underline</AnnotatedText>
  <AnnotatedText variant="doubleUnderline" delay={0.16}>doubleUnderline</AnnotatedText>
  <AnnotatedText variant="dottedUnderline" delay={0.24}>dottedUnderline</AnnotatedText>
  <AnnotatedText variant="line" delay={0.32}>line</AnnotatedText>
  <AnnotatedText variant="arrow" delay={0.4}>arrow</AnnotatedText>
  <AnnotatedText variant="highlight" delay={0.48}>highlight</AnnotatedText>
  <AnnotatedText variant="circle" delay={0.56}>circle</AnnotatedText>
  <AnnotatedText variant="box" delay={0.64}>box</AnnotatedText>
  <AnnotatedText variant="bracket" delay={0.72}>bracket</AnnotatedText>
  <AnnotatedText variant="strikethrough" delay={0.8}>strikethrough</AnnotatedText>
  <AnnotatedText variant="crossOut" delay={0.88}>crossOut</AnnotatedText>
</div>

API Reference

PropertyTypeDefault
animate

Draw once when entering view. Respects reduced-motion preferences.

booleantrue
delay

Delay before drawing, in seconds.

number0
duration

Duration of each stroke, in seconds.

number0.65
children

The words to annotate. Keep it to a short phrase.

ReactNode—
variant

Which hand-drawn mark to draw around the text.

"wavy" | "underline" | "doubleUnderline" | "dottedUnderline" | "line" | "arrow" | "highlight" | "circle" | "box" | "bracket" | "strikethrough" | "crossOut""wavy"
color

Tailwind text color class for the mark, e.g. "text-rose-400". Defaults per variant.

string—
className

Additional classes applied to the wrapper span.

string—

View source

Click the icon in the preview panel to browse source for each variant.

Keep in mind

This component is inspired by various open-source projects and patterns. Please verify licenses and implementation details before using in production.

Need a custom component?

I build bespoke UI components & websites tailored to your brand.

DM me on X
wavyunderlinedoubleUnderlinedottedUnderlinelinearrowhighlightcircleboxbracketstrikethroughcrossOut