Primitives
RoughHighlight
Wrap any text with a hand-drawn annotation.
This is
highlighted
text with a rough annotation.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/rough-highlight.jsonProps
PropTypeDefaultDescription
animateboolean—
Controls the `animate` behavior.
animationDurationnumber—
Controls the `animationDuration` behavior.
children*ReactNode—
Content rendered inside the component.
classNamestring—
Additional Tailwind classes applied to the component.
colorstring—
Overrides the sketch color.
idstring—
Controls the `id` behavior.
opacitynumber—
Controls the SVG opacity.
styleCSSProperties—
Inline styles applied to the wrapper.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
typeHighlightType—
Controls the visual variant.
All types
Underline
Box
Circle
Highlight
Accessibility
This primitive is primarily presentational. Keep the underlying content semantic and avoid relying on the sketch overlay alone to communicate meaning.
Examples
import { RoughHighlight } from "@/components/crumble/primitives/rough-highlight";
<p>
This is{" "}
<RoughHighlight type="highlight" color="#fbbf24">
highlighted
</RoughHighlight>{" "}
text.
</p>;