Components
Scribble
Draw rough freehand scribbles over content for emphasis, redaction, or playful UI effects.
Scribbled text
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/scribble.jsonProps
PropTypeDefaultDescription
childrenReactNode—Content over which the scribble is drawn.
type"redact" | "scrawl" | "circle" | "blob""scrawl"Defines the scribble style: redaction block, cross-out scrawl, circle emphasis, or organic blob.
colorstring"currentColor"Color used for stroke and fill of the scribble.
opacitynumber0.85Controls transparency of the scribble overlay (affects fill and stroke).
paddingnumber4Extra spacing around the content for drawing the scribble.
themeCrumbleTheme—Visual style variant (e.g., roughness, stroke width) passed to the rough renderer.
idstringauto-generatedOptional stable identifier used to generate deterministic scribble shapes.
classNamestring—Additional CSS classes applied to the wrapper.
styleCSSProperties—Inline styles applied to the wrapper element.
Types
ScrawlRedactCircleBlob
Redaction
Sensitive content
Custom Color
Custom color
Opacity
Soft emphasis
Padding
Extra padding
In a Paragraph
This is a wrong idea that should be avoided.
Accessibility
Scribble is decorative and its SVG should not be the only place meaning lives. Keep the underlying content readable without the overlay and avoid using it to hide essential text.
Examples
import { Scribble } from "@/components/scribble";
<Scribble>
<span className="text-base font-medium">Scribbled text</span>
</Scribble>;