Components
Card
A hand-drawn card container with an optional stacked paper effect.
Card title
Some content goes here.
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/card.jsonProps
PropTypeDefaultDescription
children*ReactNode—
Content rendered inside the component.
idstring—
Optional stable id used for sketch seeding and accessibility.
paddingnumber20Adds padding around the component content.
stackedbooleanfalseControls the `stacked` behavior.
styleCSSProperties—
Controls the `style` behavior.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
Stacked effect
Stacked card
Feels like a stack of paper.
With sub-components
Getting started
Install your first component.
Content goes here.
Custom stroke and fill
Blue tinted card
With Image
moments, 2025
Accessibility
This component preserves the semantics of the underlying native elements where applicable. Provide visible labels and nearby text when the sketch styling is only decorative reinforcement.
Examples
import { Card } from "@/components/crumble/ui/card";
<Card padding={20}>
<p className="font-medium">Card title</p>
<p className="mt-1 text-sm text-muted-foreground">Some content here.</p>
</Card>;