Linen: React Texture component

Linen texture: a woven overlay of fine horizontal and vertical threads on coprime periods so the repeat stays hidden. White threads by default, recolored for light grounds; three intensities.

pnpm dlx shadcn add @01orbital/linen

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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

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

/** A sized linen surface with readable studio details. */
export default function LinenDemo() {
  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-[#e0d9ce] p-6 wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--muted-foreground:#51483d] sm:p-8">
        <Linen intensity="rich" className="[--linen-color:#38332c]" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">Selvedge Studio</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Nora Ellis
            </CardTitle>
            <CardDescription>Textile 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>8 Loom Street, Leeds</span>
          <a
            href="mailto:hello@selvedge.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@selvedge.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 { Linen } from "@/components/texture/linen"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/** A sized linen surface with readable studio details. */
export default function LinenDemo() {
  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-[#e0d9ce] p-6 wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--muted-foreground:#51483d] sm:p-8">
        <Linen intensity="rich" className="[--linen-color:#38332c]" />
        <CardHeader className="relative z-20 gap-6 px-0">
          <p className="text-sm font-medium">Selvedge Studio</p>
          <div className="grid gap-1">
            <CardTitle className="text-2xl/8 font-medium tracking-tight">
              Nora Ellis
            </CardTitle>
            <CardDescription>Textile 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>8 Loom Street, Leeds</span>
          <a
            href="mailto:hello@selvedge.example"
            className="break-all underline underline-offset-4 focus-visible:outline-2 focus-visible:outline-offset-4"
          >
            hello@selvedge.example
          </a>
        </CardFooter>
      </Card>
    </div>
  )
}

Examples

New

linen-studio-card

· Studio card

Linen texture example: a contact card on oatmeal linen with a textile designer's name, a Leeds address and an email link. Use it for a studio or business card.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Selvedge Studio",
  name: "Jessica Meir",
  role: "Textile designer",
  address: "8 Loom Street, Leeds",
  email: "hello@selvedge.example",
} as const

/** A textured studio contact card with a compact identity and an email link. */
export default function LinenStudioCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#e0d9ce] wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#51483d] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="rich" className="[--linen-color:#38332c]" />
      <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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

New

linen-workshop-invitation

· Workshop invitation

Linen texture example: a plant-dye workshop invitation on oatmeal linen with a large date, a short introduction and booking details. Use it for an event invitation.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Selvedge Studio / Workshop",
  title: "Color from the hedgerow",
  description:
    "Make a small collection of dyed linen samples using plants gathered nearby.",
  day: "14",
  month: "November 2026",
  time: "Saturday, 14:00–17:00",
  address: "8 Loom Street, Leeds",
  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 LinenWorkshopInvitation() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#e0d9ce] wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#51483d] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="fine" className="[--linen-color:#38332c]" />
      <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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

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

linen-seasonal-menu

· Seasonal menu

Linen texture example: an autumn lunch menu on ivory linen with leek soup, a mushroom sourdough and apple crumble, plus an allergy note. Use it for a cafe or supper-club menu.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Selvedge Studio",
  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: "Leek & potato soup", price: "£7" },
  { name: "Mushroom sourdough", price: "£12" },
  { name: "Apple & oat crumble", price: "£6" },
] as const

/** A seasonal menu with aligned prices and a clear note about dietary requirements. */
export default function LinenSeasonalMenu() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#f3ede0] wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#51483d] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="default" className="[--linen-color:#38332c]" />
      <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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

New

linen-field-note

· Field note

Linen texture example: a dated dye-studio note on oatmeal linen about onion skins and a warm yellow, with a short list for next time. Use it for a studio journal entry.

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

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

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

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

File

import { Linen } from "@/components/texture/linen"
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: "Selvedge Studio",
  date: "7 Nov 2026",
  body: "The onion skins gave a warm yellow. Save a sample beside the undyed cloth.",
  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 LinenFieldNote() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#e0d9ce] wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#51483d] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="rich" className="[--linen-color:#38332c]" />
      <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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

New

linen-edition-cover

· Edition cover

Linen texture example: a brown-black linen cover in a fine weave with a large issue number and the title Cloth, color, place. Use it for a lookbook or catalog cover.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Selvedge Studio",
  edition: "Studio edition",
  number: "04",
  title: "Cloth, color, place",
  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 LinenEditionCover() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#38332c] 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)]">
      <Linen intensity="fine" className="[--linen-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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

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

linen-order-receipt

· Order receipt

Linen texture example: an itemized order on oatmeal linen with a paid total and a collection note from a textile studio. Use it for a shop receipt.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  title: "Selvedge Studio",
  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 LinenOrderReceipt() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-sm bg-[#e0d9ce] wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#51483d] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="default" className="[--linen-color:#38332c]" />
      <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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

New

linen-collection-label

· Collection label

Linen texture example: a collection label on a pale sage-gray ground with woven linen grain, listing material, dimensions and edition. Use it for a textile or print caption.

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

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

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

bunx --bun shadcn add @01orbital/linen-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 { Linen } from "@/components/texture/linen"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Selvedge Studio / Study collection",
  title: "Study in November",
  description: "Jessica Meir, 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 LinenCollectionLabel() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#d7d9d1] wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#51483d] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="rich" className="[--linen-color:#38332c]" />
      <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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

New

linen-studio-letter

· Studio letter

Linen texture example: a short studio letter on oatmeal linen with an inset address line, two paragraphs and a signature. Use it for a customer note or follow-up.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  title: "Selvedge Studio",
  address: "8 Loom Street, Leeds",
  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: "Jessica Meir",
} as const

/** A short studio letter with an inset address line and a clear signature. */
export default function LinenStudioLetter() {
  return (
    <Card className="relative isolate w-full max-w-md overflow-hidden rounded-xl bg-[#e0d9ce] wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--font-display:var(--font-serif)] [--muted-foreground:#51483d] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="fine" className="[--linen-color:#38332c]" />
      <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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

New

linen-quote-card

· Quote card

Linen texture example: a quotation about how cloth is made, in cream ink on a brown-black linen ground, with a textile designer credit. Use it for a testimonial.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Selvedge Studio",
  quote: "“A cloth tells you how it was made if you look closely.”",
  name: "Jessica Meir",
  role: "Textile designer",
} as const

/** A quotation on a colored material surface with a small author credit. */
export default function LinenQuoteCard() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#38332c] wrap-anywhere text-[#f7f0df] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#dcd2bc] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="default" className="[--linen-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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

New

linen-day-programme

· Day program

Linen texture example: a one-day natural dyeing program on oatmeal linen with session times beside each activity. Use it for a workshop schedule.

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

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

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

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

File

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

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Selvedge Studio",
  title: "A day in the studio",
  description: "Saturday 14 November · Natural dyeing",
} 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 LinenDayProgramme() {
  return (
    <Card className="relative isolate w-full max-w-sm overflow-hidden rounded-xl bg-[#e0d9ce] wrap-anywhere text-[#38332c] shadow-sm ring-1 ring-black/10 [--card-spacing:--spacing(6)] [--muted-foreground:#51483d] sm:[--card-spacing:--spacing(8)]">
      <Linen intensity="rich" className="[--linen-color:#38332c]" />
      <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.
// Two-direction weave — 1px threads at 0°+90°. 5px and 6px are the thread
// PERIODS, not gaps, and they are coprime, so the weave repeats every 30px.

function Linen({
  intensity = "default",
  className,
  ...props
}: React.ComponentProps<"div"> & {
  // Thread alpha multiplier. Ink is white; set --linen-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="linen"
      {...props}
    >
      <div
        className="absolute inset-0"
        style={{
          backgroundImage: `repeating-linear-gradient(90deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.05, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 6px), repeating-linear-gradient(0deg in srgb, transparent 0px, transparent 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.06, m)}) 2px, oklch(from var(--linen-color, oklch(1 0 0)) l c h / ${alpha(0.02, m)}) 3px, transparent 3px, transparent 5px)`,
        }}
      />
    </div>
  )
}

export { Linen }

API reference

Prop

Type

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

Linen

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

Painted Canvas

Paper

Rice Paper

Linen

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

Painted Canvas

Paper

Rice Paper

Usage

Examples

New

New

New

New

New

New

New

New

New

New

API reference

Dependencies

More Texture