Sketch Border

A hand-drawn border that boils — redrawn a few times a second.

Hand drawn

Example.tsx

import { SketchBorder } from "@/components/better/sketch-border"

export function Example() {
  return (
    <SketchBorder color="#6366f1" strokeWidth={2} roughness={4} radius={10}>
      <span className="px-4 py-2 text-lg font-medium">Hand drawn</span>
    </SketchBorder>
  )
}

Dependencies

None — just React and Tailwind CSS.

Props

Prop	Type	Default	Description
children*	ReactNode	—
className	string	—
color	string	"currentColor"	Border color (any CSS color).
strokeWidth	number	2	Stroke thickness in px.
roughness	number	4	How wobbly the line is.
fps	number	4	Redraws (re-seeds) per second — the classic "line boil".
radius	number	10	Corner radius of the underlying rect.