byDefaultHuman
Primitives

RoughLine

Hand-drawn line primitive for dividers and axes.

Installation

package manager
npx shadcn add https://bydefaulthuman.fun/r/rough-line.json

Props

PropTypeDefaultDescription
className
string
—
Additional Tailwind classes applied to the component.
id
string
—
Controls the `id` behavior.
length
number
—
Sets the explicit line length.
orientation
"horizontal" | "vertical"
—
Controls the line direction.
stroke
string
—
Overrides the stroke color.
strokeWidth
number
—
Overrides the stroke width.
theme
CrumbleTheme
—
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 { RoughLine } from '@/components/crumble/primitives/rough-line'

<RoughLine orientation="horizontal" />