Primitives
RoughArrow
Hand-drawn arrow primitive for callouts and diagrams.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/rough-arrow.jsonProps
PropTypeDefaultDescription
classNamestring—
Additional Tailwind classes applied to the component.
curvaturenumber—
Controls the bend amount.
heightnumber—
Sets the rendered height in pixels.
idstring—
Controls the `id` behavior.
strokestring—
Overrides the stroke color.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
widthnumber—
Sets the rendered width in pixels.
x1*number—
Starting X coordinate.
x2*number—
Ending X coordinate.
y1*number—
Starting Y coordinate.
y2*number—
Ending Y coordinate.
Accessibility
This primitive is primarily presentational. Keep the underlying content semantic and avoid relying on the sketch overlay alone to communicate meaning.
Examples
import { RoughArrow } from "@/components/crumble/primitives/rough-arrow";
<RoughArrow x1={12} y1={70} x2={180} y2={20} />;