Components
Annotation
Wrap any element with a hand-drawn annotation that draws itself on mount.
Basic
Annotated text
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/annotation.jsonProps
PropTypeDefaultDescription
animatebooleantrueControls the `animate` behavior.
animationDelaynumber0Animation delay in milliseconds.
animationDurationnumber—
Animation duration in milliseconds.
bracketsBracketSide | BracketSide[]—
Bracket sides drawn when using bracket annotations.
colorstring"currentColor"Overrides the main accent or stroke color.
iterationsnumber—
Number of sketch passes used by the annotation.
labelReactNode—
Optional label text shown with the component.
labelSideAnnotationSide"top"Controls the `labelSide` behavior.
multilinebooleanfalseHandles wrapped text as multiple annotation lines.
paddingnumber | [number, number] | [number, number, number, number]5Adds padding around the component content.
showboolean—
Controls the `show` behavior.
strokeWidthnumber—
Controls the `strokeWidth` behavior.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
triggerAnnotationTrigger"inView" | "hover" | "mount".Controls when the annotation is shown.
typeAnnotationType—
Controls the visual variant or drawing style.
Types
BoxCircleUnderlineHighlightStrikeCrossedBracket
Labels
Key featureImportant
Trigger: Hover
Hover me
Trigger: In View
Scroll into view
Animation Control
Slow animation
Disable Animation
Static annotation
Multiline
This is a long text that wraps across multiple lines and still gets annotated correctly.
Custom Color
Coral box
In a Paragraph
The most
important thing
is to ship.
Accessibility
Annotation adds emphasis around existing text but does not change the underlying semantics. Do not use the annotation stroke as the only way to communicate importance or status.
Examples
import { Annotation } from "@/components/crumble/ui/annotation";
<Annotation type="box">
<span className="text-base font-medium">Annotated text</span>
</Annotation>;