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" />