Tooth Grain: React Texture component

Paper tooth grain texture: a single-octave noise tile at overlay blend, so a surface reads as fine paper without clumping into a pattern. Intensity steps or an exact opacity; full-bleed in a relative parent.

pnpm dlx shadcn add @01orbital/tooth-grain

File

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/** A sized tooth surface with readable studio details. */
export default function ToothDemo() {
  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-[#d8c7b6] p-6 wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--muted-foreground:#605248] sm:p-8">
        <ToothGrain intensity="rich" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">West Drawing Room</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Jules Bennett
            </CardTitle>
            <CardDescription>Artist & drawing tutor</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>3 West Arcade, Exeter</span>
          <a
            href="mailto:hello@westdrawing.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@westdrawing.example
          </a>
        </CardFooter>
      </Card>
    </div>
  )
}

The example also uses card. Install it too:

pnpm dlx shadcn add @01orbital/card

npx shadcn add @01orbital/card

yarn shadcn add @01orbital/card

bunx --bun shadcn add @01orbital/card

Usage

import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/** A sized tooth surface with readable studio details. */
export default function ToothDemo() {
  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-[#d8c7b6] p-6 wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--muted-foreground:#605248] sm:p-8">
        <ToothGrain intensity="rich" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">West Drawing Room</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Jules Bennett
            </CardTitle>
            <CardDescription>Artist & drawing tutor</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>3 West Arcade, Exeter</span>
          <a
            href="mailto:hello@westdrawing.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@westdrawing.example
          </a>
        </CardFooter>
      </Card>
    </div>
  )
}

Examples

New

tooth-grain-studio-card

Tooth · Studio card

Tooth grain texture example: a contact card on buff drawing paper with an artist and tutor's name, an Exeter address and an email link. Use it for a studio or business card.

pnpm dlx shadcn add @01orbital/tooth-grain-studio-card

npx shadcn add @01orbital/tooth-grain-studio-card

yarn shadcn add @01orbital/tooth-grain-studio-card

bunx --bun shadcn add @01orbital/tooth-grain-studio-card

File

import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  organization: "West Drawing Room",
  title: "Jeanette Epps",
  description: "Artist & drawing tutor",
  address: "3 West Arcade, Exeter",
  email: "hello@westdrawing.example",
} as const

/** A textured studio contact card with a compact identity and an email link. */
export default function ToothStudioCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d8c7b6] wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#605248] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="rich" />
      <CardHeader className="relative z-20 gap-6">
        <p className="text-sm font-medium">{COPY.organization}</p>
        <div className="grid gap-1">
          <CardTitle className="text-2xl/8 font-medium tracking-tight">
            {COPY.title}
          </CardTitle>
          <CardDescription>{COPY.description}</CardDescription>
        </div>
      </CardHeader>
      <CardFooter className="relative z-20 flex-wrap justify-between gap-3 border-t border-current/20 text-xs/5">
        <span>{COPY.address}</span>
        <a
          href="mailto:hello@westdrawing.example"
          className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
        >
          {COPY.email}
        </a>
      </CardFooter>
    </Card>
  )
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-workshop-invitation

Tooth · Workshop invitation

Tooth · Workshop invitation: an example of tooth-grain.

pnpm dlx shadcn add @01orbital/tooth-grain-workshop-invitation

npx shadcn add @01orbital/tooth-grain-workshop-invitation

yarn shadcn add @01orbital/tooth-grain-workshop-invitation

bunx --bun shadcn add @01orbital/tooth-grain-workshop-invitation

File

import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "West Drawing Room / Workshop",
  title: "Light, shade and charcoal",
  description:
    "Work from a simple still life and explore tone, edges and the grain of the paper.",
  day: "14",
  month: "November 2026",
  time: "Saturday, 14:00–17:00",
  venue: "3 West Arcade, Exeter",
  places: "8 places · Materials included",
  price: "£45 per person",
} as const

/** A workshop invitation with a large date, a short introduction and booking details. */
export default function ToothWorkshopInvitation() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#d8c7b6] wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#605248] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="fine" />
      <CardHeader className="relative z-20 gap-5">
        <p className="text-sm">{COPY.eyebrow}</p>
        <CardTitle className="font-display text-4xl/10 font-normal">
          {COPY.title}
        </CardTitle>
        <CardDescription className="text-base/7">
          {COPY.description}
        </CardDescription>
      </CardHeader>
      <CardContent className="relative z-20 flex flex-wrap items-center gap-5 border-y border-current/20 py-5">
        <p className="text-5xl/none font-light tabular-nums">{COPY.day}</p>
        <p className="min-w-0 flex-[1_1_10rem] text-sm/6">
          {COPY.month}
          <br />
          {COPY.time}
          <br />
          {COPY.venue}
        </p>
      </CardContent>
      <CardFooter className="relative z-20 flex-wrap justify-between gap-2 text-sm/6">
        <span>{COPY.places}</span>
        <span>{COPY.price}</span>
      </CardFooter>
    </Card>
  )
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-seasonal-menu

Tooth · Seasonal menu

Tooth grain texture example: a lunch menu on ivory paper with a light tooth, aligned prices and an allergy note. Use it for a cafe or restaurant menu.

pnpm dlx shadcn add @01orbital/tooth-grain-seasonal-menu

npx shadcn add @01orbital/tooth-grain-seasonal-menu

yarn shadcn add @01orbital/tooth-grain-seasonal-menu

bunx --bun shadcn add @01orbital/tooth-grain-seasonal-menu

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "West Drawing Room",
  title: "At the table",
  description: "Lunch, Thursday to Sunday · 12:00–15:00",
  note: "Please tell us about any allergies before ordering.",
} as const

const DISHES = [
  { name: "Celeriac soup", price: "£7" },
  { name: "Welsh rarebit", price: "£12" },
  { name: "Pear & almond tart", price: "£6" },
] as const

/** A seasonal menu with aligned prices and a clear note about dietary requirements. */
export default function ToothSeasonalMenu() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#f3ede0] wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#605248] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="default" />
      <CardHeader className="relative z-20 gap-2 border-b border-current/20">
        <p className="text-sm">{COPY.eyebrow}</p>
        <CardTitle className="text-2xl/8 font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20">
        <DescriptionList className="gap-y-5">
          {DISHES.map((dish) => (
            <DescriptionListItem key={dish.name}>
              <DescriptionListTerm className="text-current">
                {dish.name}
              </DescriptionListTerm>
              <DescriptionListDetails className="text-current tabular-nums">
                {dish.price}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
      </CardContent>
      <CardFooter className="relative z-20 border-t border-current/20 text-xs/5">
        {COPY.note}
      </CardFooter>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-field-note

Tooth · Field note

Tooth grain texture example: a dated note on buff drawing paper about soft charcoal catching on the sheet, with a list for the next visit. Use it for a studio journal entry.

pnpm dlx shadcn add @01orbital/tooth-grain-field-note

npx shadcn add @01orbital/tooth-grain-field-note

yarn shadcn add @01orbital/tooth-grain-field-note

bunx --bun shadcn add @01orbital/tooth-grain-field-note

File

import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Working notes",
  description: "West Drawing Room",
  dateLabel: "7 Nov 2026",
  observation:
    "The soft charcoal catches on this sheet. Keep the first light marks visible.",
  listTitle: "For next time",
  todo: [
    "Photograph the finished study in daylight.",
    "Keep a sample with the date and materials.",
    "Bring the original to the next studio session.",
  ],
} as const

/** A dated field note with a short observation and a list for the next visit. */
export default function ToothFieldNote() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#d8c7b6] wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#605248] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="rich" />
      <CardHeader className="relative z-20 flex flex-wrap items-start justify-between gap-4">
        <div className="grid gap-1">
          <CardTitle className="text-xl/7">{COPY.title}</CardTitle>
          <CardDescription>{COPY.description}</CardDescription>
        </div>
        <time dateTime="2026-11-07" className="text-xs/5">
          {COPY.dateLabel}
        </time>
      </CardHeader>
      <CardContent className="relative z-20 grid gap-6">
        <p className="text-base/7">{COPY.observation}</p>
        <div className="grid gap-2">
          <p className="text-sm font-medium">{COPY.listTitle}</p>
          <ul className="list-disc space-y-2 pl-4 text-sm/6">
            {COPY.todo.map((item) => (
              <li key={item}>{item}</li>
            ))}
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-edition-cover

Tooth · Edition cover

Tooth grain texture example: a dark umber cover with fine paper tooth, a large issue number and the title Looking, then drawing. Use it for a sketchbook or course cover.

pnpm dlx shadcn add @01orbital/tooth-grain-edition-cover

npx shadcn add @01orbital/tooth-grain-edition-cover

yarn shadcn add @01orbital/tooth-grain-edition-cover

bunx --bun shadcn add @01orbital/tooth-grain-edition-cover

File

import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  publisher: "West Drawing Room",
  edition: "Studio edition",
  issue: "04",
  title: "Looking, then drawing",
  season: "Autumn / Winter 2026",
  run: "Limited edition · 48 pages",
} as const

/** An editorial cover with a large issue number and a restrained title block. */
export default function ToothEditionCover() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#352e2b] wrap-anywhere text-[#f7f0df] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#dcd2bc] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="fine" />
      <CardHeader className="relative z-20 flex flex-wrap items-start justify-between gap-4">
        <p className="text-sm/6">{COPY.publisher}</p>
        <span className="text-xs/6">{COPY.edition}</span>
      </CardHeader>
      <CardContent className="relative z-20 grid min-h-64 content-between gap-10 pt-4">
        <p className="text-8xl/none font-light tracking-tight tabular-nums">
          {COPY.issue}
        </p>
        <CardTitle className="font-display text-4xl/10 font-normal">
          {COPY.title}
        </CardTitle>
      </CardContent>
      <CardFooter className="relative z-20 flex-wrap justify-between gap-2 border-t border-current/25 text-xs/5">
        <span>{COPY.season}</span>
        <span>{COPY.run}</span>
      </CardFooter>
    </Card>
  )
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-order-receipt

Tooth · Order receipt

Tooth grain texture example: an itemized order on buff paper with a toothy grain, a paid total and a pickup note from a drawing school. Use it for a shop receipt.

pnpm dlx shadcn add @01orbital/tooth-grain-order-receipt

npx shadcn add @01orbital/tooth-grain-order-receipt

yarn shadcn add @01orbital/tooth-grain-order-receipt

bunx --bun shadcn add @01orbital/tooth-grain-order-receipt

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "West Drawing Room",
  description: "Order 0148 · 7 November 2026",
  total: "Paid",
  totalAmount: "£48.00",
  pickup: "Ready to collect from the studio. Please bring your order number.",
  thanks: "Thank you for supporting an independent studio.",
} as const

const ITEMS = [
  { name: "1 × Studio notebook", price: "£12.00" },
  { name: "2 × A5 art print", price: "£36.00" },
] as const

/** An itemised print order with a paid total and a collection note. */
export default function ToothOrderReceipt() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#d8c7b6] wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#605248] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="default" />
      <CardHeader className="relative z-20 gap-2 border-b border-dashed border-current/40">
        <CardTitle className="text-xl/7">{COPY.title}</CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20 grid gap-5">
        <DescriptionList>
          {ITEMS.map((item) => (
            <DescriptionListItem key={item.name}>
              <DescriptionListTerm className="text-current">
                {item.name}
              </DescriptionListTerm>
              <DescriptionListDetails className="text-current tabular-nums">
                {item.price}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
          <DescriptionListItem className="border-t border-current/25 pt-3 font-medium">
            <DescriptionListTerm className="text-current">
              {COPY.total}
            </DescriptionListTerm>
            <DescriptionListDetails className="text-current">
              {COPY.totalAmount}
            </DescriptionListDetails>
          </DescriptionListItem>
        </DescriptionList>
        <p className="text-xs/6">{COPY.pickup}</p>
      </CardContent>
      <CardFooter className="relative z-20 border-t border-dashed border-current/40 text-xs/5">
        {COPY.thanks}
      </CardFooter>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-collection-label

Tooth · Collection label

Tooth · Collection label: an example of tooth-grain.

pnpm dlx shadcn add @01orbital/tooth-grain-collection-label

npx shadcn add @01orbital/tooth-grain-collection-label

yarn shadcn add @01orbital/tooth-grain-collection-label

bunx --bun shadcn add @01orbital/tooth-grain-collection-label

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "West Drawing Room / Study collection",
  title: "Study in November",
  description: "Jeanette Epps, 2026",
} as const

const DETAILS = [
  { term: "Material", value: "Ink on uncoated paper", mono: false },
  { term: "Dimensions", value: "210 × 297 mm", mono: false },
  { term: "Edition", value: "12 of 50", mono: false },
  { term: "Reference", value: "ST-2026-014", mono: true },
] as const

/** A collection label with the edition, material and dimensions in a definition list. */
export default function ToothCollectionLabel() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d7d9d1] wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#605248] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="rich" />
      <CardHeader className="relative z-20 gap-4">
        <p className="text-xs/5">{COPY.eyebrow}</p>
        <CardTitle className="text-2xl/8 font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20 border-t border-current/25 pt-5">
        <DescriptionList>
          {DETAILS.map((detail) => (
            <DescriptionListItem key={detail.term}>
              <DescriptionListTerm className="text-current">
                {detail.term}
              </DescriptionListTerm>
              <DescriptionListDetails
                className={
                  detail.mono
                    ? "font-mono text-xs/6 text-current"
                    : "text-current"
                }
              >
                {detail.value}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
      </CardContent>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-studio-letter

Tooth · Studio letter

Tooth grain texture example: a short letter on buff drawing paper with an inset address line, two paragraphs and a signature. Use it for a customer note or follow-up.

pnpm dlx shadcn add @01orbital/tooth-grain-studio-letter

npx shadcn add @01orbital/tooth-grain-studio-letter

yarn shadcn add @01orbital/tooth-grain-studio-letter

bunx --bun shadcn add @01orbital/tooth-grain-studio-letter

File

import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "West Drawing Room",
  description: "3 West Arcade, Exeter",
  date: "7 November 2026",
  greeting: "Dear Robin,",
  paragraphs: [
    "Thank you for visiting the studio last week. I have set aside the small edition we looked at together.",
    "The new work will be ready to see in December. I will send you a note when the doors are open.",
  ],
  closing: "Warm wishes,",
  signature: "Jeanette Epps",
} as const

/** A short studio letter with an inset address line and a clear signature. */
export default function ToothStudioLetter() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#d8c7b6] wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#605248] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="fine" />
      <CardHeader className="relative z-20 gap-6 border-b border-current/25">
        <CardTitle className="font-display text-4xl/10 font-normal">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20 grid gap-4 text-sm/7">
        <p className="text-xs/6">{COPY.date}</p>
        <p>{COPY.greeting}</p>
        {COPY.paragraphs.map((paragraph) => (
          <p key={paragraph}>{paragraph}</p>
        ))}
        <p>
          {COPY.closing}
          <br />
          <span className="font-medium">{COPY.signature}</span>
        </p>
      </CardContent>
    </Card>
  )
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-quote-card

Tooth · Quote card

Tooth grain texture example: a quotation about drawing as attention, set in cream ink on a dark umber toothed ground, with an artist credit. Use it for a testimonial.

pnpm dlx shadcn add @01orbital/tooth-grain-quote-card

npx shadcn add @01orbital/tooth-grain-quote-card

yarn shadcn add @01orbital/tooth-grain-quote-card

bunx --bun shadcn add @01orbital/tooth-grain-quote-card

File

import {
  Byline,
  BylineDescription,
  BylineName,
} from "@/components/byline/byline"
import { ToothGrain } from "@/components/texture/tooth-grain"
import { Card, CardContent } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "West Drawing Room",
  quote: "“Drawing is a way of paying attention.”",
  author: "Jeanette Epps",
  role: "Artist & drawing tutor",
} as const

/** A quotation on a colored material surface with a small author credit. */
export default function ToothQuoteCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#352e2b] wrap-anywhere text-[#f7f0df] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#dcd2bc] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="default" />
      <CardContent className="relative z-20 grid min-h-64 content-between gap-8">
        <p className="text-sm">{COPY.eyebrow}</p>
        <figure className="grid gap-6">
          <blockquote className="text-2xl/9 font-medium tracking-tight">
            {COPY.quote}
          </blockquote>
          <Byline render={<figcaption />}>
            <BylineName className="text-sm/6 font-normal">
              {COPY.author}
            </BylineName>
            <BylineDescription>{COPY.role}</BylineDescription>
          </Byline>
        </figure>
      </CardContent>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cn } from "cn"

type BylineSize = "md" | "sm"
type BylineState = { slot: "byline"; size: BylineSize }
type BylineAvatarState = { slot: "byline-avatar" }

/**
 * A person's byline: an optional `BylineAvatar`, then `BylineName` with a
 * `BylineDescription` under it, as a `div`. With an avatar it becomes two
 * columns: the avatar spans both lines, 16px from the text. Under a quote,
 * pass `render={<figcaption />}`; in a centered quote add `w-fit text-left` so it shrinks to fit
 * and keeps its text left-aligned.
 *
 * At `size="md"` (the default) the name is 16px/24px semibold and the
 * description 14px/20px muted, 2px apart; a 40px avatar matches the two
 * lines. At `size="sm"` both lines are 12px/20px, the name in regular weight,
 * the byline of a card footer.
 */
function Byline({
  className,
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"div", BylineState> & {
  /** The type size: `md` (the default) 16px over 14px, `sm` 12px over 12px for a card footer. */
  size?: BylineSize
}) {
  return useRender({
    defaultTagName: "div",
    render,
    state: { slot: "byline", size },
    props: mergeProps<"div">(
      {
        className: cn(
          "group/byline grid items-center gap-x-4 gap-y-0.5 text-sm/5 has-data-[slot=byline-avatar]:grid-cols-[auto_1fr] data-[size=sm]:text-xs/5",
          className
        ),
      },
      props
    ),
  })
}

/**
 * Holds the person's picture beside the name and description: a stock
 * `Avatar`, an orb avatar or an image, 40px recommended. Use
 * `render={<div />}` when the artwork has a block root.
 */
function BylineAvatar({
  className,
  render,
  ...props
}: useRender.ComponentProps<"span", BylineAvatarState>) {
  return useRender({
    defaultTagName: "span",
    render,
    state: { slot: "byline-avatar" },
    props: mergeProps<"span">(
      { className: cn("row-span-2 flex", className) },
      props
    ),
  })
}

/** The person's name, 16px/24px semibold, held close to the line below; 12px regular in a `sm` byline. */
function BylineName({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="byline-name"
      className={cn(
        "self-end text-base/6 font-semibold group-data-[size=sm]/byline:text-xs/5 group-data-[size=sm]/byline:font-normal",
        className
      )}
      {...props}
    />
  )
}

/**
 * The second line under the name, such as a job title, a company, a handle
 * or a date, in 14px/20px muted text; 12px in a `sm` byline.
 */
function BylineDescription({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      data-slot="byline-description"
      className={cn("self-start text-muted-foreground", className)}
      {...props}
    />
  )
}

export { Byline, BylineAvatar, BylineName, BylineDescription }

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

New

tooth-grain-day-programme

Tooth · Day program

Tooth grain texture example: a one-day charcoal drawing program on buff paper with a visible tooth, times aligned beside each session. Use it for an art class schedule.

pnpm dlx shadcn add @01orbital/tooth-grain-day-programme

npx shadcn add @01orbital/tooth-grain-day-programme

yarn shadcn add @01orbital/tooth-grain-day-programme

bunx --bun shadcn add @01orbital/tooth-grain-day-programme

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { ToothGrain } from "@/components/texture/tooth-grain"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "West Drawing Room",
  title: "A day in the studio",
  description: "Saturday 14 November · Charcoal drawing",
} as const

const SESSIONS = [
  { time: "10:00", label: "Coffee and introductions" },
  { time: "10:30", label: "Materials and a short demonstration" },
  { time: "11:15", label: "Time to make your own study" },
  { time: "13:00", label: "Lunch at the long table" },
] as const

/** A one-day program with times aligned beside their session descriptions. */
export default function ToothDayProgramme() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d8c7b6] wrap-anywhere text-[#352e2b] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#605248] sm:[--card-spacing:--spacing(8)]">
      <ToothGrain intensity="rich" />
      <CardHeader className="relative z-20 gap-2">
        <p className="text-sm">{COPY.eyebrow}</p>
        <CardTitle className="text-2xl/8 font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20">
        <DescriptionList variant="divided" className="divide-current/20">
          {SESSIONS.map((session) => (
            <DescriptionListItem
              key={session.time}
              className="justify-start gap-x-5 py-4"
            >
              <DescriptionListTerm className="text-current tabular-nums">
                {session.time}
              </DescriptionListTerm>
              <DescriptionListDetails className="flex-1 text-current">
                {session.label}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
      </CardContent>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// Label and value rows: order details, specifications, account information.
// divided rules a line between rows; default spaces them on a gap.
const descriptionListVariants = cva("group/description-list text-sm/6", {
  variants: {
    variant: {
      default: "grid gap-3",
      divided: "divide-y divide-border",
    },
  },
  defaultVariants: { variant: "default" },
})

function DescriptionList({
  className,
  variant = "default",
  ...props
}: ComponentProps<"dl"> & VariantProps<typeof descriptionListVariants>) {
  return (
    <dl
      data-slot="description-list"
      data-variant={variant}
      className={cn(descriptionListVariants({ variant }), className)}
      {...props}
    />
  )
}

// One term and its details on a line, on a shared baseline; a long value
// wraps under its term. In a divided list the item pads its own row.
function DescriptionListItem({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="description-list-item"
      className={cn(
        "flex flex-wrap items-baseline justify-between gap-x-4 gap-y-1 group-data-[variant=divided]/description-list:py-3 group-data-[variant=divided]/description-list:first:pt-0 group-data-[variant=divided]/description-list:last:pb-0",
        className
      )}
      {...props}
    />
  )
}

function DescriptionListTerm({ className, ...props }: ComponentProps<"dt">) {
  return (
    <dt
      data-slot="description-list-term"
      className={cn("text-muted-foreground", className)}
      {...props}
    />
  )
}

function DescriptionListDetails({ className, ...props }: ComponentProps<"dd">) {
  return (
    <dd
      data-slot="description-list-details"
      className={cn(
        "flex min-w-0 items-center gap-2 wrap-anywhere text-foreground tabular-nums",
        className
      )}
      {...props}
    />
  )
}

export {
  DescriptionList,
  DescriptionListItem,
  DescriptionListTerm,
  DescriptionListDetails,
}

// Paper tooth: one octave, so it never clumps into a pattern; 250px tile at
// overlay. Absolutely positioned child — the parent needs `relative`.
import { cn } from "cn"

type Intensity = "fine" | "default" | "rich"

// The intensity steps; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const NOISE = `data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E`

function ToothGrain({
  intensity = "default",
  // Exact opacity. Overrides intensity.
  opacity,
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  intensity?: Intensity
  opacity?: number
}) {
  return (
    <div
      aria-hidden="true"
      data-slot="tooth-grain"
      className={cn(
        "pointer-events-none absolute inset-0 mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: `url("${NOISE}")`,
        opacity: opacity ?? 0.2 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { ToothGrain }

API reference

Prop

Type

It also accepts the HTML attributes of the element it renders.

Tooth Grain

Usage

Examples

New

Tooth · Studio card

New

Tooth · Workshop invitation

New

Tooth · Seasonal menu

New

Tooth · Field note

New

Tooth · Edition cover

New

Tooth · Order receipt

New

Tooth · Collection label

New

Tooth · Studio letter

New

Tooth · Quote card

New

Tooth · Day program

API reference

Dependencies

Bamboo Paper Sheet

Cascade Lines

Grain

Linen

Painted Canvas

Paper

Tooth Grain

UsageCopy Anchor Link

ExamplesCopy Anchor Link

Tooth · Studio cardNew

Tooth · Workshop invitationNew

Tooth · Seasonal menuNew

Tooth · Field noteNew

Tooth · Edition coverNew

Tooth · Order receiptNew

Tooth · Collection labelNew

Tooth · Studio letterNew

Tooth · Quote cardNew

Tooth · Day programNew

API referenceCopy Anchor Link

DependenciesCopy Anchor Link

More TextureCopy Anchor Link

Bamboo Paper Sheet

Cascade Lines

Grain

Linen

Painted Canvas

Paper

Usage

Examples

New

New

New

New

New

New

New

New

New

New

API reference

Dependencies

More Texture