Bamboo Paper Sheet
Bamboo paper texture: a surface that wraps its children and paints a warm wash, two grain scales, horizontal and vertical fiber lines, cloud mottling and a darkened edge over them. Lift text above it with a z-index.
pnpm dlx shadcn add @01orbital/bamboo-paper-sheetThe source comes with full access.
One payment of $149 opens the source right here and lets the CLI install every paid component, with lifetime updates.
Usage
import { BambooPaperSheet } from "@/components/texture/bamboo-paper-sheet"
const COPY = {
studio: "Reed & Stem",
edition: "Field notes / 003",
title: "Notice the",
titleEnd: "small things.",
note: "A few observations from the garden, gathered slowly and kept for another season.",
location: "Oakland, California",
season: "Fall 2026",
} as const
/** A field-note sheet with open paper around its title, note and imprint. */
export default function BambooPaperSheetDemo() {
return (
<div className="flex w-full items-center justify-center p-5 sm:p-8">
<BambooPaperSheet className="@container/paper isolate w-full max-w-xl rounded-sm bg-card text-card-foreground shadow-lg ring-1 ring-border">
<article className="relative z-20 p-6 sm:p-10">
<header className="flex flex-wrap items-baseline justify-between gap-x-6 gap-y-2 border-b border-current/25 pb-5">
<p className="text-sm font-semibold tracking-tight">
{COPY.studio}
</p>
<p className="text-[11px]/5 tracking-[0.14em] uppercase">
{COPY.edition}
</p>
</header>
<div className="py-12 sm:py-14">
<h2 className="text-[clamp(1.75rem,10cqi,3.5rem)] leading-[1.05] font-medium tracking-[-0.045em]">
{COPY.title}
<br />
{COPY.titleEnd}
</h2>
<p className="mt-6 max-w-sm text-base/7 text-pretty">{COPY.note}</p>
</div>
<footer className="flex flex-wrap justify-between gap-x-6 gap-y-2 border-t border-current/25 pt-5 text-xs/5">
<span>{COPY.location}</span>
<span>{COPY.season}</span>
</footer>
</article>
</BambooPaperSheet>
</div>
)
}Examples
New
bamboo-paper-sheet-studio-card
New
bamboo-paper-sheet-workshop-invitation
New
bamboo-paper-sheet-seasonal-menu
New
bamboo-paper-sheet-field-note
New
bamboo-paper-sheet-edition-cover
New
bamboo-paper-sheet-order-receipt
New
bamboo-paper-sheet-collection-label
New
bamboo-paper-sheet-studio-letter
New
bamboo-paper-sheet-quote-card
New
bamboo-paper-sheet-day-programme
Anatomy
Bamboo Paper Sheet is built from 2 parts. In the example they nest like this:
BambooPaperSheetAPI reference
BambooPaperSheet
It accepts the HTML attributes of the element it renders.
BambooPaperOverlay
Dependencies
npm: cn. The CLI installs them for you.
No other registry pieces.