Rice Paper
Rice paper texture: fibers and grain with a pale wash, two grain scales, off-axis fiber lines and two cloud mottles, each blending with the background beneath. Place inside a positioned, clipped surface.
pnpm dlx shadcn add @01orbital/rice-paperThe 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.
The example also uses card. Install it too:
pnpm dlx shadcn add @01orbital/cardnpx shadcn add @01orbital/cardyarn shadcn add @01orbital/cardbunx --bun shadcn add @01orbital/cardUsage
import { RicePaper } from "@/components/texture/rice-paper"
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
/** A sized rice paper surface with readable studio details. */
export default function RicePaperDemo() {
return (
<div className="flex min-h-full w-full flex-1 items-center justify-center p-4 sm:p-8">
<Card className="relative isolate w-full max-w-sm gap-6 overflow-hidden rounded-xl bg-[#dce2ca] p-6 wrap-anywhere text-[#283d31] shadow-sm ring-1 ring-black/10 [--muted-foreground:#475f4d] sm:p-8">
<RicePaper />
<CardHeader className="relative z-20 gap-6 px-0">
<p className="text-sm font-medium">Mizu House</p>
<div className="grid gap-1">
<CardTitle className="text-2xl/8 font-medium tracking-tight">
Hana Ito
</CardTitle>
<CardDescription>Ceramic artist</CardDescription>
</div>
</CardHeader>
<CardFooter className="relative z-20 flex-wrap justify-between gap-3 border-t border-current/20 px-0 pt-5 text-xs/5">
<span>6 River Walk, York</span>
<a
href="mailto:hello@mizuhouse.example"
className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
>
hello@mizuhouse.example
</a>
</CardFooter>
</Card>
</div>
)
}Examples
New
rice-paper-studio-card
New
rice-paper-workshop-invitation
New
rice-paper-seasonal-menu
New
rice-paper-field-note
New
rice-paper-edition-cover
New
rice-paper-order-receipt
New
rice-paper-collection-label
New
rice-paper-studio-letter
New
rice-paper-quote-card
New
rice-paper-day-programme
API reference
Prop
Type
Dependencies
npm: cn. The CLI installs them for you.
No other registry pieces.