Primitives
RoughCircle
Hand-drawn circle primitive for badges and controls.
A
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/rough-circle.jsonProps
PropTypeDefaultDescription
childrenReactNode—
Content rendered inside the component.
classNamestring—
Additional Tailwind classes applied to the component.
diameter*number—
Sets the circle diameter in pixels.
fillstring—
Overrides the fill color.
idstring—
Controls the `id` behavior.
strokestring—
Overrides the stroke color.
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 { RoughCircle } from "@/components/crumble/primitives/rough-circle";
<RoughCircle diameter={72}>A</RoughCircle>;