Components
Notebook
A hand-drawn lined paper container with ruled lines and a red margin.
Dear diary,
Today I shipped the design system.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/notebook.jsonProps
PropTypeDefaultDescription
idstring—
Optional stable id used for sketch seeding and accessibility.
lineColorstring—
Overrides the notebook line color.
lineSpacingnumber24Controls the spacing between notebook lines.
marginColorstring—
Overrides the notebook margin color.
showMarginbooleantrueShows the notebook margin line.
themeCrumbleTheme== "ink"Overrides the global Crumble theme for this instance.
Without margin
No red margin line.
Just ruled lines.
Custom line spacing
Wider ruled lines.
More breathing room between lines.
As a card
Meeting notes
Discussed Q3 roadmap and priorities.
Follow up with design team on Monday.
Accessibility
Notebook is a decorative layout primitive. The ruled lines and margin are visual only, so all meaningful content must remain readable in the text children themselves.
Examples
import { Notebook } from "@/components/crumble/ui/notebook";
<Notebook>
<p>Dear diary,</p>
<p>Today I shipped the design system.</p>
</Notebook>;