Painted Canvas
Painted canvas texture: three grain passes at overlay, soft-light and color-dodge, a diagonal cross-hatch that reads as pencil strokes, and faint horizontal striations, laid over your own ground.
pnpm dlx shadcn add @01orbital/painted-canvasThe 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 { PaintedCanvas } from "@/components/texture/painted-canvas"
import {
Card,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card"
/** A sized painted canvas surface with readable studio details. */
export default function PaintedCanvasDemo() {
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-[#e5b5a0] p-6 wrap-anywhere text-[#492b27] shadow-sm ring-1 ring-black/10 [--muted-foreground:#684138] sm:p-8">
<PaintedCanvas />
<CardHeader className="relative z-20 gap-6 px-0">
<p className="text-sm font-medium">Ochre House</p>
<div className="grid gap-1">
<CardTitle className="text-2xl/8 font-medium tracking-tight">
Isla Moreno
</CardTitle>
<CardDescription>Painter & printmaker</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>31 Foundry Road, Bristol</span>
<a
href="mailto:studio@ochrehouse.example"
className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
>
studio@ochrehouse.example
</a>
</CardFooter>
</Card>
</div>
)
}Examples
New
painted-canvas-studio-card
New
painted-canvas-workshop-invitation
New
painted-canvas-seasonal-menu
New
painted-canvas-field-note
New
painted-canvas-edition-cover
New
painted-canvas-order-receipt
New
painted-canvas-collection-label
New
painted-canvas-studio-letter
New
painted-canvas-quote-card
New
painted-canvas-day-programme
API reference
It accepts the HTML attributes of the element it renders.
Dependencies
npm: cn. The CLI installs them for you.
No other registry pieces.