Paper: React Texture component

Paper fiber texture: thin lines at slightly off-axis angles on three repeat intervals, which avoids moire. White fibers by default, recolored for light grounds; three intensities.

pnpm dlx shadcn add @01orbital/paper

File

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

import { Paper } from "@/components/texture/paper"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/** A sized paper surface with readable studio details. */
export default function PaperDemo() {
  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-[#eee6d5] p-6 wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--muted-foreground:#59554b] sm:p-8">
        <Paper intensity="rich" className="[--paper-color:#302e29]" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">Common Press</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Elliot Park
            </CardTitle>
            <CardDescription>Editor & book designer</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>12 Chapel Yard, Norwich</span>
          <a
            href="mailto:hello@commonpress.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@commonpress.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 { Paper } from "@/components/texture/paper"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/** A sized paper surface with readable studio details. */
export default function PaperDemo() {
  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-[#eee6d5] p-6 wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--muted-foreground:#59554b] sm:p-8">
        <Paper intensity="rich" className="[--paper-color:#302e29]" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">Common Press</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Elliot Park
            </CardTitle>
            <CardDescription>Editor & book designer</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>12 Chapel Yard, Norwich</span>
          <a
            href="mailto:hello@commonpress.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@commonpress.example
          </a>
        </CardFooter>
      </Card>
    </div>
  )
}

Examples

New

paper-studio-card

· Studio card

Paper texture example: a contact card on cream paper with a book designer's name, a Norwich address and an email link. Use it for a studio or business card.

pnpm dlx shadcn add @01orbital/paper-studio-card

npx shadcn add @01orbital/paper-studio-card

yarn shadcn add @01orbital/paper-studio-card

bunx --bun shadcn add @01orbital/paper-studio-card

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Paper } from "@/components/texture/paper"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Common Press",
  name: "Matthias Maurer",
  role: "Editor & book designer",
  address: "12 Chapel Yard, Norwich",
  email: "hello@commonpress.example",
} as const

/** A textured studio contact card with a compact identity and an email link. */
export default function PaperStudioCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#eee6d5] wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#59554b] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="rich" className="[--paper-color:#302e29]" />
      <CardHeader className="relative z-20 gap-6">
        <Eyebrow tone="ink">{COPY.eyebrow}</Eyebrow>
        <div className="grid gap-1">
          <CardTitle className="text-2xl/8 font-medium tracking-tight">
            {COPY.name}
          </CardTitle>
          <CardDescription>{COPY.role}</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:${COPY.email}`}
          className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
        >
          {COPY.email}
        </a>
      </CardFooter>
    </Card>
  )
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

New

paper-workshop-invitation

· Workshop invitation

Paper texture example: a notebook-binding workshop invitation on cream paper with a large date, a short introduction and booking details. Use it for an event invitation.

pnpm dlx shadcn add @01orbital/paper-workshop-invitation

npx shadcn add @01orbital/paper-workshop-invitation

yarn shadcn add @01orbital/paper-workshop-invitation

bunx --bun shadcn add @01orbital/paper-workshop-invitation

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { StatValue } from "@/components/stats/stats"
import { Paper } from "@/components/texture/paper"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Common Press / Workshop",
  title: "Bind your first notebook",
  description:
    "Fold, stitch and cover a notebook to take home. Paper and tools are provided.",
  day: "14",
  month: "November 2026",
  time: "Saturday, 14:00–17:00",
  address: "12 Chapel Yard, Norwich",
  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 PaperWorkshopInvitation() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#eee6d5] wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#59554b] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="fine" className="[--paper-color:#302e29]" />
      <CardHeader className="relative z-20 gap-5">
        <Eyebrow tone="ink">{COPY.eyebrow}</Eyebrow>
        <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">
        <StatValue className="text-5xl/none font-light tabular-nums">
          {COPY.day}
        </StatValue>
        <p className="min-w-0 flex-[1_1_10rem] text-sm/6">
          {COPY.month}
          <br />
          {COPY.time}
          <br />
          {COPY.address}
        </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>
  )
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

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

import { Grid, type GridProps } from "@/components/grid/grid"

/**
 * A list of `Stat` items laid out by `Grid`, rendered as a `ul`. It defaults
 * to 3 columns and the large gap. Like `Grid`, its columns follow the width
 * it is given, so size its parent to narrow it. `className` lands on the
 * list.
 */
function StatGroup({
  cols = 3,
  gap = "lg",
  ...props
}: ComponentProps<"ul"> & {
  /**
   * The most columns, 3 by default. They step up as the list's space
   * widens, the way `Grid`'s do.
   */
  cols?: GridProps["cols"]
  /**
   * Space between stats: `xs` 8px, `sm` 16px, `md` 24px, `lg` 40px, `xl` 64px, `px` 1px, `none` 0. `lg`
   * is the default.
   */
  gap?: GridProps["gap"]
}) {
  return (
    <Grid
      data-slot="stat-group"
      render={<ul role="list" />}
      cols={cols}
      gap={gap}
      // Grid's props are typed for its default div; this group renders a list.
      {...(props as Omit<GridProps, "cols" | "gap">)}
    />
  )
}

// card sets the stat on a filled panel; rule sets a line down its left side.
const statVariants = cva("grid content-start gap-2", {
  variants: {
    /**
     * The stat style. `default` (the default) adds nothing. `card` sets it
     * on a `rounded-xl` panel with 32px padding, filled with `muted`, or
     * with `card` and `card-foreground` text in dark mode. `rule` draws a
     * 1px line in `border` down its left side, 24px from the text.
     */
    variant: {
      default: "",
      card: "rounded-xl bg-muted p-8 dark:bg-card dark:text-card-foreground",
      rule: "border-l border-border pl-6",
    },
  },
  defaultVariants: { variant: "default" },
})

/**
 * One figure and its label, as an `li` inside `StatGroup`. Holds a
 * `StatValue` and a `StatLabel`, stacked with 8px gaps.
 *
 * `card` sets it on a filled, rounded panel with 32px padding. `rule` draws a
 * line down its left side.
 */
function Stat({
  className,
  variant = "default",
  ...props
}: ComponentProps<"li"> & VariantProps<typeof statVariants>) {
  return (
    <li
      data-slot="stat"
      data-variant={variant}
      className={cn(statVariants({ variant }), className)}
      {...props}
    />
  )
}

/** The figure itself, such as a number or a percentage, at 32px in the body font. */
function StatValue({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="stat-value"
      className={cn("text-[2rem]/10 tracking-tight", className)}
      {...props}
    />
  )
}

/** The text that says what the figure measures. */
function StatLabel({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="stat-label"
      className={cn("text-base/7 text-pretty", className)}
      {...props}
    />
  )
}

export { StatGroup, Stat, StatValue, StatLabel }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const GRID_DEFAULTS = { cols: 3, gap: "lg" } as const

// Columns follow the screen, stepping at 40rem and 48rem (and 64rem for six). Gap sizes read the shared --gap-*
// values in globals.css.
const containerGridVariants = cva("grid grid-cols-1", {
  variants: {
    /**
     * The most columns. Below 40rem of screen width the grid is one
     * column (two for `6`); it steps up at 40rem and 48rem: `2` is two
     * columns from 40rem, `3` two then three, `4` two then four, `5` three
     * then five, and `6` three, then four, then six from 64rem. The default
     * is 3.
     */
    cols: {
      1: "",
      2: "sm:grid-cols-2",
      3: "sm:grid-cols-2 md:grid-cols-3",
      4: "sm:grid-cols-2 md:grid-cols-4",
      5: "sm:grid-cols-3 md:grid-cols-5",
      6: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6",
    },
    /**
     * Space between items: `xs` 8px, `sm` 16px, `md` 24px, `lg` 40px, `xl` 64px, `px` 1px, `none` 0. `lg`
     * is the default. The sizes are the `--gap-*` values in globals.css.
     */
    gap: {
      xs: "gap-(--gap-xs)",
      sm: "gap-(--gap-sm)",
      md: "gap-(--gap-md)",
      lg: "gap-(--gap-lg)",
      xl: "gap-(--gap-xl)",
      px: "gap-px",
      none: "gap-0",
    },
  },
  defaultVariants: GRID_DEFAULTS,
})

type GridState = { slot: "grid" } & VariantProps<typeof containerGridVariants>

type GridProps = useRender.ComponentProps<"div", GridState> &
  VariantProps<typeof containerGridVariants>

// className, render and every other prop go to the grid.
function Grid({
  className,
  cols = GRID_DEFAULTS.cols,
  gap = GRID_DEFAULTS.gap,
  render,
  ...props
}: GridProps) {
  const grid = useRender({
    defaultTagName: "div",
    render,
    state: { slot: "grid", cols, gap },
    props: mergeProps<"div">(
      { className: cn(containerGridVariants({ cols, gap }), className) },
      props
    ),
  })
  return grid
}

export { Grid, type GridProps }

New

paper-seasonal-menu

· Seasonal menu

Paper texture example: a lunch menu on ivory paper with white bean soup, a toastie and lemon cake, aligned prices and an allergy note. Use it for a cafe or restaurant menu.

pnpm dlx shadcn add @01orbital/paper-seasonal-menu

npx shadcn add @01orbital/paper-seasonal-menu

yarn shadcn add @01orbital/paper-seasonal-menu

bunx --bun shadcn add @01orbital/paper-seasonal-menu

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Paper } from "@/components/texture/paper"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

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

const DISHES = [
  { name: "White bean soup", price: "£7" },
  { name: "Cheddar & pickle toastie", price: "£12" },
  { name: "Lemon drizzle cake", price: "£6" },
] as const

/** A seasonal menu with aligned prices and a clear note about dietary requirements. */
export default function PaperSeasonalMenu() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#f3ede0] wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#59554b] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="default" className="[--paper-color:#302e29]" />
      <CardHeader className="relative z-20 gap-2 border-b border-current/20">
        <Eyebrow tone="ink">{COPY.eyebrow}</Eyebrow>
        <CardTitle className="text-2xl/8 font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent className="relative z-20">
        <DescriptionList>
          {DISHES.map((dish) => (
            <DescriptionListItem
              key={dish.name}
              className="flex-nowrap gap-x-5"
            >
              <DescriptionListTerm className="text-current">
                {dish.name}
              </DescriptionListTerm>
              <DescriptionListDetails className="text-current">
                {dish.price}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
        </DescriptionList>
      </CardContent>
      <CardFooter className="relative z-20 border-t border-current/20 text-xs/5">
        {COPY.footnote}
      </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,
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

New

paper-field-note

· Field note

Paper texture example: a dated working note on cream paper about uncoated stock and blue ink, with a short list for the next visit. Use it for a journal or changelog entry.

pnpm dlx shadcn add @01orbital/paper-field-note

npx shadcn add @01orbital/paper-field-note

yarn shadcn add @01orbital/paper-field-note

bunx --bun shadcn add @01orbital/paper-field-note

File

import { Paper } from "@/components/texture/paper"
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: "Common Press",
  date: "7 Nov 2026",
  body: "The uncoated stock takes the blue ink well. Check the reverse before approving the run.",
  nextTitle: "For next time",
} as const

const NEXT_STEPS = [
  "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 PaperFieldNote() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#eee6d5] wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#59554b] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="rich" className="[--paper-color:#302e29]" />
      <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.date}
        </time>
      </CardHeader>
      <CardContent className="relative z-20 grid gap-6">
        <p className="text-base/7">{COPY.body}</p>
        <div className="grid gap-2">
          <p className="text-sm font-medium">{COPY.nextTitle}</p>
          <ul className="list-disc space-y-2 pl-4 text-sm/6">
            {NEXT_STEPS.map((step) => (
              <li key={step}>{step}</li>
            ))}
          </ul>
        </div>
      </CardContent>
    </Card>
  )
}

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

New

paper-edition-cover

· Edition cover

Paper texture example: a charcoal editorial cover in fine paper grain with a large issue number and a title block for a small history of print. Use it for a magazine or zine cover.

pnpm dlx shadcn add @01orbital/paper-edition-cover

npx shadcn add @01orbital/paper-edition-cover

yarn shadcn add @01orbital/paper-edition-cover

bunx --bun shadcn add @01orbital/paper-edition-cover

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { StatValue } from "@/components/stats/stats"
import { Paper } from "@/components/texture/paper"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Common Press",
  edition: "Studio edition",
  number: "04",
  title: "A small history of print",
  season: "Autumn / Winter 2026",
  format: "Limited edition · 48 pages",
} as const

/** An editorial cover with a large issue number and a restrained title block. */
export default function PaperEditionCover() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#302e29] 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)]">
      <Paper intensity="fine" className="[--paper-color:#f7f0df]" />
      <CardHeader className="relative z-20 flex flex-wrap items-start justify-between gap-4">
        <Eyebrow tone="ink">{COPY.eyebrow}</Eyebrow>
        <span className="text-xs/6">{COPY.edition}</span>
      </CardHeader>
      <CardContent className="relative z-20 grid min-h-64 content-between gap-10 pt-4">
        <StatValue className="text-8xl/none font-light tracking-tight tabular-nums">
          {COPY.number}
        </StatValue>
        <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.format}</span>
      </CardFooter>
    </Card>
  )
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

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

import { Grid, type GridProps } from "@/components/grid/grid"

/**
 * A list of `Stat` items laid out by `Grid`, rendered as a `ul`. It defaults
 * to 3 columns and the large gap. Like `Grid`, its columns follow the width
 * it is given, so size its parent to narrow it. `className` lands on the
 * list.
 */
function StatGroup({
  cols = 3,
  gap = "lg",
  ...props
}: ComponentProps<"ul"> & {
  /**
   * The most columns, 3 by default. They step up as the list's space
   * widens, the way `Grid`'s do.
   */
  cols?: GridProps["cols"]
  /**
   * Space between stats: `xs` 8px, `sm` 16px, `md` 24px, `lg` 40px, `xl` 64px, `px` 1px, `none` 0. `lg`
   * is the default.
   */
  gap?: GridProps["gap"]
}) {
  return (
    <Grid
      data-slot="stat-group"
      render={<ul role="list" />}
      cols={cols}
      gap={gap}
      // Grid's props are typed for its default div; this group renders a list.
      {...(props as Omit<GridProps, "cols" | "gap">)}
    />
  )
}

// card sets the stat on a filled panel; rule sets a line down its left side.
const statVariants = cva("grid content-start gap-2", {
  variants: {
    /**
     * The stat style. `default` (the default) adds nothing. `card` sets it
     * on a `rounded-xl` panel with 32px padding, filled with `muted`, or
     * with `card` and `card-foreground` text in dark mode. `rule` draws a
     * 1px line in `border` down its left side, 24px from the text.
     */
    variant: {
      default: "",
      card: "rounded-xl bg-muted p-8 dark:bg-card dark:text-card-foreground",
      rule: "border-l border-border pl-6",
    },
  },
  defaultVariants: { variant: "default" },
})

/**
 * One figure and its label, as an `li` inside `StatGroup`. Holds a
 * `StatValue` and a `StatLabel`, stacked with 8px gaps.
 *
 * `card` sets it on a filled, rounded panel with 32px padding. `rule` draws a
 * line down its left side.
 */
function Stat({
  className,
  variant = "default",
  ...props
}: ComponentProps<"li"> & VariantProps<typeof statVariants>) {
  return (
    <li
      data-slot="stat"
      data-variant={variant}
      className={cn(statVariants({ variant }), className)}
      {...props}
    />
  )
}

/** The figure itself, such as a number or a percentage, at 32px in the body font. */
function StatValue({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="stat-value"
      className={cn("text-[2rem]/10 tracking-tight", className)}
      {...props}
    />
  )
}

/** The text that says what the figure measures. */
function StatLabel({ className, ...props }: ComponentProps<"p">) {
  return (
    <p
      data-slot="stat-label"
      className={cn("text-base/7 text-pretty", className)}
      {...props}
    />
  )
}

export { StatGroup, Stat, StatValue, StatLabel }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const GRID_DEFAULTS = { cols: 3, gap: "lg" } as const

// Columns follow the screen, stepping at 40rem and 48rem (and 64rem for six). Gap sizes read the shared --gap-*
// values in globals.css.
const containerGridVariants = cva("grid grid-cols-1", {
  variants: {
    /**
     * The most columns. Below 40rem of screen width the grid is one
     * column (two for `6`); it steps up at 40rem and 48rem: `2` is two
     * columns from 40rem, `3` two then three, `4` two then four, `5` three
     * then five, and `6` three, then four, then six from 64rem. The default
     * is 3.
     */
    cols: {
      1: "",
      2: "sm:grid-cols-2",
      3: "sm:grid-cols-2 md:grid-cols-3",
      4: "sm:grid-cols-2 md:grid-cols-4",
      5: "sm:grid-cols-3 md:grid-cols-5",
      6: "grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6",
    },
    /**
     * Space between items: `xs` 8px, `sm` 16px, `md` 24px, `lg` 40px, `xl` 64px, `px` 1px, `none` 0. `lg`
     * is the default. The sizes are the `--gap-*` values in globals.css.
     */
    gap: {
      xs: "gap-(--gap-xs)",
      sm: "gap-(--gap-sm)",
      md: "gap-(--gap-md)",
      lg: "gap-(--gap-lg)",
      xl: "gap-(--gap-xl)",
      px: "gap-px",
      none: "gap-0",
    },
  },
  defaultVariants: GRID_DEFAULTS,
})

type GridState = { slot: "grid" } & VariantProps<typeof containerGridVariants>

type GridProps = useRender.ComponentProps<"div", GridState> &
  VariantProps<typeof containerGridVariants>

// className, render and every other prop go to the grid.
function Grid({
  className,
  cols = GRID_DEFAULTS.cols,
  gap = GRID_DEFAULTS.gap,
  render,
  ...props
}: GridProps) {
  const grid = useRender({
    defaultTagName: "div",
    render,
    state: { slot: "grid", cols, gap },
    props: mergeProps<"div">(
      { className: cn(containerGridVariants({ cols, gap }), className) },
      props
    ),
  })
  return grid
}

export { Grid, type GridProps }

New

paper-order-receipt

· Order receipt

Paper texture example: an itemized print order on cream paper with a paid total and a collection note. Use it for a shop receipt or order confirmation.

pnpm dlx shadcn add @01orbital/paper-order-receipt

npx shadcn add @01orbital/paper-order-receipt

yarn shadcn add @01orbital/paper-order-receipt

bunx --bun shadcn add @01orbital/paper-order-receipt

File

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

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

const LINES = [
  { 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 PaperOrderReceipt() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#eee6d5] wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#59554b] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="default" className="[--paper-color:#302e29]" />
      <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>
          {LINES.map((line) => (
            <DescriptionListItem
              key={line.name}
              className="flex-nowrap gap-x-5"
            >
              <DescriptionListTerm className="text-current">
                {line.name}
              </DescriptionListTerm>
              <DescriptionListDetails className="text-current">
                {line.price}
              </DescriptionListDetails>
            </DescriptionListItem>
          ))}
          <DescriptionListItem className="flex-nowrap gap-x-5 border-t border-current/25 pt-3 font-medium">
            <DescriptionListTerm className="text-current">
              {COPY.paid}
            </DescriptionListTerm>
            <DescriptionListDetails className="text-current">
              {COPY.total}
            </DescriptionListDetails>
          </DescriptionListItem>
        </DescriptionList>
        <p className="text-xs/6">{COPY.body}</p>
      </CardContent>
      <CardFooter className="relative z-20 border-t border-dashed border-current/40 text-xs/5">
        {COPY.footnote}
      </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,
}

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

New

paper-collection-label

· Collection label

Paper texture example: a collection label on a pale sage-gray ground with charcoal ink, listing material, dimensions and edition in a definition list. Use it for an artwork or print caption.

pnpm dlx shadcn add @01orbital/paper-collection-label

npx shadcn add @01orbital/paper-collection-label

yarn shadcn add @01orbital/paper-collection-label

bunx --bun shadcn add @01orbital/paper-collection-label

File

import { cn } from "cn"

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Paper } from "@/components/texture/paper"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Common Press / Study collection",
  title: "Study in November",
  description: "Matthias Maurer, 2026",
} as const

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

/** A collection label with the edition, material and dimensions in a definition list. */
export default function PaperCollectionLabel() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d7d9d1] wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#59554b] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="rich" className="[--paper-color:#302e29]" />
      <CardHeader className="relative z-20 gap-4">
        <Eyebrow tone="ink" className="text-xs/5 font-normal">
          {COPY.eyebrow}
        </Eyebrow>
        <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((item) => (
            <DescriptionListItem
              key={item.term}
              className="flex-nowrap gap-x-5"
            >
              <DescriptionListTerm className="text-current">
                {item.term}
              </DescriptionListTerm>
              <DescriptionListDetails
                className={cn(
                  "text-current",
                  item.mono && "font-mono text-xs/6"
                )}
              >
                {item.detail}
              </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,
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

New

paper-studio-letter

· Studio letter

Paper texture example: a short letter on cream paper with an inset address line, a greeting, two paragraphs and a signature. Use it for a customer note or welcome message.

pnpm dlx shadcn add @01orbital/paper-studio-letter

npx shadcn add @01orbital/paper-studio-letter

yarn shadcn add @01orbital/paper-studio-letter

bunx --bun shadcn add @01orbital/paper-studio-letter

File

import { Paper } from "@/components/texture/paper"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Common Press",
  address: "12 Chapel Yard, Norwich",
  date: "7 November 2026",
  greeting: "Dear Robin,",
  body: "Thank you for visiting the studio last week. I have set aside the small edition we looked at together.",
  closing:
    "The new work will be ready to see in December. I will send you a note when the doors are open.",
  signoff: "Warm wishes,",
  name: "Matthias Maurer",
} as const

/** A short studio letter with an inset address line and a clear signature. */
export default function PaperStudioLetter() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#eee6d5] wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#59554b] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="fine" className="[--paper-color:#302e29]" />
      <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.address}</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>
        <p>{COPY.body}</p>
        <p>{COPY.closing}</p>
        <p>
          {COPY.signoff}
          <br />
          <span className="font-medium">{COPY.name}</span>
        </p>
      </CardContent>
    </Card>
  )
}

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

New

paper-quote-card

· Quote card

Paper texture example: a quotation about folding a sheet, set in cream ink on a charcoal paper ground, with an editor credit. Use it for a testimonial or pull quote.

pnpm dlx shadcn add @01orbital/paper-quote-card

npx shadcn add @01orbital/paper-quote-card

yarn shadcn add @01orbital/paper-quote-card

bunx --bun shadcn add @01orbital/paper-quote-card

File

import {
  Byline,
  BylineDescription,
  BylineName,
} from "@/components/byline/byline"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Paper } from "@/components/texture/paper"
import { Card, CardContent } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Common Press",
  quote: "“A book begins with one sheet folded in half.”",
  name: "Matthias Maurer",
  role: "Editor & book designer",
} as const

/** A quotation on a colored material surface with a small author credit. */
export default function PaperQuoteCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#302e29] wrap-anywhere text-[#f7f0df] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#dcd2bc] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="default" className="[--paper-color:#f7f0df]" />
      <CardContent className="relative z-20 grid min-h-64 content-between gap-8">
        <Eyebrow tone="ink">{COPY.eyebrow}</Eyebrow>
        <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.name}
            </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 }

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

New

paper-day-programme

· Day program

Paper texture example: a one-day program on cream paper with session times aligned beside bookbinding workshop activities. Use it for an event schedule.

pnpm dlx shadcn add @01orbital/paper-day-programme

npx shadcn add @01orbital/paper-day-programme

yarn shadcn add @01orbital/paper-day-programme

bunx --bun shadcn add @01orbital/paper-day-programme

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Paper } from "@/components/texture/paper"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Common Press",
  title: "A day in the studio",
  description: "Saturday 14 November · Bookbinding",
} 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 PaperDayProgramme() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#eee6d5] wrap-anywhere text-[#302e29] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#59554b] sm:[--card-spacing:--spacing(8)]">
      <Paper intensity="rich" className="[--paper-color:#302e29]" />
      <CardHeader className="relative z-20 gap-2">
        <Eyebrow tone="ink">{COPY.eyebrow}</Eyebrow>
        <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="flex-nowrap justify-start gap-x-5 py-4"
            >
              <DescriptionListTerm className="w-12 shrink-0 text-current">
                {session.time}
              </DescriptionListTerm>
              <DescriptionListDetails className="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,
}

import { mergeProps } from "@base-ui/react/merge-props"
import { useRender } from "@base-ui/react/use-render"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

// default is a quiet 14px line, cased as written; icon puts a 16px icon in
// front of it; mono is a 12px uppercase mono label for spec-sheet designs;
// caps is the same size in a sans face. tone picks the ink: muted (the
// default) or the surrounding text color, for a label over art or on a dark
// island where muted-foreground is too quiet.
const eyebrowVariants = cva("", {
  variants: {
    /**
     * The label style. `default` (the default) is a 14px line at weight 500,
     * cased as written. `icon` is the same line with a 16px icon, placed
     * first among the children, 12px before the words. `mono` is a 12px
     * uppercase mono label at weight 500 with 0.12em letter spacing. `caps`
     * is the same label in the sans face, for a brand and series label such
     * as "Studio Neri / Clay school". The color comes from `tone`.
     */
    variant: {
      default: "text-sm/5 font-medium",
      icon: "flex items-center gap-3 text-sm/5 font-medium [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
      mono: "font-mono text-xs/5 font-medium tracking-[0.12em] uppercase",
      caps: "text-xs/5 font-medium tracking-[0.12em] uppercase",
    },
    /**
     * The ink. `muted` (the default) is `muted-foreground`. `ink` leaves the
     * color to the surrounding text, for a label over art, on a dark island
     * or anywhere the muted grey is too quiet to read.
     */
    tone: {
      muted: "text-muted-foreground",
      ink: "",
    },
  },
  defaultVariants: { variant: "default", tone: "muted" },
})

/**
 * A short label set above a heading, such as a section name, rendered as a
 * `<p>`. Leave 8px between it and the heading. Pass `render` to use another
 * element.
 *
 * `default` is a 14px line at weight 500, cased as written. `icon` adds a
 * 16px icon before the words: put the icon first, with `aria-hidden`. `mono`
 * is a 12px uppercase mono label with 0.12em letter spacing; `caps` the same
 * in the sans face, for a brand and series name such as "Studio Neri / Clay
 * school". `tone="muted"` (the default) sets it in `muted-foreground`;
 * `tone="ink"` takes the surrounding text color, for a label over art or on
 * a dark island where the grey is too quiet.
 */
function Eyebrow({
  className,
  variant = "default",
  tone = "muted",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof eyebrowVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "eyebrow", variant, tone },
    props: mergeProps<"p">(
      { className: cn(eyebrowVariants({ variant, tone }), className) },
      props
    ),
  })
}

export { Eyebrow, eyebrowVariants }

import { cn } from "cn"

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

// One scale for every texture; `default` is the unscaled value.
const INTENSITY_MULT: Record<Intensity, number> = {
  fine: 0.6,
  default: 1,
  rich: 1.45,
}

const alpha = (base: number, mult: number) => (base * mult).toFixed(4)

// Full-bleed art layer — drop inside a `relative` parent; sits behind content.
// Off-axis fiber angles (3°, -2°, 1°) + three repeat intervals avoid moiré.

function Paper({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Fiber alpha multiplier. Ink is white; set --paper-color on a light ground.
  intensity?: Intensity
}) {
  const m = INTENSITY_MULT[intensity]
  return (
    <div
      className={cn("pointer-events-none absolute inset-0", className)}
      aria-hidden="true"
      data-slot="paper"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `
            repeating-linear-gradient(3deg in srgb, transparent 0px, transparent 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.04, m)}) 6px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 7px),
            repeating-linear-gradient(-2deg in srgb, transparent 0px, transparent 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.03, m)}) 8px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 9px),
            repeating-linear-gradient(1deg in srgb, transparent 0px, transparent 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 12px, oklch(from var(--paper-color, oklch(1 0 0)) l c h / ${alpha(0.01, m)}) 13px)
          `,
        }}
      />
    </div>
  )
}

export { Paper }

API reference

Prop

Type

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

Paper

Usage

Examples

New

· Studio card

New

· Workshop invitation

New

· Seasonal menu

New

· Field note

New

· Edition cover

New

· Order receipt

New

· Collection label

New

· Studio letter

New

· Quote card

New

· Day program

API reference

Dependencies

Bamboo Paper Sheet

Cascade Lines

Grain

Linen

Painted Canvas

Rice Paper

Paper

UsageCopy Anchor Link

ExamplesCopy Anchor Link

· Studio cardNew

· Workshop invitationNew

· Seasonal menuNew

· Field noteNew

· Edition coverNew

· Order receiptNew

· Collection labelNew

· Studio letterNew

· Quote cardNew

· Day programNew

API referenceCopy Anchor Link

DependenciesCopy Anchor Link

More TextureCopy Anchor Link

Bamboo Paper Sheet

Cascade Lines

Grain

Linen

Painted Canvas

Rice Paper

Usage

Examples

New

New

New

New

New

New

New

New

New

New

API reference

Dependencies

More Texture