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

Dependencies: clsx tailwind-merge

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

Prop	Type	Default
`animate`	`boolean` Draw once when entering view. Respects reduced-motion preferences.	`true`
`delay`	`number` Delay before drawing, in seconds.	`0`
`duration`	`number` Duration of each stroke, in seconds.	`0.65`
`children`	`ReactNode` The words to annotate. Keep it to a short phrase.	—
`variant`	`"wavy" \| "underline" \| "doubleUnderline" \| "dottedUnderline" \| "line" \| "arrow" \| "highlight" \| "circle" \| "box" \| "bracket" \| "strikethrough" \| "crossOut"` Which hand-drawn mark to draw around the text.	`"wavy"`
`color`	`string` Tailwind text color class for the mark, e.g. "text-rose-400". Defaults per variant.	—
`className`	`string` Additional classes applied to the wrapper span.	—

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

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>

Prop

Type

Default

animate

boolean

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

true

delay

number

Delay before drawing, in seconds.

0

duration

number

Duration of each stroke, in seconds.

0.65

children

ReactNode

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

—

variant

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

Which hand-drawn mark to draw around the text.

"wavy"

color

string

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

—

className

string

Additional classes applied to the wrapper span.

—