Annotated Text

Text 21

About

A span that draws a hand-sketched mark (underline, circle, highlight, box, bracket, strike, cross or arrow) on a word or phrase, plus sticker-style chips that can cycle through a list of words.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Annotated Text to your project and fits it to your theme.

Code

How Annotated Text is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {
  AnnotatedText,
  AnnotatedTextChip,
  AnnotatedTextCycle,
} from "@/components/ui/annotated-text";

export default function AnnotatedTextDemo() {
  return (
    <div className="flex min-h-[420px] w-full items-center justify-center bg-background p-10 text-foreground">
      <p className="max-w-xl text-center text-2xl leading-relaxed text-balance">
        Ship a <AnnotatedText variant="highlight">beautiful</AnnotatedText>{" "}
        design system without the{" "}
        <AnnotatedText variant="strike">headache</AnnotatedText> busywork of
        building one from{" "}
        <AnnotatedText variant="circle" tone="info">
          scratch
        </AnnotatedText>
        . Add a <AnnotatedTextChip icon="✨">sticker chip</AnnotatedTextChip>{" "}
        for the fun parts, or let a word{" "}
        <AnnotatedTextCycle
          items={[{ label: "cycle" }, { label: "rotate" }, { label: "change" }]}
        />{" "}
        on its own.
      </p>
    </div>
  );
}