Components
Sticky Note
A hand-drawn sticky note with a folded corner and five color variants.
Remember
Pick up milk on the way home.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/sticky-note.jsonProps
PropTypeDefaultDescription
animateOnHoverbooleantrueRedraws the sketch lines on hover.
colorStickyNoteColor"yellow"Overrides the main accent or stroke color.
idstring—
Optional stable id used for sketch seeding and accessibility.
rotatenumber0Controls the `rotate` behavior.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
titleReactNode—
Primary title content.
Colors
Yellow
Pink
Blue
Green
Orange
Rotated
Todo
Finish the design system docs.
Group of notes
Idea
Add dark mode.
Bug
Fix the nav menu.
Note
Ship by Friday.
Accessibility
StickyNote is a presentational container with no built-in semantics beyond its children. If the note is interactive, place real controls inside it instead of making the whole note a clickable surface.
Examples
import { StickyNote } from "@/components/crumble/ui/sticky-note";
<StickyNote title="Remember">Pick up milk on the way home.</StickyNote>;