Rice Paper Plate
Rice paper tile printed with a single mark: a pine, mulberry or straw wash with a grain-masked icon in matching ink under rice paper fibers. Decorative and hidden from assistive technology.
pnpm dlx shadcn add @01orbital/rice-paper-plateThe 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/cardThe example also imports @phosphor-icons/react from npm, which the install does not add:
pnpm add @phosphor-icons/reactnpm install @phosphor-icons/reactyarn add @phosphor-icons/reactbun add @phosphor-icons/reactUsage
import { LeafIcon } from "@phosphor-icons/react/dist/ssr"
import { RicePaperPlate } from "@/components/texture/rice-paper-plate"
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
/** A sized rice paper plate surface with readable studio details. */
export default function RicePaperPlateDemo() {
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-[#ece6d7] p-6 wrap-anywhere text-[#303c32] shadow-sm ring-1 ring-black/10 [--muted-foreground:#536052] sm:p-8">
<CardHeader className="relative z-20 gap-6 px-0">
<RicePaperPlate
tone="pine"
className="size-20 shrink-0 rounded-lg [&>span>*]:size-9"
>
<LeafIcon weight="regular" />
</RicePaperPlate>
<div className="grid gap-1">
<CardTitle className="text-2xl/8 font-medium tracking-tight">
Rae Morgan
</CardTitle>
<CardDescription>Program curator</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>19 Orchard Road, Lewes</span>
<a
href="mailto:hello@fieldhouse.example"
className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
>
hello@fieldhouse.example
</a>
</CardFooter>
</Card>
</div>
)
}Examples
New
rice-paper-plate-studio-card
New
rice-paper-plate-workshop-invitation
New
rice-paper-plate-seasonal-menu
New
rice-paper-plate-field-note
New
rice-paper-plate-edition-cover
New
rice-paper-plate-order-receipt
New
rice-paper-plate-collection-label
New
rice-paper-plate-studio-letter
New
rice-paper-plate-quote-card
New
rice-paper-plate-day-programme
API reference
Prop
Type
It also accepts the HTML attributes of the element it renders.
Dependencies
npm: cn. The CLI installs them for you.
Registry pieces it installs with it: