Primitives
RoughRect
Hand-drawn rectangle primitive for borders and containers.
Primitive container
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/rough-rect.jsonProps
PropTypeDefaultDescription
animateOnHoverboolean—
Redraws on hover.
childrenReactNode—
Content rendered inside the component.
classNamestring—
Additional Tailwind classes applied to the component.
fillstring—
Overrides the fill color.
idstring—
Controls the `id` behavior.
onClick() => void—
Controls the `onClick` behavior.
paddingnumber—
Adds padding around the content.
roundedboolean—
Controls the `rounded` behavior.
strokestring—
Overrides the stroke color.
styleCSSProperties—
Inline styles applied to the wrapper.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
Accessibility
This primitive is primarily presentational. Keep the underlying content semantic and avoid relying on the sketch overlay alone to communicate meaning.
Examples
import { RoughRect } from "@/components/crumble/primitives/rough-rect";
<RoughRect padding={20}>Primitive container</RoughRect>;