Card: React Card component

Card example: a rounded surface with header, title, description, action, content and footer slots. A small size tightens the spacing, and an image placed first bleeds to the card's rounded corners.

pnpm dlx shadcn add @01orbital/card

File

import * as React from "react"
import { cn } from "cn"

function Card({
  className,
  size = "default",
  ...props
}: React.ComponentProps<"div"> & { size?: "default" | "sm" }) {
  return (
    <div
      data-slot="card"
      data-size={size}
      className={cn(
        "group/card flex flex-col gap-(--card-spacing) overflow-hidden rounded-4xl bg-card py-(--card-spacing) text-sm text-card-foreground shadow-md ring-1 ring-foreground/5 [--card-spacing:--spacing(6)] has-[>img:first-child]:pt-0 data-[size=sm]:[--card-spacing:--spacing(4)] dark:ring-foreground/10 *:[img:first-child]:rounded-t-4xl *:[img:last-child]:rounded-b-4xl",
        className
      )}
      {...props}
    />
  )
}

function CardHeader({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-header"
      className={cn(
        "group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-t-4xl px-(--card-spacing) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-spacing)",
        className
      )}
      {...props}
    />
  )
}

function CardTitle({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-title"
      className={cn("text-base font-medium", className)}
      {...props}
    />
  )
}

function CardDescription({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-description"
      className={cn("text-sm text-muted-foreground", className)}
      {...props}
    />
  )
}

function CardAction({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-action"
      className={cn(
        "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
        className
      )}
      {...props}
    />
  )
}

function CardContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-content"
      className={cn("px-(--card-spacing)", className)}
      {...props}
    />
  )
}

function CardFooter({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="card-footer"
      className={cn(
        "flex items-center rounded-b-4xl px-(--card-spacing) [.border-t]:pt-(--card-spacing)",
        className
      )}
      {...props}
    />
  )
}

export {
  Card,
  CardHeader,
  CardFooter,
  CardTitle,
  CardAction,
  CardDescription,
  CardContent,
}

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Studio",
  description: "Every block, every scene, and the source for both.",
  body: "Install with the CLI and the files land in your repo. No runtime dependency, no lock-in.",
  cta: "Get the kit",
} as const

/** Card with a header, body text and a full-width button in the footer. */
export default function CardDemo() {
  return (
    <Card className="max-w-sm">
      <CardHeader>
        <CardTitle>{COPY.title}</CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
      <CardContent>
        <p className="text-sm/6 text-muted-foreground">{COPY.body}</p>
      </CardContent>
      <CardFooter>
        <Button className="w-full">{COPY.cta}</Button>
      </CardFooter>
    </Card>
  )
}

Paper

Card example: a cream paper card tipped in by hand, with a hairline edge, a soft cast shadow and square corners for an image, on a cream page. Black paper on a black page in dark mode.

pnpm dlx shadcn add @01orbital/card-paper

npx shadcn add @01orbital/card-paper

yarn shadcn add @01orbital/card-paper

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

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Plate IV",
  description: "Tipped in by hand",
} as const

// A plate tipped in by hand: a Card of cream paper with a hairline edge and a
// soft cast shadow, on a cream page. In dark mode, black paper on a black page.
export default function CardPaper() {
  return (
    <div className="w-full max-w-sm rounded-md bg-muted p-10">
      <Card className="relative overflow-visible rounded-none border border-border bg-muted text-[length:inherit] text-foreground shadow-[inset_0_1px_0_oklch(1_0_0/0.8),0_2px_4px_oklch(0.300_0.021_83/0.1),0_22px_40px_-18px_oklch(0.300_0.021_83/0.4)] ring-0 [--card-spacing:--spacing(6)] dark:shadow-[inset_0_1px_0_oklch(0.841_0.011_95/0.18),0_30px_60px_-24px_oklch(0_0_0/0.7)] *:[img:first-child]:rounded-t-none *:[img:last-child]:rounded-b-none">
        <CardHeader>
          <CardTitle>{COPY.title}</CardTitle>
          <CardDescription>{COPY.description}</CardDescription>
        </CardHeader>
      </Card>
    </div>
  )
}

New

card-bevel

Bevel

Card example: a quiet bevel tile, a flat card tinted with a faint foreground wash, no ring or shadow, with a framed bevelled picture well, then a title and note.

pnpm dlx shadcn add @01orbital/card-bevel

npx shadcn add @01orbital/card-bevel

yarn shadcn add @01orbital/card-bevel

bunx --bun shadcn add @01orbital/card-bevel

New

card-bevel-raised

Bevel Raised

Card example: the quiet bevel tile raised, with raised depth, a hairline and a lit top edge in light mode and a lifted card color in dark mode, with a button in the footer.

pnpm dlx shadcn add @01orbital/card-bevel-raised

npx shadcn add @01orbital/card-bevel-raised

yarn shadcn add @01orbital/card-bevel-raised

bunx --bun shadcn add @01orbital/card-bevel-raised

New

card-cascade-warm

Cascade Warm

Card example: a dark card with bands of red to amber falling from the top edge under fine grain. Hover lifts it and draws a rose-amber rule on the bottom edge, honoring reduced motion.

pnpm dlx shadcn add @01orbital/card-cascade-warm

npx shadcn add @01orbital/card-cascade-warm

yarn shadcn add @01orbital/card-cascade-warm

bunx --bun shadcn add @01orbital/card-cascade-warm

File

import { HoverEdge } from "@/components/glow/hover-edge"
import { CascadeLines } from "@/components/texture/cascade-lines"
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Field notes, issue twelve",
  description:
    "Color thresholds, the pacing of sections, and the three rules we broke on purpose.",
} as const

// Fine grain as an SVG noise tile.
const NOISE =
  "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"

// A dark Card. Bands of red to amber fall from the top edge, fading toward the middle under
// a fine grain. On hover it lifts 2px and a rose-amber rule appears on the
// bottom edge, also while something inside has keyboard focus. The card sets
// `dark`, so its text takes the dark theme's colors.
export default function CardCascadeWarm() {
  return (
    <Card className="dark relative w-full max-w-sm rounded bg-background pt-14 text-foreground shadow-none ring-0 transition-[transform,background-color] duration-400 ease-out [--card-spacing:--spacing(10)] hover:bg-muted motion-safe:hover:-translate-y-0.5 motion-reduce:transition-none">
      <CascadeLines variant="warm" edge="top" />
      <HoverEdge edge="bottom" />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-12 mix-blend-overlay"
        style={{ backgroundImage: NOISE }}
      />
      <CardHeader>
        <CardTitle>{COPY.title}</CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

// Thickness, color and opacity of each band. Each list runs
// from the edge inward, strongest first.
const BANDS = {
  warm: [
    [4, "oklch(0.42 0.13 27)", 0.7],
    [3, "oklch(0.44 0.12 30)", 0.5],
    [5, "oklch(0.46 0.11 35)", 0.35],
    [2, "oklch(0.48 0.1 40)", 0.25],
    [4, "oklch(0.5 0.1 45)", 0.18],
    [3, "oklch(0.52 0.11 48)", 0.12],
    [5, "oklch(0.54 0.12 50)", 0.07],
  ],
  cool: [
    [4, "oklch(0.24 0.09 245)", 0.7],
    [3, "oklch(0.26 0.08 248)", 0.5],
    [5, "oklch(0.28 0.08 250)", 0.35],
    [2, "oklch(0.3 0.08 252)", 0.25],
    [4, "oklch(0.32 0.07 255)", 0.18],
    [3, "oklch(0.34 0.07 258)", 0.12],
    [5, "oklch(0.36 0.07 260)", 0.07],
  ],
} as const

const EDGES = {
  top: "inset-x-0 top-0 flex-col",
  bottom: "inset-x-0 bottom-0 flex-col",
  left: "inset-y-0 left-0 flex-row",
  right: "inset-y-0 right-0 flex-row",
} as const

/**
 * Seven uneven bands of color, strongest at an edge and fading inward over
 * 26px. Place inside a positioned parent; its background, padding and corner
 * clipping belong to that parent. The lines ignore the pointer and are hidden
 * from assistive tech. A span root also fits inside a button or link.
 */
function CascadeLines({
  variant = "warm",
  edge = variant === "warm" ? "top" : "bottom",
  className,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** Red-to-amber `warm`, or blue `cool`. Defaults to `warm`. */
  variant?: keyof typeof BANDS
  /** The edge the bands fall from. Defaults to top for warm, bottom for cool. */
  edge?: keyof typeof EDGES
}) {
  const vertical = edge === "left" || edge === "right"
  const near = edge === "top" || edge === "left"
  const bands = BANDS[variant]
  // Bands are listed edge-first, so the far edges lay them out in reverse.
  const ordered = near ? bands : bands.toReversed()

  return (
    <span
      aria-hidden="true"
      data-slot="cascade-lines"
      data-edge={edge}
      data-variant={variant}
      className={cn(
        "pointer-events-none absolute flex",
        EDGES[edge],
        className
      )}
      {...props}
    >
      {ordered.map(([thickness, background, opacity], index) => (
        <i
          key={index}
          className={vertical ? "block h-full shrink-0" : "block w-full"}
          style={{
            [vertical ? "width" : "height"]: thickness,
            background,
            opacity,
          }}
        />
      ))}
    </span>
  )
}

export { CascadeLines }

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

New

card-cascade-cool

Cascade Cool

Card example: a dark card with bands of blue rising from the bottom edge under fine grain. Hover lifts it and draws a rose-amber rule on the top edge, honoring reduced motion.

pnpm dlx shadcn add @01orbital/card-cascade-cool

npx shadcn add @01orbital/card-cascade-cool

yarn shadcn add @01orbital/card-cascade-cool

bunx --bun shadcn add @01orbital/card-cascade-cool

File

import { HoverEdge } from "@/components/glow/hover-edge"
import { CascadeLines } from "@/components/texture/cascade-lines"
import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  title: "Field notes, issue thirteen",
  description:
    "Night grounds, quiet type, and why the cool finish falls from the floor.",
} as const

// Fine grain as an SVG noise tile.
const NOISE =
  "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"

// A dark Card. Bands of blue rise from the bottom edge, fading toward the middle under
// a fine grain. On hover it lifts 2px and a rose-amber rule appears on the
// top edge, also while something inside has keyboard focus. The card sets
// `dark`, so its text takes the dark theme's colors.
export default function CardCascadeCool() {
  return (
    <Card className="dark relative w-full max-w-sm rounded bg-background pb-14 text-foreground shadow-none ring-0 transition-[transform,background-color] duration-400 ease-out [--card-spacing:--spacing(10)] hover:bg-muted motion-safe:hover:-translate-y-0.5 motion-reduce:transition-none">
      <CascadeLines variant="cool" edge="bottom" />
      <HoverEdge edge="top" />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-12 mix-blend-overlay"
        style={{ backgroundImage: NOISE }}
      />
      <CardHeader>
        <CardTitle>{COPY.title}</CardTitle>
        <CardDescription>{COPY.description}</CardDescription>
      </CardHeader>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

// Thickness, color and opacity of each band. Each list runs
// from the edge inward, strongest first.
const BANDS = {
  warm: [
    [4, "oklch(0.42 0.13 27)", 0.7],
    [3, "oklch(0.44 0.12 30)", 0.5],
    [5, "oklch(0.46 0.11 35)", 0.35],
    [2, "oklch(0.48 0.1 40)", 0.25],
    [4, "oklch(0.5 0.1 45)", 0.18],
    [3, "oklch(0.52 0.11 48)", 0.12],
    [5, "oklch(0.54 0.12 50)", 0.07],
  ],
  cool: [
    [4, "oklch(0.24 0.09 245)", 0.7],
    [3, "oklch(0.26 0.08 248)", 0.5],
    [5, "oklch(0.28 0.08 250)", 0.35],
    [2, "oklch(0.3 0.08 252)", 0.25],
    [4, "oklch(0.32 0.07 255)", 0.18],
    [3, "oklch(0.34 0.07 258)", 0.12],
    [5, "oklch(0.36 0.07 260)", 0.07],
  ],
} as const

const EDGES = {
  top: "inset-x-0 top-0 flex-col",
  bottom: "inset-x-0 bottom-0 flex-col",
  left: "inset-y-0 left-0 flex-row",
  right: "inset-y-0 right-0 flex-row",
} as const

/**
 * Seven uneven bands of color, strongest at an edge and fading inward over
 * 26px. Place inside a positioned parent; its background, padding and corner
 * clipping belong to that parent. The lines ignore the pointer and are hidden
 * from assistive tech. A span root also fits inside a button or link.
 */
function CascadeLines({
  variant = "warm",
  edge = variant === "warm" ? "top" : "bottom",
  className,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** Red-to-amber `warm`, or blue `cool`. Defaults to `warm`. */
  variant?: keyof typeof BANDS
  /** The edge the bands fall from. Defaults to top for warm, bottom for cool. */
  edge?: keyof typeof EDGES
}) {
  const vertical = edge === "left" || edge === "right"
  const near = edge === "top" || edge === "left"
  const bands = BANDS[variant]
  // Bands are listed edge-first, so the far edges lay them out in reverse.
  const ordered = near ? bands : bands.toReversed()

  return (
    <span
      aria-hidden="true"
      data-slot="cascade-lines"
      data-edge={edge}
      data-variant={variant}
      className={cn(
        "pointer-events-none absolute flex",
        EDGES[edge],
        className
      )}
      {...props}
    >
      {ordered.map(([thickness, background, opacity], index) => (
        <i
          key={index}
          className={vertical ? "block h-full shrink-0" : "block w-full"}
          style={{
            [vertical ? "width" : "height"]: thickness,
            background,
            opacity,
          }}
        />
      ))}
    </span>
  )
}

export { CascadeLines }

import type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

New

card-color-field-frame

Color Field Frame

Card example: a card with a framed color field wash above the copy and a text link below. Shows art in a picture well on a card.

pnpm dlx shadcn add @01orbital/card-color-field-frame

npx shadcn add @01orbital/card-color-field-frame

yarn shadcn add @01orbital/card-color-field-frame

bunx --bun shadcn add @01orbital/card-color-field-frame

New

card-print-product

Print Product

Card example: a product card on warm cardstock with a tilted poster in a framed well, a price beside a monospace label, and an add-to-bag button. Shows an ecommerce product tile.

pnpm dlx shadcn add @01orbital/card-print-product

npx shadcn add @01orbital/card-print-product

yarn shadcn add @01orbital/card-print-product

bunx --bun shadcn add @01orbital/card-print-product

New

card-collection-tile

Collection Tile

Card example: a soft, shadowless collection tile with a framed olive color field wash, a monospace label and an underlined text link.

pnpm dlx shadcn add @01orbital/card-collection-tile

npx shadcn add @01orbital/card-collection-tile

yarn shadcn add @01orbital/card-collection-tile

bunx --bun shadcn add @01orbital/card-collection-tile

New

card-project-preview

Project Preview

Card example: a card whose framed well holds a small project list of three rows with their progress, then a link. Shows a dashboard preview tile.

pnpm dlx shadcn add @01orbital/card-project-preview

npx shadcn add @01orbital/card-project-preview

yarn shadcn add @01orbital/card-project-preview

bunx --bun shadcn add @01orbital/card-project-preview

New

card-calendar-event

Calendar Event

Card example: an event card with a framed November calendar, the event date above the title, and an expandable list of what to bring.

pnpm dlx shadcn add @01orbital/card-calendar-event

npx shadcn add @01orbital/card-calendar-event

yarn shadcn add @01orbital/card-calendar-event

bunx --bun shadcn add @01orbital/card-calendar-event

New

card-dark-frame

Dark Frame

Card example: a dark textured card on one grained black ground, with a bevel-framed Backlit Blocks scene above the title, description and a link.

pnpm dlx shadcn add @01orbital/card-dark-frame

npx shadcn add @01orbital/card-dark-frame

yarn shadcn add @01orbital/card-dark-frame

bunx --bun shadcn add @01orbital/card-dark-frame

New

card-horizontal-frame

Horizontal Frame

Card example: a wide horizontal card with the framed color wash beside the copy, stacking the art above the copy on a phone.

pnpm dlx shadcn add @01orbital/card-horizontal-frame

npx shadcn add @01orbital/card-horizontal-frame

yarn shadcn add @01orbital/card-horizontal-frame

bunx --bun shadcn add @01orbital/card-horizontal-frame

New

card-newsletter-signup

Newsletter Signup

Card example: a newsletter signup card with a framed Blue Hour scene, a monospace label and a one-field email signup in the footer.

pnpm dlx shadcn add @01orbital/card-newsletter-signup

npx shadcn add @01orbital/card-newsletter-signup

yarn shadcn add @01orbital/card-newsletter-signup

bunx --bun shadcn add @01orbital/card-newsletter-signup

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { BevelFrame } from "@/components/media/bevel-frame"
import { BlueHourScene } from "@/components/scene/blue-hour-scene"
import { Button } from "@/components/ui/button"
import {
  Card,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Input } from "@/components/ui/input"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "The Lantern Post / monthly dispatch",
  title: "Something to read before the day begins.",
  description:
    "A letter about design, materials, and the things we notice on the way to work.",
  label: "Email address",
  placeholder: "you@example.com",
  cta: "Join the list",
  footnote: "Local preview · no email is sent or saved.",
} as const

/** A Card with a framed Blue Hour scene, a mono label and a one-field email signup in the footer. */
export default function CardNewsletterSignup() {
  return (
    // The plum tint follows the page mode. The haze surface would stamp white
    // scene ink, so the card takes the page foreground back for both modes.
    <Card className="theme-plum surface-haze w-full max-w-sm rounded-lg px-2 pt-2 pb-8 text-foreground! [--font-display:var(--font-sans)]">
      <BevelFrame className="h-[230px]">
        <div
          aria-hidden="true"
          className="dark absolute inset-0 isolate size-full min-h-[160px] overflow-hidden bg-background"
        >
          <BlueHourScene town />
        </div>
      </BevelFrame>
      <CardHeader className="gap-2">
        <Eyebrow variant="mono" tone="ink" className="relative z-2">
          {COPY.eyebrow}
        </Eyebrow>
        <CardTitle role="heading" aria-level={3}>
          {COPY.title}
        </CardTitle>
        <CardDescription className="leading-6">
          {COPY.description}
        </CardDescription>
      </CardHeader>
      <CardFooter className="mt-auto">
        <form method="dialog" className="grid w-full gap-2.5 text-xs">
          <label htmlFor="card-newsletter-email">{COPY.label}</label>
          <div className="flex flex-wrap gap-2.5">
            <Input
              id="card-newsletter-email"
              name="email"
              type="email"
              autoComplete="email"
              required
              placeholder={COPY.placeholder}
              className="h-10 flex-[1_1_160px] border border-[color-mix(in_oklab,var(--foreground)_55%,var(--background))] bg-background text-foreground"
            />
            <Button
              type="submit"
              className="h-auto min-h-[38px] max-w-full py-[9px] text-center whitespace-normal"
            >
              {COPY.cta}
            </Button>
          </div>
          <p role="status" className="text-xs/5 text-muted-foreground">
            {COPY.footnote}
          </p>
        </form>
      </CardFooter>
    </Card>
  )
}

import type * as React from "react"
import { cn } from "cn"

/**
 * A picture well for inside a card. Clips its content
 * to small rounded corners. In dark mode, a 1px white outline at 10% opacity
 * sits inside the edge.
 *
 * Give it a height or an aspect ratio. A scene placed with
 * `absolute inset-0` adds no height of its own.
 */
function BevelFrame({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="bevel-frame"
      className={cn(
        "relative overflow-hidden rounded-sm after:pointer-events-none after:absolute after:inset-0 after:rounded-[inherit] dark:after:outline-1 dark:after:-outline-offset-1 dark:after:outline-white/10",
        className
      )}
      {...props}
    />
  )
}

export { BevelFrame }

import { SoftGrain } from "@/components/texture/soft-grain"

// Pre-dawn: the sky is the only light; anything against it is a silhouette.
// `town` adds a roofline and dim windows — only when the scene IS the content.
function BlueHourScene({
  town = false,
  venus = true,
  grain = true,
}: {
  // Set false when stacking your own grain on top.
  grain?: boolean
  town?: boolean
  venus?: boolean
}) {
  if (town) {
    return (
      <div
        aria-hidden="true"
        data-slot="blue-hour-scene"
        className="pointer-events-none absolute inset-0 isolate overflow-hidden"
        style={{
          background:
            "linear-gradient(180deg, oklch(0.18 0.055 285) 0%, oklch(0.25 0.075 278) 36%, oklch(0.35 0.09 268) 58%, oklch(0.47 0.09 260) 70%, oklch(0.58 0.075 248) 76%, oklch(0.62 0.065 240) 79%, oklch(0.30 0.04 255) 79.2%, oklch(0.14 0.015 262) 84%, oklch(0.09 0.008 268) 100%)",
        }}
      >
        <div
          className="absolute top-[78%] left-[40%] h-42.5 w-190 -translate-1/2 mix-blend-screen blur-[26px]"
          style={{
            background:
              "radial-gradient(55% 48% at 50% 58%, oklch(0.72 0.085 62 / 0.30) 0%, oklch(0.56 0.075 42 / 0.11) 52%, transparent 74%)",
          }}
        />
        {venus ? (
          <div className="absolute top-[14%] left-[74%] size-0.75 rounded-full bg-[oklch(0.95_0.01_240)] shadow-[0_0_6px_1px_oklch(0.90_0.02_240/0.7)]" />
        ) : null}
        <div className="absolute inset-x-0 top-[74%] h-[8%] bg-[oklch(0.24_0.035_262)] [clip-path:polygon(0_62%,6%_62%,6%_40%,14%_40%,14%_58%,22%_58%,22%_30%,24%_30%,24%_22%,26%_30%,30%_30%,30%_55%,41%_55%,41%_38%,50%_38%,50%_60%,58%_60%,58%_34%,66%_34%,66%_52%,74%_52%,74%_44%,83%_44%,83%_58%,90%_58%,90%_36%,97%_36%,97%_56%,100%_56%,100%_100%,0_100%)]" />
        <div className="absolute inset-x-0 top-[76%] h-[10%] bg-[oklch(0.115_0.012_265)] [clip-path:polygon(0_55%,4%_55%,4%_30%,11%_30%,11%_48%,19%_48%,19%_24%,20.5%_24%,20.5%_14%,21.5%_10%,22.5%_14%,22.5%_24%,28%_24%,28%_44%,37%_44%,37%_52%,45%_52%,45%_28%,53%_28%,53%_46%,61%_46%,61%_38%,70%_38%,70%_54%,78%_54%,78%_32%,86%_32%,86%_50%,93%_50%,93%_40%,100%_40%,100%_100%,0_100%)]" />
        <div className="absolute inset-x-0 top-[84%] bottom-0 bg-[oklch(0.09_0.008_268)]" />
        <div className="absolute top-[79.4%] left-[29.5%] h-1.75 w-1.25 bg-[oklch(0.72_0.10_70/0.75)] shadow-[0_0_7px_1px_oklch(0.68_0.10_65/0.4)]" />
        <div className="absolute top-[80.8%] left-[56.2%] h-1.5 w-1 bg-[oklch(0.68_0.09_68/0.55)] shadow-[0_0_6px_1px_oklch(0.64_0.09_64/0.3)]" />
        <div className="absolute top-[80%] left-[80.6%] h-1.25 w-1 bg-[oklch(0.64_0.09_66/0.4)] shadow-[0_0_5px_1px_oklch(0.60_0.09_62/0.25)]" />
        {grain && <SoftGrain className="opacity-[0.05]" />}
      </div>
    )
  }
  return (
    <div
      aria-hidden="true"
      data-slot="blue-hour-scene"
      className="pointer-events-none absolute inset-0 isolate overflow-hidden"
      style={{
        background:
          "linear-gradient(180deg, oklch(0.18 0.055 285) 0%, oklch(0.25 0.075 278) 38%, oklch(0.35 0.09 268) 62%, oklch(0.48 0.09 258) 74%, oklch(0.60 0.07 245) 78.5%, oklch(0.12 0.01 270) 79%, oklch(0.09 0.008 268) 100%)",
      }}
    >
      <div
        className="absolute top-[78.5%] left-[63%] h-47.5 w-205 -translate-1/2 mix-blend-screen blur-[26px]"
        style={{
          background:
            "radial-gradient(55% 48% at 50% 55%, oklch(0.74 0.09 65 / 0.34) 0%, oklch(0.58 0.08 40 / 0.13) 52%, transparent 74%)",
        }}
      />
      <div
        className="absolute inset-x-0 top-[78.5%] h-0.75 blur-[1px]"
        style={{
          background:
            "linear-gradient(90deg, transparent 4%, oklch(0.70 0.06 60 / 0.25) 40%, oklch(0.82 0.07 65 / 0.5) 63%, oklch(0.70 0.06 60 / 0.2) 82%, transparent 97%)",
        }}
      />
      {venus ? (
        <div className="absolute top-[16%] left-[74%] size-0.75 rounded-full bg-[oklch(0.95_0.01_240)] shadow-[0_0_6px_1px_oklch(0.90_0.02_240/0.7)]" />
      ) : null}
      <div
        className="absolute inset-x-0 top-[79%] bottom-0"
        style={{
          background:
            "linear-gradient(180deg, oklch(0.135 0.018 60 / 0.35) 0%, transparent 12%)",
        }}
      />
      {grain && <SoftGrain className="opacity-[0.05]" />}
    </div>
  )
}

export { BlueHourScene }

import { cn } from "cn"

import { SOFT_NOISE } from "@/components/texture/grain-recipes"

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)

function SoftGrain({
  intensity = "default",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & { intensity?: Intensity }) {
  return (
    <div
      aria-hidden="true"
      data-slot="soft-grain"
      className={cn(
        "pointer-events-none absolute inset-0 bg-size-[512px] mix-blend-overlay",
        className
      )}
      style={{
        backgroundImage: SOFT_NOISE,
        opacity: 0.055 * INTENSITY_MULT[intensity],
        ...style,
      }}
      {...props}
    />
  )
}

export { SoftGrain }

// The grain tiles the kit paints with, as data URIs, each held once. Every
// recipe is a tiny SVG turbulence filter; the component using it chooses
// the tile size, opacity and blend. `*_URI` is the bare image for callers
// that wrap it themselves; the unsuffixed name is ready for `background-image`.

/** Stylized paper: coarse turbulence pushed to high contrast, the grain under most of the painted scenes and the Grain `paper` variant. */
export const PAPER_GRAIN_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='4' intercept='1'/%3E%3CfeFuncG type='linear' slope='4' intercept='1'/%3E%3CfeFuncB type='linear' slope='4' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const PAPER_GRAIN = `url("${PAPER_GRAIN_URI}")`

/** Sandpaper: finer, two-octave turbulence, the Grain `sandpaper` variant and the pours and pools. */
export const SANDPAPER_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='0.8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SANDPAPER_GRAIN = `url("${SANDPAPER_GRAIN_URI}")`

/** Square: three-octave turbulence at high contrast, the Grain `square` variant. */
export const SQUARE_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20100%20100%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22turbulence%22%20baseFrequency=%222.1%22%20numOctaves=%223%22%20seed=%2211%22%20stitchTiles=%22stitch%22%20result=%22n%22/%3E%3CfeComponentTransfer%20result=%22g%22%3E%3CfeFuncR%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncG%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncB%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22%20in=%22g%22/%3E%3C/filter%3E%3Crect%20width=%22100%%22%20height=%22100%%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"
export const SQUARE_GRAIN = `url("${SQUARE_GRAIN_URI}")`

/** Plain fractal noise on a 200px tile, the Grain `single` variant. */
export const SINGLE_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SINGLE_NOISE = `url("${SINGLE_NOISE_URI}")`

/** Fine fractal noise on a 512px tile, SoftGrain and the Limb scene. */
export const SOFT_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SOFT_NOISE = `url("${SOFT_NOISE_URI}")`

/** Fine fractal noise the field scenes lay over their art: Fracture Field, Gestural Zip, Solar Flare and Underwater Shaft. */
export const FIELD_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const FIELD_NOISE = `url("${FIELD_NOISE_URI}")`

/** Fine fractal noise on a 256px tile, the mist over the radial charts. */
export const CHART_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const CHART_NOISE = `url("${CHART_NOISE_URI}")`

/** A one-octave dither on a 128px tile, the glass of the neon signs. */
export const DITHER_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"
export const DITHER_NOISE = `url("${DITHER_NOISE_URI}")`

/** A thin film: paper turbulence with its alpha cut to 0.6, the grain GlowSection lays over its light. */
export const GLOW_FILM_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='sf'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sf)'/%3E%3C/svg%3E"
export const GLOW_FILM = `url("${GLOW_FILM_URI}")`

/** Plain fractal noise on a 400px tile, the canvas finish of ColorField and FeltOrb. */
export const CANVAS_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
export const CANVAS_NOISE = `url("${CANVAS_NOISE_URI}")`

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 }

New

card-palette-preview

Palette Preview

Card example: a dark cardstock card whose framed color field wash carries a palette button and the palette's name, with a link in the footer.

pnpm dlx shadcn add @01orbital/card-palette-preview

npx shadcn add @01orbital/card-palette-preview

yarn shadcn add @01orbital/card-palette-preview

bunx --bun shadcn add @01orbital/card-palette-preview

New

card-clarice-open-studio

Clarice Open Studio

Card example: a pricing card with an arched top and sandpaper grain, with an expandable answer in the footer. Shows an open studio booking card.

pnpm dlx shadcn add @01orbital/card-clarice-open-studio

npx shadcn add @01orbital/card-clarice-open-studio

yarn shadcn add @01orbital/card-clarice-open-studio

bunx --bun shadcn add @01orbital/card-clarice-open-studio

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Grain } from "@/components/texture/grain"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Clarice · Open studio",
  title: "Your own shelf.",
  description: "For potters who can throw independently.",
  price: "$145",
  period: "/ month",
  summary: "Is open studio right for me?",
  body: "You should be comfortable centering clay, trimming, and cleaning a wheel without an instructor. New to clay? Start with the six-week Wheel Foundations course.",
} as const

const FEATURES = [
  "24 hours of wheel time each month",
  "One personal shelf, tools, and glazes",
  "Firing billed at $0.06 per cubic inch",
] as const

/** A pricing Card with an arched top and sandpaper grain, with an expandable answer in the footer. */
export default function CardClariceOpenStudio() {
  return (
    <div className="flex w-full items-center justify-center rounded-xl border bg-background px-3 py-8 text-foreground [--radius:0.625rem] sm:px-6 dark:[--radius:0.625rem]">
      <Card className="relative isolate w-full max-w-sm rounded-t-[5rem] rounded-b-xl pt-12 shadow-none">
        <Grain variant="sandpaper" intensity="fine" />
        <CardHeader className="relative text-center">
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <CardTitle className="mt-2 text-3xl tracking-tight">
            {COPY.title}
          </CardTitle>
          <CardDescription className="mt-2">{COPY.description}</CardDescription>
        </CardHeader>
        <CardContent className="relative space-y-5">
          <p className="text-center">
            <span className="text-5xl font-medium tracking-tighter">
              {COPY.price}
            </span>
            <span className="ml-2 text-sm text-muted-foreground">
              {COPY.period}
            </span>
          </p>
          <ul className="space-y-2 border-y py-5 text-sm">
            {FEATURES.map((feature) => (
              <li key={feature}>{feature}</li>
            ))}
          </ul>
        </CardContent>
        <CardFooter className="relative block">
          <Collapsible className="text-sm">
            <CollapsibleTrigger className="cursor-pointer rounded-sm py-2 text-left font-medium underline underline-offset-4 focus-visible:outline-2">
              {COPY.summary}
            </CollapsibleTrigger>
            <CollapsibleContent>
              <p className="pt-3 leading-6 text-muted-foreground">
                {COPY.body}
              </p>
            </CollapsibleContent>
          </Collapsible>
        </CardFooter>
      </Card>
    </div>
  )
}

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"

import {
  PAPER_GRAIN,
  SANDPAPER_GRAIN,
  SINGLE_NOISE,
  SQUARE_GRAIN,
} from "@/components/texture/grain-recipes"

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)

// Four grain treatments; each paints a single texture layer.
// Full-bleed art layer — drop inside a `relative` parent; sits behind content.

/** The texture treatment painted by `Grain`. */
type GrainVariant =
  // Stylized paper-look variants — heavier filter chain than plain noise.
  "paper" | "sandpaper" | "square" | "single"

type Layer = {
  src: string
  size: string
  opacity: number
  blend: "overlay" | "soft-light"
}

const BLEND_CLASS: Record<Layer["blend"], string> = {
  overlay: "mix-blend-overlay",
  "soft-light": "mix-blend-soft-light",
}

const VARIANT_TEXTURES: Record<GrainVariant, Layer> = {
  paper: {
    src: PAPER_GRAIN,
    size: "250px",
    opacity: 0.25,
    blend: "overlay",
  },
  sandpaper: {
    src: SANDPAPER_GRAIN,
    size: "200px",
    opacity: 0.25,
    blend: "overlay",
  },
  square: {
    src: SQUARE_GRAIN,
    size: "200px",
    opacity: 0.8,
    blend: "soft-light",
  },
  single: { src: SINGLE_NOISE, size: "200px", opacity: 0.3, blend: "overlay" },
}

/**
 * A decorative grain layer that fills a positioned parent without blocking
 * clicks. Choose a texture and adjust its strength with `intensity` or
 * `opacity`. `className` and other div props land on the outer layer.
 */
function Grain({
  variant = "single",
  intensity = "default",
  opacity,
  isolated = false,
  className,
  ...props
}: React.ComponentProps<"div"> & {
  /** The grain treatment: `single` (default), `paper`, `sandpaper` or `square`. */
  variant?: GrainVariant
  /** Multiplies the texture's opacity: `fine` 0.6×, `default` 1×, `rich` 1.45×. */
  intensity?: Intensity
  /** The texture opacity, from 0 to 1. Takes precedence over `intensity`. */
  opacity?: number
  /**
   * Adds paint containment when true. This creates a stacking context, so
   * the texture stops blending with scene layers outside this element.
   */
  isolated?: boolean
}) {
  const layer = VARIANT_TEXTURES[variant]
  const m =
    opacity != null ? opacity / layer.opacity : INTENSITY_MULT[intensity]
  return (
    <div
      data-slot="grain"
      data-variant={variant}
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0",
        isolated && "contain-[paint]",
        className
      )}
      {...props}
    >
      <div
        className={cn("absolute inset-0", BLEND_CLASS[layer.blend])}
        style={{
          backgroundImage: layer.src,
          backgroundSize: layer.size,
          opacity: layer.opacity * m,
        }}
      />
    </div>
  )
}

export { Grain }

// The grain tiles the kit paints with, as data URIs, each held once. Every
// recipe is a tiny SVG turbulence filter; the component using it chooses
// the tile size, opacity and blend. `*_URI` is the bare image for callers
// that wrap it themselves; the unsuffixed name is ready for `background-image`.

/** Stylized paper: coarse turbulence pushed to high contrast, the grain under most of the painted scenes and the Grain `paper` variant. */
export const PAPER_GRAIN_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='4' intercept='1'/%3E%3CfeFuncG type='linear' slope='4' intercept='1'/%3E%3CfeFuncB type='linear' slope='4' intercept='1'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const PAPER_GRAIN = `url("${PAPER_GRAIN_URI}")`

/** Sandpaper: finer, two-octave turbulence, the Grain `sandpaper` variant and the pours and pools. */
export const SANDPAPER_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200' viewBox='0 0 100 100'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='2.2' numOctaves='2' seed='5' stitchTiles='stitch' result='n'/%3E%3CfeComponentTransfer result='g'%3E%3CfeFuncR type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncG type='linear' slope='2.5' intercept='0.8'/%3E%3CfeFuncB type='linear' slope='2.5' intercept='0.8'/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix type='saturate' values='0' in='g'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SANDPAPER_GRAIN = `url("${SANDPAPER_GRAIN_URI}")`

/** Square: three-octave turbulence at high contrast, the Grain `square` variant. */
export const SQUARE_GRAIN_URI =
  "data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22200%22%20height=%22200%22%20viewBox=%220%200%20100%20100%22%3E%3Cfilter%20id=%22n%22%3E%3CfeTurbulence%20type=%22turbulence%22%20baseFrequency=%222.1%22%20numOctaves=%223%22%20seed=%2211%22%20stitchTiles=%22stitch%22%20result=%22n%22/%3E%3CfeComponentTransfer%20result=%22g%22%3E%3CfeFuncR%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncG%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3CfeFuncB%20type=%22linear%22%20slope=%225.5%22%20intercept=%221.4%22/%3E%3C/feComponentTransfer%3E%3CfeColorMatrix%20type=%22saturate%22%20values=%220%22%20in=%22g%22/%3E%3C/filter%3E%3Crect%20width=%22100%%22%20height=%22100%%22%20filter=%22url(%23n)%22/%3E%3C/svg%3E"
export const SQUARE_GRAIN = `url("${SQUARE_GRAIN_URI}")`

/** Plain fractal noise on a 200px tile, the Grain `single` variant. */
export const SINGLE_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SINGLE_NOISE = `url("${SINGLE_NOISE_URI}")`

/** Fine fractal noise on a 512px tile, SoftGrain and the Limb scene. */
export const SOFT_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const SOFT_NOISE = `url("${SOFT_NOISE_URI}")`

/** Fine fractal noise the field scenes lay over their art: Fracture Field, Gestural Zip, Solar Flare and Underwater Shaft. */
export const FIELD_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const FIELD_NOISE = `url("${FIELD_NOISE_URI}")`

/** Fine fractal noise on a 256px tile, the mist over the radial charts. */
export const CHART_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"
export const CHART_NOISE = `url("${CHART_NOISE_URI}")`

/** A one-octave dither on a 128px tile, the glass of the neon signs. */
export const DITHER_NOISE_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"
export const DITHER_NOISE = `url("${DITHER_NOISE_URI}")`

/** A thin film: paper turbulence with its alpha cut to 0.6, the grain GlowSection lays over its light. */
export const GLOW_FILM_URI =
  "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='250' height='250'%3E%3Cfilter id='sf'%3E%3CfeTurbulence type='turbulence' baseFrequency='1.4' numOctaves='1' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.6'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23sf)'/%3E%3C/svg%3E"
export const GLOW_FILM = `url("${GLOW_FILM_URI}")`

/** Plain fractal noise on a 400px tile, the canvas finish of ColorField and FeltOrb. */
export const CANVAS_NOISE_URI =
  "data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E"
export const CANVAS_NOISE = `url("${CANVAS_NOISE_URI}")`

New

card-client-approval

Client Approval

Card example: a square card tracking client milestones with a thin progress bar and an expandable review note. Shows a project status card.

pnpm dlx shadcn add @01orbital/card-client-approval

npx shadcn add @01orbital/card-client-approval

yarn shadcn add @01orbital/card-client-approval

bunx --bun shadcn add @01orbital/card-client-approval

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"
import { Progress } from "@/components/ui/progress"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Phyllis Studio · Client portal",
  title: "Moriana identity",
  description: "Round 02 · Packaging and wordmark",
  count: "03",
  status: "of 4 milestones approved",
  next: "Next: final artwork · November 12",
  progressLabel: "Identity project completion",
  summary: "What needs my review?",
  body: "Confirm the uncoated stock for the 250 g coffee bag and check the legal address on the back panel. Send both notes to your project lead, Christina, by November 9.",
} as const

/** A square Card tracking client milestones with a thin Progress bar and an expandable review note. */
export default function CardClientApproval() {
  return (
    <div className="flex w-full items-center justify-center rounded-xl border bg-background px-3 py-8 text-foreground [--radius:0.5rem] sm:px-6 dark:[--radius:0.5rem]">
      <Card className="w-full max-w-md shadow-none ring-0">
        <CardHeader>
          <Eyebrow>{COPY.eyebrow}</Eyebrow>
          <CardTitle className="mt-2 text-3xl font-medium tracking-tighter">
            {COPY.title}
          </CardTitle>
          <CardDescription>{COPY.description}</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-4 border-y py-5">
            <span className="text-6xl font-light tracking-tighter">
              {COPY.count}
            </span>
            <div>
              <p className="text-sm font-medium">{COPY.status}</p>
              <p className="mt-1 text-xs text-muted-foreground">{COPY.next}</p>
            </div>
          </div>
          <Progress
            value={75}
            aria-label={COPY.progressLabel}
            className="mt-6 [&_[data-slot=progress-track]]:h-1.5 [&_[data-slot=progress-track]]:rounded-none"
          />
        </CardContent>
        <CardFooter className="block">
          <Collapsible>
            <CollapsibleTrigger className="cursor-pointer rounded-sm py-2 text-left text-sm font-medium underline underline-offset-4 focus-visible:outline-2">
              {COPY.summary}
            </CollapsibleTrigger>
            <CollapsibleContent>
              <p className="mt-3 text-sm leading-6 text-muted-foreground">
                {COPY.body}
              </p>
            </CollapsibleContent>
          </Collapsible>
        </CardFooter>
      </Card>
    </div>
  )
}

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 }

New

card-cascade-after-hours

Cascade After Hours

Card example: a compact dark listening card with warm cascading bands, copper ink and a ruled monospace footer. Shows the cascade lines texture on a music card.

pnpm dlx shadcn add @01orbital/card-cascade-after-hours

npx shadcn add @01orbital/card-cascade-after-hours

yarn shadcn add @01orbital/card-cascade-after-hours

bunx --bun shadcn add @01orbital/card-cascade-after-hours

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { HoverEdge } from "@/components/glow/hover-edge"
import { Text } from "@/components/text/text"
import { CascadeLines } from "@/components/texture/cascade-lines"
import {
  Card,
  CardContent,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { Separator } from "@/components/ui/separator"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Listening room 004",
  title: "After hours, before dawn.",
  body: "An hour of ambient records selected for the last light in the studio.",
  credit: "Mixed by Alma",
  duration: "58:42",
} as const

// Fine grain as an SVG noise tile.
const NOISE =
  "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"

/** A compact dark listening card with warm cascading bands, copper ink and a ruled mono footer. */
export default function CardCascadeAfterHours() {
  return (
    <Card className="group/cascade-card dark relative min-h-72 w-full justify-between gap-8 rounded-2xl bg-background pt-14 text-foreground shadow-none ring-0 transition-[transform,background-color] duration-400 ease-out [--card-spacing:--spacing(10)] hover:bg-muted motion-safe:hover:-translate-y-0.5 motion-reduce:transition-none">
      <CascadeLines variant="warm" edge="top" />
      <HoverEdge edge="bottom" />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-[inherit] opacity-12 mix-blend-overlay"
        style={{ backgroundImage: NOISE }}
      />
      <CardHeader className="relative">
        <Eyebrow variant="mono" tone="ink" className="tracking-[0.16em]">
          {COPY.eyebrow}
        </Eyebrow>
      </CardHeader>
      <CardContent className="relative space-y-3">
        <CardTitle className="text-3xl font-medium tracking-tight">
          {COPY.title}
        </CardTitle>
        <Text className="max-w-xs text-sm/6">{COPY.body}</Text>
      </CardContent>
      <CardFooter className="relative flex-col items-stretch gap-4 font-mono text-xs">
        <Separator className="bg-current/20" />
        <p className="flex justify-between">
          <span>{COPY.credit}</span>
          <span>{COPY.duration}</span>
        </p>
      </CardFooter>
    </Card>
  )
}

import type { ComponentProps } from "react"
import { cn } from "cn"

// Thickness, color and opacity of each band. Each list runs
// from the edge inward, strongest first.
const BANDS = {
  warm: [
    [4, "oklch(0.42 0.13 27)", 0.7],
    [3, "oklch(0.44 0.12 30)", 0.5],
    [5, "oklch(0.46 0.11 35)", 0.35],
    [2, "oklch(0.48 0.1 40)", 0.25],
    [4, "oklch(0.5 0.1 45)", 0.18],
    [3, "oklch(0.52 0.11 48)", 0.12],
    [5, "oklch(0.54 0.12 50)", 0.07],
  ],
  cool: [
    [4, "oklch(0.24 0.09 245)", 0.7],
    [3, "oklch(0.26 0.08 248)", 0.5],
    [5, "oklch(0.28 0.08 250)", 0.35],
    [2, "oklch(0.3 0.08 252)", 0.25],
    [4, "oklch(0.32 0.07 255)", 0.18],
    [3, "oklch(0.34 0.07 258)", 0.12],
    [5, "oklch(0.36 0.07 260)", 0.07],
  ],
} as const

const EDGES = {
  top: "inset-x-0 top-0 flex-col",
  bottom: "inset-x-0 bottom-0 flex-col",
  left: "inset-y-0 left-0 flex-row",
  right: "inset-y-0 right-0 flex-row",
} as const

/**
 * Seven uneven bands of color, strongest at an edge and fading inward over
 * 26px. Place inside a positioned parent; its background, padding and corner
 * clipping belong to that parent. The lines ignore the pointer and are hidden
 * from assistive tech. A span root also fits inside a button or link.
 */
function CascadeLines({
  variant = "warm",
  edge = variant === "warm" ? "top" : "bottom",
  className,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** Red-to-amber `warm`, or blue `cool`. Defaults to `warm`. */
  variant?: keyof typeof BANDS
  /** The edge the bands fall from. Defaults to top for warm, bottom for cool. */
  edge?: keyof typeof EDGES
}) {
  const vertical = edge === "left" || edge === "right"
  const near = edge === "top" || edge === "left"
  const bands = BANDS[variant]
  // Bands are listed edge-first, so the far edges lay them out in reverse.
  const ordered = near ? bands : bands.toReversed()

  return (
    <span
      aria-hidden="true"
      data-slot="cascade-lines"
      data-edge={edge}
      data-variant={variant}
      className={cn(
        "pointer-events-none absolute flex",
        EDGES[edge],
        className
      )}
      {...props}
    >
      {ordered.map(([thickness, background, opacity], index) => (
        <i
          key={index}
          className={vertical ? "block h-full shrink-0" : "block w-full"}
          style={{
            [vertical ? "width" : "height"]: thickness,
            background,
            opacity,
          }}
        />
      ))}
    </span>
  )
}

export { CascadeLines }

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 type { ComponentProps } from "react"
import { cn } from "cn"

const EDGES = {
  top: "inset-x-0 top-0 h-0.5",
  bottom: "inset-x-0 bottom-0 h-0.5",
  left: "inset-y-0 left-0 w-0.5",
  right: "inset-y-0 right-0 w-0.5",
} as const

// React hoists one copy of this stylesheet for every instance.
const INTERACTION_CSS = `@media(hover:hover){:hover>.orbital-hover-edge{opacity:1}}:focus-visible>.orbital-hover-edge,:has(:is(a,button,summary,[role=button]):focus-visible)>.orbital-hover-edge,.orbital-hover-edge[data-active]{opacity:1}`

/**
 * A two-pixel rose–amber edge, fading out at both ends. Place as
 * a direct child of a positioned element: it appears when that parent is
 * hovered, has keyboard focus, or holds a link or button with keyboard focus.
 * Focus in a form field inside the parent leaves it off. No hover group or
 * event handlers are required. Reduced motion removes the opacity transition.
 * The line is decorative, ignores the pointer and uses a span root so it can
 * sit inside buttons and links as well as larger containers.
 */
function HoverEdge({
  edge = "bottom",
  active = false,
  className,
  style,
  ...props
}: Omit<ComponentProps<"span">, "children"> & {
  /** The edge carrying the line. Defaults to `bottom`. */
  edge?: keyof typeof EDGES
  /** Keep the line visible, for example on a selected item. Defaults to false. */
  active?: boolean
}) {
  const direction =
    edge === "left" || edge === "right" ? "to bottom" : "to right"
  return (
    <>
      <style href="01orbital-hover-edge" precedence="default">
        {INTERACTION_CSS}
      </style>
      <span
        aria-hidden="true"
        data-slot="hover-edge"
        data-edge={edge}
        data-active={active || undefined}
        className={cn(
          "orbital-hover-edge pointer-events-none absolute opacity-0 transition-opacity duration-400 motion-reduce:transition-none",
          EDGES[edge],
          className
        )}
        style={{
          background: `linear-gradient(${direction}, transparent, oklch(0.65 0.1 350) 20%, oklch(0.62 0.13 60) 50%, oklch(0.45 0.12 40) 80%, transparent)`,
          ...style,
        }}
        {...props}
      />
    </>
  )
}

export { HoverEdge }

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"

// The paragraph under a Heading or Subheading, in a hero or a section
// header. No width of its own: give it one with a `max-w-*` class when the
// layout wants it. Inherits the surrounding ink, so it reads over art;
// muted steps it down on a flat ground.
const textVariants = cva("w-full min-w-0 text-pretty", {
  variants: {
    /**
     * The text color. `default` (the default) keeps the inherited color.
     * `muted` uses `muted-foreground`.
     */
    variant: {
      default: "",
      muted: "text-muted-foreground",
    },
    /**
     * The text size: `md` (the default) 16px with 28px lines, `lg` 18px
     * with 32px lines, the lead under a page headline.
     */
    size: {
      md: "text-base/7",
      lg: "text-lg/8",
    },
  },
  defaultVariants: { variant: "default", size: "md" },
})

/**
 * The paragraph under a heading, a `p` by default. For several paragraphs,
 * pass `render={<div />}` and put your own `p` elements inside.
 *
 * `size` sets the text: `md` (the default) 16px with 28px lines, `lg` 18px
 * with 32px lines for the lead under a page headline. `variant="muted"`
 * uses the muted text color; the default inherits the ink around it.
 */
function Text({
  className,
  variant = "default",
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof textVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "text", variant, size },
    props: mergeProps<"p">(
      { className: cn(textVariants({ variant, size }), className) },
      props
    ),
  })
}

export { Text }

New

card-stock-supper-club

Stock Supper Club

Card example: a cream card-stock invitation with an inset hairline border and centered letterpress type. Shows an event invitation card.

pnpm dlx shadcn add @01orbital/card-stock-supper-club

npx shadcn add @01orbital/card-stock-supper-club

yarn shadcn add @01orbital/card-stock-supper-club

bunx --bun shadcn add @01orbital/card-stock-supper-club

New

card-stock-private-viewing

Stock Private Viewing

Card example: silver-on-black cardstock with a tipped-in black plate and a blind-pressed link. Shows an invitation-style card.

pnpm dlx shadcn add @01orbital/card-stock-private-viewing

npx shadcn add @01orbital/card-stock-private-viewing

yarn shadcn add @01orbital/card-stock-private-viewing

bunx --bun shadcn add @01orbital/card-stock-private-viewing

File

import { cn } from "cn"

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Text } from "@/components/text/text"
import { buttonVariants } from "@/components/ui/button"
import { Card, CardTitle } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Gallery / 06",
  title: "Objects in low light",
  body: "Ceramics and small sculptures from six independent studios.",
  cta: "Next stock study ↓",
} as const

// Printed-stock grain as an SVG noise tile.
const GRAIN =
  "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"

/** Silver-on-black card stock with a tipped-in black plate and a blind-pressed link. */
export default function CardStockPrivateViewing() {
  return (
    <div className="w-full bg-background text-foreground">
      <section
        data-slot="card-stock"
        className="dark relative isolate w-full overflow-hidden bg-card p-7 text-foreground"
      >
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 bg-size-[150px] opacity-10 mix-blend-screen"
          style={{ backgroundImage: GRAIN }}
        />
        <div className="relative">
          <Card
            data-slot="card-stock-black-plate"
            className="dark relative block gap-0 overflow-visible rounded-none border border-border bg-background p-7 text-[length:inherit] text-foreground shadow-[inset_0_1px_0_oklch(0.841_0.011_95/0.18),0_30px_60px_-24px_oklch(0_0_0/0.7)] ring-0 *:[img:first-child]:rounded-t-none *:[img:last-child]:rounded-b-none"
          >
            <Eyebrow variant="mono" tone="ink" className="tracking-widest">
              {COPY.eyebrow}
            </Eyebrow>
            <CardTitle className="mt-12 text-3xl font-light tracking-tight">
              {COPY.title}
            </CardTitle>
            <Text variant="muted" className="mt-4 max-w-xs text-sm/6">
              {COPY.body}
            </Text>
            <a
              href="#"
              className={cn(
                buttonVariants({ variant: null, size: null }),
                "shadow-[inset_0_1px_0_color-mix(in oklch, var(--foreground) 18%, transparent),0_2px_5px_color-mix(in_oklch,var(--foreground)_12%,transparent)] mt-8 h-auto gap-1.5 rounded-sm border-border bg-muted px-6 py-3 text-sm text-foreground transition-[background-color,box-shadow,translate] hover:bg-card active:shadow-[inset_0_2px_3px_color-mix(in_oklch,var(--foreground)_18%,transparent)]"
              )}
            >
              {COPY.cta}
            </a>
          </Card>
        </div>
      </section>
    </div>
  )
}

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 { 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"

// The paragraph under a Heading or Subheading, in a hero or a section
// header. No width of its own: give it one with a `max-w-*` class when the
// layout wants it. Inherits the surrounding ink, so it reads over art;
// muted steps it down on a flat ground.
const textVariants = cva("w-full min-w-0 text-pretty", {
  variants: {
    /**
     * The text color. `default` (the default) keeps the inherited color.
     * `muted` uses `muted-foreground`.
     */
    variant: {
      default: "",
      muted: "text-muted-foreground",
    },
    /**
     * The text size: `md` (the default) 16px with 28px lines, `lg` 18px
     * with 32px lines, the lead under a page headline.
     */
    size: {
      md: "text-base/7",
      lg: "text-lg/8",
    },
  },
  defaultVariants: { variant: "default", size: "md" },
})

/**
 * The paragraph under a heading, a `p` by default. For several paragraphs,
 * pass `render={<div />}` and put your own `p` elements inside.
 *
 * `size` sets the text: `md` (the default) 16px with 28px lines, `lg` 18px
 * with 32px lines for the lead under a page headline. `variant="muted"`
 * uses the muted text color; the default inherits the ink around it.
 */
function Text({
  className,
  variant = "default",
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof textVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "text", variant, size },
    props: mergeProps<"p">(
      { className: cn(textVariants({ variant, size }), className) },
      props
    ),
  })
}

export { Text }

New

card-stock-dispatch

Stock Dispatch

Card example: an ink-blue cardstock with a postal masthead and a tipped, tilted cream plate. Shows a stationery-style card.

pnpm dlx shadcn add @01orbital/card-stock-dispatch

npx shadcn add @01orbital/card-stock-dispatch

yarn shadcn add @01orbital/card-stock-dispatch

bunx --bun shadcn add @01orbital/card-stock-dispatch

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Text } from "@/components/text/text"
import { Card, CardTitle } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  masthead: "Dispatch",
  issue: "VOL. 12",
  intro: "A monthly letter about making things that last.",
  eyebrow: "In this issue",
  title: "The tools we keep.",
  body: "Three makers on the objects that have earned a permanent place on their desks.",
} as const

// Printed-stock grain as an SVG noise tile.
const GRAIN =
  "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"

/** An ink-blue card stock with a postal masthead and a tipped, tilted cream plate. */
export default function CardStockDispatch() {
  return (
    <div className="w-full bg-background text-foreground">
      <section
        data-slot="card-stock"
        className="dark relative isolate w-full overflow-hidden bg-card p-7 text-foreground"
      >
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 bg-size-[150px] opacity-8 mix-blend-multiply"
          style={{ backgroundImage: GRAIN }}
        />
        <div className="relative">
          <div className="flex items-start justify-between gap-4 border-b border-border pb-5">
            <p className="text-2xl font-semibold tracking-tight">
              {COPY.masthead}
            </p>
            <span className="border border-dashed border-current/60 p-3 font-mono text-xs">
              {COPY.issue}
            </span>
          </div>
          <p className="mt-5 text-sm/6">{COPY.intro}</p>
          <Card
            data-slot="card-stock-plate"
            className="relative mt-8 block -rotate-2 gap-0 overflow-visible rounded-none border border-border bg-muted p-6 text-[length:inherit] text-foreground shadow-[inset_0_1px_0_oklch(1_0_0/0.8),0_2px_4px_oklch(0.300_0.021_83/0.1),0_22px_40px_-18px_oklch(0.300_0.021_83/0.4)] ring-0 *:[img:first-child]:rounded-t-none *:[img:last-child]:rounded-b-none"
          >
            <Eyebrow variant="mono" tone="ink" className="tracking-widest">
              {COPY.eyebrow}
            </Eyebrow>
            <CardTitle className="mt-4 text-2xl font-medium">
              {COPY.title}
            </CardTitle>
            <Text variant="muted" className="mt-3 text-sm/6">
              {COPY.body}
            </Text>
          </Card>
        </div>
      </section>
    </div>
  )
}

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 { 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"

// The paragraph under a Heading or Subheading, in a hero or a section
// header. No width of its own: give it one with a `max-w-*` class when the
// layout wants it. Inherits the surrounding ink, so it reads over art;
// muted steps it down on a flat ground.
const textVariants = cva("w-full min-w-0 text-pretty", {
  variants: {
    /**
     * The text color. `default` (the default) keeps the inherited color.
     * `muted` uses `muted-foreground`.
     */
    variant: {
      default: "",
      muted: "text-muted-foreground",
    },
    /**
     * The text size: `md` (the default) 16px with 28px lines, `lg` 18px
     * with 32px lines, the lead under a page headline.
     */
    size: {
      md: "text-base/7",
      lg: "text-lg/8",
    },
  },
  defaultVariants: { variant: "default", size: "md" },
})

/**
 * The paragraph under a heading, a `p` by default. For several paragraphs,
 * pass `render={<div />}` and put your own `p` elements inside.
 *
 * `size` sets the text: `md` (the default) 16px with 28px lines, `lg` 18px
 * with 32px lines for the lead under a page headline. `variant="muted"`
 * uses the muted text color; the default inherits the ink around it.
 */
function Text({
  className,
  variant = "default",
  size = "md",
  render,
  ...props
}: useRender.ComponentProps<"p"> & VariantProps<typeof textVariants>) {
  return useRender({
    defaultTagName: "p",
    render,
    state: { slot: "text", variant, size },
    props: mergeProps<"p">(
      { className: cn(textVariants({ variant, size }), className) },
      props
    ),
  })
}

export { Text }

New

card-stock-trail-ledger

Stock Trail Ledger

Card example: a sage field-guide plate with a numbered, ruled itinerary. Shows a card-stock list for travel or trail notes.

pnpm dlx shadcn add @01orbital/card-stock-trail-ledger

npx shadcn add @01orbital/card-stock-trail-ledger

yarn shadcn add @01orbital/card-stock-trail-ledger

bunx --bun shadcn add @01orbital/card-stock-trail-ledger

File

import {
  DescriptionList,
  DescriptionListDetails,
  DescriptionListItem,
  DescriptionListTerm,
} from "@/components/description-list/description-list"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Card, CardTitle } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Weekend field guide",
  title: "Take the ridge.",
  footnote: "6.4 MILES / BRING WATER",
} as const

const STOPS = [
  { name: "01 · Juniper trailhead", time: "8:00" },
  { name: "02 · East overlook", time: "9:30" },
  { name: "03 · Lunch at the creek", time: "12:00" },
] as const

// Printed-stock grain as an SVG noise tile.
const GRAIN =
  "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E\")"

/** A sage field-guide plate with a numbered, ruled itinerary. */
export default function CardStockTrailLedger() {
  return (
    <div className="w-full bg-background text-foreground">
      <section
        data-slot="card-stock"
        className="relative isolate w-full overflow-hidden bg-card p-6 text-foreground sm:p-9"
      >
        <div
          aria-hidden="true"
          className="pointer-events-none absolute inset-0 bg-size-[150px] opacity-8 mix-blend-multiply"
          style={{ backgroundImage: GRAIN }}
        />
        <div className="relative">
          <Card
            data-slot="card-stock-plate"
            className="relative block gap-0 overflow-visible rounded-none border border-border bg-muted p-7 text-[length:inherit] text-foreground shadow-[inset_0_1px_0_oklch(1_0_0/0.8),0_2px_4px_oklch(0.300_0.021_83/0.1),0_22px_40px_-18px_oklch(0.300_0.021_83/0.4)] ring-0 *:[img:first-child]:rounded-t-none *:[img:last-child]:rounded-b-none"
          >
            <Eyebrow variant="mono" tone="ink" className="tracking-[0.18em]">
              {COPY.eyebrow}
            </Eyebrow>
            <CardTitle className="mt-7 text-4xl font-semibold tracking-tight">
              {COPY.title}
            </CardTitle>
            <DescriptionList variant="divided" className="mt-8">
              {STOPS.map((stop) => (
                <DescriptionListItem key={stop.name} className="py-3">
                  <DescriptionListTerm className="text-inherit">
                    {stop.name}
                  </DescriptionListTerm>
                  <DescriptionListDetails className="text-inherit">
                    {stop.time}
                  </DescriptionListDetails>
                </DescriptionListItem>
              ))}
            </DescriptionList>
            <p className="mt-5 font-mono text-xs">{COPY.footnote}</p>
          </Card>
        </div>
      </section>
    </div>
  )
}

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 }

Card components

The library's own card components, each installed on its own.

activity-feed-card

Activity Feed Card

Activity log card for dashboards and audit history: a large display count, a timeline of actor, action and target events with times and optional comments, accent dots for featured items and an optional period summary footer. Open its docs page

pnpm dlx shadcn add @01orbital/activity-feed-card

npx shadcn add @01orbital/activity-feed-card

yarn shadcn add @01orbital/activity-feed-card

bunx --bun shadcn add @01orbital/activity-feed-card

activity-goal-card

Activity Goal Card

Goal tracker card for fitness and habit dashboards: a large adjustable target with minus and plus buttons and a recharts bar chart where entries that meet the goal fill in the accent above a dashed line. Requires recharts 3.8.0. Open its docs page

pnpm dlx shadcn add @01orbital/activity-goal-card

npx shadcn add @01orbital/activity-goal-card

yarn shadcn add @01orbital/activity-goal-card

bunx --bun shadcn add @01orbital/activity-goal-card

"use client"

import type { ComponentProps, ReactNode } from "react"
import { MinusIcon, PlusIcon } from "@phosphor-icons/react"
import { cn } from "cn"
import { Bar, BarChart, Rectangle, ReferenceLine } from "recharts"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { ChartContainer, type ChartConfig } from "@/components/ui/chart"
import { Separator } from "@/components/ui/separator"

/** One observation in the activity chart, compared with the current goal. */
type ActivityGoalEntry = {
  /** An identifier for the observation; it is not displayed by the card. */
  id: string
  /** A label for the observation; it is not displayed by the card. */
  name: string
  /** The measured amount, which sets the bar height. */
  value: number
}

/** Content and controlled goal settings, plus the stock `Card` props. */
type ActivityGoalCardProps = Omit<
  ComponentProps<typeof Card>,
  "title" | "children"
> & {
  /** The card's heading. */
  title: ReactNode
  /** Muted supporting text below the heading. */
  description?: ReactNode
  /** Observations in chart order; bars meeting the goal use the art accent. */
  data: readonly ActivityGoalEntry[]
  /** The current goal, shown above the chart and as its reference line. */
  value: number
  /** Called with the adjusted goal, clamped to `limits.min` and `limits.max`. */
  onValueChange: (value: number) => void
  /** Bounds and increment used by the decrease and increase buttons. */
  limits: {
    /** The lowest goal the buttons allow. */
    min: number
    /** The highest goal the buttons allow. */
    max: number
    /** The amount added or subtracted on each button press. */
    step: number
  }
  /** Button names, chart labels and the goal summary text. */
  labels: {
    /** The accessible name of the decrease button. */
    decrease: string
    /** The accessible name of the increase button. */
    increase: string
    /** The small uppercase unit beside the goal value. */
    unit: ReactNode
    /** The period label below the chart, such as "Last 7 days". */
    range: ReactNode
    /** The series label supplied to the chart configuration. */
    series: string
    /** Returns summary text for the number of observations meeting the goal. */
    met: (count: number) => ReactNode
  }
  /** Controls or links placed in the card's footer. */
  actions?: ReactNode
}

/**
 * A card with an adjustable activity goal and a bar chart of observations.
 * The buttons request a new goal through `onValueChange`; the caller owns
 * `value`. Bars meeting the goal are highlighted, with a summary below.
 *
 * It takes no children. `className` and other props land on the `Card`.
 */
function ActivityGoalCard({
  title,
  description,
  data,
  value,
  onValueChange,
  limits,
  labels,
  actions,
  className,
  ...props
}: ActivityGoalCardProps) {
  const met = data.filter((entry) => entry.value >= value).length
  const chartConfig = { value: { label: labels.series } } satisfies ChartConfig

  function adjust(by: number) {
    onValueChange(Math.max(limits.min, Math.min(limits.max, value + by)))
  }

  return (
    <Card
      data-slot="activity-goal-card"
      className={cn("gap-8", className)}
      {...props}
    >
      <CardHeader>
        <CardTitle>{title}</CardTitle>
        {description != null && (
          <CardDescription>{description}</CardDescription>
        )}
      </CardHeader>
      <CardContent className="grid gap-8">
        <p className="flex items-center justify-between gap-4">
          <Button
            variant="ghost"
            size="icon"
            onClick={() => adjust(-limits.step)}
            disabled={value <= limits.min}
            focusableWhenDisabled
            className="data-disabled:pointer-events-none data-disabled:opacity-50"
          >
            <MinusIcon aria-hidden="true" />
            <span className="sr-only">{labels.decrease}</span>
          </Button>
          <span role="status" className="flex items-baseline gap-2">
            <span className="font-display text-5xl tracking-tight tabular-nums">
              {value}
            </span>
            <span className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
              {labels.unit}
            </span>
          </span>
          <Button
            variant="ghost"
            size="icon"
            onClick={() => adjust(limits.step)}
            disabled={value >= limits.max}
            focusableWhenDisabled
            className="data-disabled:pointer-events-none data-disabled:opacity-50"
          >
            <PlusIcon aria-hidden="true" />
            <span className="sr-only">{labels.increase}</span>
          </Button>
        </p>
        <figure className="grid gap-3">
          <ChartContainer config={chartConfig} className="h-28 w-full">
            <BarChart
              data={[...data]}
              barCategoryGap={6}
              margin={{ top: 4, bottom: 0 }}
            >
              <ReferenceLine
                y={value}
                ifOverflow="extendDomain"
                stroke="var(--art-accent)"
                strokeDasharray="2 4"
                strokeWidth={1}
              />
              <Bar
                dataKey="value"
                radius={0}
                maxBarSize={3}
                shape={(barProps) => (
                  <Rectangle
                    {...barProps}
                    fill={
                      typeof barProps.value === "number" &&
                      barProps.value >= value
                        ? "var(--art-accent)"
                        : "var(--muted-foreground)"
                    }
                  />
                )}
              />
            </BarChart>
          </ChartContainer>
          <Separator />
          <figcaption className="flex items-baseline justify-between">
            <span className="font-mono text-xs tracking-widest text-muted-foreground uppercase">
              {labels.range}
            </span>
            <span className="text-sm/7 tabular-nums">{labels.met(met)}</span>
          </figcaption>
        </figure>
      </CardContent>
      {actions != null && <CardFooter>{actions}</CardFooter>}
    </Card>
  )
}

export { ActivityGoalCard }

bento-cell

Bento Cell

Bento grid and cell components for landing pages and portfolios: a two, three, four or six column grid with a thin seam or wider gutter, and cells with an optional large outer corner, ink wash, fading media and caption slots. Open its docs page

pnpm dlx shadcn add @01orbital/bento-cell

npx shadcn add @01orbital/bento-cell

yarn shadcn add @01orbital/bento-cell

bunx --bun shadcn add @01orbital/bento-cell

bento-window

Bento Window

Glass window row for bento layouts and hero art: slices one painting across several framed panes, with helpers for offsets and mullion seams, caption parts and an optional slow pan that stops under reduced motion. Open its docs page

pnpm dlx shadcn add @01orbital/bento-window

npx shadcn add @01orbital/bento-window

yarn shadcn add @01orbital/bento-window

bunx --bun shadcn add @01orbital/bento-window

cover-card

Cover Card

Image card for blog posts and portfolios with a full-bleed cover that zooms while the whole card lifts on hover or focus, plus header, title, description, action and a one-line truncated footer. Open its docs page

pnpm dlx shadcn add @01orbital/cover-card

npx shadcn add @01orbital/cover-card

yarn shadcn add @01orbital/cover-card

bunx --bun shadcn add @01orbital/cover-card

engraved-card

Engraved Card

Metal membership or bank card with a topographic contour pattern in metals from graphite to lime, a contact chip, an optional printed wordmark and horizontal or vertical orientation. ISO card proportions. Open its docs page

pnpm dlx shadcn add @01orbital/engraved-card

npx shadcn add @01orbital/engraved-card

yarn shadcn add @01orbital/engraved-card

bunx --bun shadcn add @01orbital/engraved-card

headline-card

Headline Card

Article or case study card for feature grids: an optional meta line, a display title, a muted description, a round arrow link at the top right and a byline pinned to the bottom so card rows align at equal height. Open its docs page

pnpm dlx shadcn add @01orbital/headline-card

npx shadcn add @01orbital/headline-card

yarn shadcn add @01orbital/headline-card

bunx --bun shadcn add @01orbital/headline-card

File

import type { ComponentProps } from "react"
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"

import { buttonVariants } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/**
 * A card for a headline, such as an article or a case study. Compose it from
 * its parts: a `HeadlineCardHeader` holding an optional `HeadlineCardMeta`,
 * the `HeadlineCardTitle`, a `HeadlineCardDescription` and a
 * `HeadlineCardLink`, then a `HeadlineCardFooter` pushed to the bottom. It is
 * the kit's `Card`, styled; at least 320px tall, with padding that grows from
 * 32px to 40px on screens 42rem and wider. The title steps from 24px to 30px
 * once the card is 24rem wide, reading the stock `card-header` container.
 *
 * It uses the card background unless you pass a surface utility, such as
 * `surface-frost`, in `className`. Every part takes `className` to restyle it.
 */
function HeadlineCard({ className, ...props }: ComponentProps<typeof Card>) {
  return (
    <Card
      data-slot="headline-card"
      className={cn(
        "min-h-80 gap-8 [--card-spacing:--spacing(8)] min-[42rem]:[--card-spacing:--spacing(10)]",
        className
      )}
      {...props}
    />
  )
}

/**
 * The card's top block, which holds the meta, title, description and link.
 * The stock `card-header` container, so the title steps on its width. The copy is capped at 28rem and
 * the link sits at the far edge.
 */
function HeadlineCardHeader({
  className,
  ...props
}: ComponentProps<typeof CardHeader>) {
  return (
    <CardHeader
      data-slot="headline-card-header"
      className={cn(
        "grid-cols-[minmax(0,var(--container-md))] justify-between gap-4 has-data-[slot=card-action]:grid-cols-[minmax(0,var(--container-md))_auto]",
        className
      )}
      {...props}
    />
  )
}

/**
 * A line above the headline, such as a category and a date. It takes any
 * content and has no styling of its own.
 */
function HeadlineCardMeta({ className, ...props }: ComponentProps<"div">) {
  return <div data-slot="headline-card-meta" className={className} {...props} />
}

/**
 * The headline, read as a level-3 heading, in the body font (Geist). Pass
 * `aria-level` to change the level.
 */
function HeadlineCardTitle({
  className,
  ...props
}: ComponentProps<typeof CardTitle>) {
  return (
    <CardTitle
      data-slot="headline-card-title"
      role="heading"
      aria-level={3}
      className={cn(
        "text-2xl/8 font-[450] tracking-[-0.04em] text-pretty @sm/card-header:text-3xl/9",
        className
      )}
      {...props}
    />
  )
}

/** The text under the headline, at 75% of the card's text color. */
function HeadlineCardDescription({
  className,
  ...props
}: ComponentProps<typeof CardDescription>) {
  return (
    <CardDescription
      data-slot="headline-card-description"
      className={cn("text-base/7 text-pretty text-current/75", className)}
      {...props}
    />
  )
}

/**
 * The round arrow link at the top right of the header. Give it an
 * `aria-label`, such as "Read guide: …", since it shows only an icon; `href`
 * is where it goes. `className` goes on the link itself.
 */
function HeadlineCardLink({ className, ...props }: ComponentProps<"a">) {
  return (
    <CardAction>
      <a
        data-slot="button"
        className={cn(
          buttonVariants({ variant: "secondary", size: "icon-lg" }),
          className
        )}
        {...props}
      >
        <ArrowRightIcon aria-hidden="true" />
      </a>
    </CardAction>
  )
}

/**
 * The card's bottom row, pushed to the bottom: a wrapping flex row with the
 * items centered and spread apart, 24px by 8px gaps, in 12px text. Put a
 * `Byline size="sm"` on the left and a button or link on the right.
 */
function HeadlineCardFooter({
  className,
  ...props
}: ComponentProps<typeof CardFooter>) {
  return (
    <CardFooter
      data-slot="headline-card-footer"
      className={cn(
        "mt-auto flex-wrap justify-between gap-x-6 gap-y-2 text-xs/5",
        className
      )}
      {...props}
    />
  )
}

export {
  HeadlineCard,
  HeadlineCardDescription,
  HeadlineCardFooter,
  HeadlineCardHeader,
  HeadlineCardLink,
  HeadlineCardMeta,
  HeadlineCardTitle,
}

import {
  Byline,
  BylineDescription,
  BylineName,
} from "@/components/byline/byline"
import {
  HeadlineCard,
  HeadlineCardDescription,
  HeadlineCardFooter,
  HeadlineCardHeader,
  HeadlineCardMeta,
  HeadlineCardTitle,
} from "@/components/card/headline-card"
import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { StatValue } from "@/components/stats/stats"
import { Button } from "@/components/ui/button"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Ostrelle / web performance",
  title: "A smaller site. A faster first impression.",
  description:
    "How the Ostrelle team cut the weight of its product pages while keeping the details that made them theirs.",
  client: "Ostrelle",
  byline: "Sample case study · illustrative metric",
  cta: "Save case study",
  metric: "−42%",
} as const

/**
 * A case-study HeadlineCard on blue stock: a mono label and a large figure
 * above the headline, both in Newsreader, and the client with a save
 * button in the footer.
 */
export default function HeadlineCardCaseStudy() {
  return (
    <HeadlineCard className="w-full max-w-md surface-sheen [--font-display:var(--font-serif)]">
      <HeadlineCardHeader>
        <HeadlineCardMeta>
          <div className="grid gap-4">
            <Eyebrow variant="mono" tone="ink">
              {COPY.eyebrow}
            </Eyebrow>
            <StatValue className="font-display text-[5rem]/none tracking-[-0.05em]">
              {COPY.metric}
            </StatValue>
          </div>
        </HeadlineCardMeta>
        <HeadlineCardTitle className="font-display font-normal tracking-[-0.025em]">
          {COPY.title}
        </HeadlineCardTitle>
        <HeadlineCardDescription>{COPY.description}</HeadlineCardDescription>
      </HeadlineCardHeader>
      <HeadlineCardFooter>
        <Byline size="sm">
          <BylineName>{COPY.client}</BylineName>
          <BylineDescription>{COPY.byline}</BylineDescription>
        </Byline>
        <Button variant="outline">{COPY.cta}</Button>
      </HeadlineCardFooter>
    </HeadlineCard>
  )
}

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 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 }

metal-card

Metal Face

Metal surface for any card or panel in silver, gold, graphite, platinum, rose gold, copper, brass, steel and more, with a top-right light pool, a lit edge and a frosted glass icon chip; render it onto a Headline Card for a linked metal feature card. Open its docs page

pnpm dlx shadcn add @01orbital/metal-card

npx shadcn add @01orbital/metal-card

yarn shadcn add @01orbital/metal-card

bunx --bun shadcn add @01orbital/metal-card

File

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

import {
  Metal,
  resolveMetal,
  type MetalInk,
  type MetalLike,
} from "@/components/texture/metal"

/**
 * A round frosted-glass chip, 44px across, for an icon. It blurs what is
 * behind it and carries a white rim and highlight. An `svg` inside is
 * centered and sized to 24px unless it has its own `size-` class.
 */
function GlassChip({
  className,
  children,
  ...props
}: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="glass-chip"
      className={cn(
        "relative size-11 shrink-0 overflow-hidden rounded-full shadow-[-7px_3px_18px_oklch(0_0_0/0.2)] [&_svg]:absolute [&_svg]:inset-0 [&_svg]:m-auto [&_svg:not([class*='size-'])]:size-6",
        className
      )}
      {...props}
    >
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-full bg-scene-foreground/10 backdrop-blur-md"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute inset-0 rounded-full border border-scene-foreground mask-[linear-gradient(-122deg,white,transparent_60%)] mix-blend-overlay"
      />
      <div
        aria-hidden="true"
        className="pointer-events-none absolute -top-2 left-9.5 h-12 w-11 rounded-full bg-scene-foreground opacity-70 mix-blend-overlay blur-lg"
      />
      {children}
    </div>
  )
}

/**
 * A surface with a metal finish, for anything you already have: pass that
 * surface as `render`, for example `render={<PricingCard />}` or
 * `render={<HeadlineCard />}`, and it gets the metal gradient, the light and
 * the lit top edge, with your content laid on top. A metal card is a
 * `HeadlineCard` rendered this way, with a `GlassChip` for its icon.
 *
 * `metal` is a named finish or one of your own; `ink` overrides the finish's
 * ink. Both show as `data-metal` and `data-ink`. Muted text inside takes 80%
 * of the text color so it stays readable on the metal. Without `render` it
 * is a plain `div`; with `render`, the rendered part keeps its own
 * `data-slot`.
 */
function MetalFace({
  metal = "silver",
  ink,
  render,
  className,
  style,
  children,
  ...props
}: useRender.ComponentProps<"div"> & {
  /**
   * The finish: `silver` (the default), `gold`, `graphite`, `platinum`,
   * `rose-gold`, `gunmetal`, `steel`, `nickel`, `black`, `bronze`, `brass`,
   * `copper`, `oxblood`, `blue-titanium` or `verdigris`, or a finish of your
   * own as `{ from, to, light, ink }`.
   */
  metal?: MetalLike
  /**
   * The text color on the metal: `light` is `text-scene-foreground`, `dark`
   * a fixed dark that does not flip with the page mode. Defaults to the
   * finish's own ink.
   */
  ink?: MetalInk
}) {
  const finish = resolveMetal(metal)
  return useRender({
    defaultTagName: "div",
    render,
    props: mergeProps<"div">(
      {
        className: cn(
          "relative isolate overflow-hidden text-scene-foreground ring-0 [--muted-foreground:color-mix(in_oklab,currentColor_80%,transparent)] *:not-aria-hidden:relative *:not-aria-hidden:z-2 data-[ink=dark]:text-[oklch(0.2_0.01_60)]",
          className
        ),
        style,
        children: (
          <>
            <Metal metal={metal} />
            {children}
          </>
        ),
      },
      {
        // A rendered part keeps its own slot.
        ...(render ? {} : { "data-slot": "metal-face" }),
        "data-metal": finish.name,
        "data-ink": ink ?? finish.ink,
        ...props,
      } as React.ComponentProps<"div">
    ),
  })
}

export { MetalFace, GlassChip }

import { BankIcon, CoinsIcon } from "@phosphor-icons/react/dist/ssr"

import {
  HeadlineCard,
  HeadlineCardDescription,
  HeadlineCardHeader,
  HeadlineCardLink,
  HeadlineCardMeta,
  HeadlineCardTitle,
} from "@/components/card/headline-card"
import {
  GlassChip,
  MetalFace,
} from "@/components/card/metal-card"

const COPY = {
  treasury: {
    title: "Treasury",
    description: "Keep reserves where they earn, with a same-day path to cash.",
  },
  payouts: {
    title: "Payouts",
    description: "Pay suppliers in forty currencies from one balance.",
  },
}

// A metal card is a HeadlineCard rendered on a MetalFace, with a GlassChip
// for its icon and the card's own link part.
export default function MetalCardDemo() {
  return (
    <div className="grid w-full max-w-3xl gap-6 sm:grid-cols-2">
      <MetalFace metal="silver" render={<HeadlineCard />}>
        <HeadlineCardHeader>
          <HeadlineCardMeta>
            <GlassChip aria-hidden="true">
              <BankIcon />
            </GlassChip>
          </HeadlineCardMeta>
          <HeadlineCardTitle>{COPY.treasury.title}</HeadlineCardTitle>
          <HeadlineCardDescription>
            {COPY.treasury.description}
          </HeadlineCardDescription>
          <HeadlineCardLink
            href="#"
            aria-label={`Open ${COPY.treasury.title}`}
          />
        </HeadlineCardHeader>
      </MetalFace>
      <MetalFace metal="graphite" render={<HeadlineCard />}>
        <HeadlineCardHeader>
          <HeadlineCardMeta>
            <GlassChip aria-hidden="true">
              <CoinsIcon />
            </GlassChip>
          </HeadlineCardMeta>
          <HeadlineCardTitle>{COPY.payouts.title}</HeadlineCardTitle>
          <HeadlineCardDescription>
            {COPY.payouts.description}
          </HeadlineCardDescription>
          <HeadlineCardLink
            href="#"
            aria-label={`Open ${COPY.payouts.title}`}
          />
        </HeadlineCardHeader>
      </MetalFace>
    </div>
  )
}

import type { ComponentProps } from "react"
import { ArrowRightIcon } from "@phosphor-icons/react/dist/ssr"
import { cn } from "cn"

import { buttonVariants } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/**
 * A card for a headline, such as an article or a case study. Compose it from
 * its parts: a `HeadlineCardHeader` holding an optional `HeadlineCardMeta`,
 * the `HeadlineCardTitle`, a `HeadlineCardDescription` and a
 * `HeadlineCardLink`, then a `HeadlineCardFooter` pushed to the bottom. It is
 * the kit's `Card`, styled; at least 320px tall, with padding that grows from
 * 32px to 40px on screens 42rem and wider. The title steps from 24px to 30px
 * once the card is 24rem wide, reading the stock `card-header` container.
 *
 * It uses the card background unless you pass a surface utility, such as
 * `surface-frost`, in `className`. Every part takes `className` to restyle it.
 */
function HeadlineCard({ className, ...props }: ComponentProps<typeof Card>) {
  return (
    <Card
      data-slot="headline-card"
      className={cn(
        "min-h-80 gap-8 [--card-spacing:--spacing(8)] min-[42rem]:[--card-spacing:--spacing(10)]",
        className
      )}
      {...props}
    />
  )
}

/**
 * The card's top block, which holds the meta, title, description and link.
 * The stock `card-header` container, so the title steps on its width. The copy is capped at 28rem and
 * the link sits at the far edge.
 */
function HeadlineCardHeader({
  className,
  ...props
}: ComponentProps<typeof CardHeader>) {
  return (
    <CardHeader
      data-slot="headline-card-header"
      className={cn(
        "grid-cols-[minmax(0,var(--container-md))] justify-between gap-4 has-data-[slot=card-action]:grid-cols-[minmax(0,var(--container-md))_auto]",
        className
      )}
      {...props}
    />
  )
}

/**
 * A line above the headline, such as a category and a date. It takes any
 * content and has no styling of its own.
 */
function HeadlineCardMeta({ className, ...props }: ComponentProps<"div">) {
  return <div data-slot="headline-card-meta" className={className} {...props} />
}

/**
 * The headline, read as a level-3 heading, in the body font (Geist). Pass
 * `aria-level` to change the level.
 */
function HeadlineCardTitle({
  className,
  ...props
}: ComponentProps<typeof CardTitle>) {
  return (
    <CardTitle
      data-slot="headline-card-title"
      role="heading"
      aria-level={3}
      className={cn(
        "text-2xl/8 font-[450] tracking-[-0.04em] text-pretty @sm/card-header:text-3xl/9",
        className
      )}
      {...props}
    />
  )
}

/** The text under the headline, at 75% of the card's text color. */
function HeadlineCardDescription({
  className,
  ...props
}: ComponentProps<typeof CardDescription>) {
  return (
    <CardDescription
      data-slot="headline-card-description"
      className={cn("text-base/7 text-pretty text-current/75", className)}
      {...props}
    />
  )
}

/**
 * The round arrow link at the top right of the header. Give it an
 * `aria-label`, such as "Read guide: …", since it shows only an icon; `href`
 * is where it goes. `className` goes on the link itself.
 */
function HeadlineCardLink({ className, ...props }: ComponentProps<"a">) {
  return (
    <CardAction>
      <a
        data-slot="button"
        className={cn(
          buttonVariants({ variant: "secondary", size: "icon-lg" }),
          className
        )}
        {...props}
      >
        <ArrowRightIcon aria-hidden="true" />
      </a>
    </CardAction>
  )
}

/**
 * The card's bottom row, pushed to the bottom: a wrapping flex row with the
 * items centered and spread apart, 24px by 8px gaps, in 12px text. Put a
 * `Byline size="sm"` on the left and a button or link on the right.
 */
function HeadlineCardFooter({
  className,
  ...props
}: ComponentProps<typeof CardFooter>) {
  return (
    <CardFooter
      data-slot="headline-card-footer"
      className={cn(
        "mt-auto flex-wrap justify-between gap-x-6 gap-y-2 text-xs/5",
        className
      )}
      {...props}
    />
  )
}

export {
  HeadlineCard,
  HeadlineCardDescription,
  HeadlineCardFooter,
  HeadlineCardHeader,
  HeadlineCardLink,
  HeadlineCardMeta,
  HeadlineCardTitle,
}

import { cn } from "cn"

// The finish from MetalCard as a texture: each metal is a paper gradient, the
// color of its light and the ink that reads on it (`light` for white text,
// `dark` for a fixed dark).
const METALS = {
  silver: {
    from: "oklch(0.62 0.012 265)",
    to: "oklch(0.36 0.008 265)",
    light: "0.95 0.01 265",
    ink: "light",
  },
  gold: {
    from: "oklch(0.66 0.07 85)",
    to: "oklch(0.4 0.07 60)",
    light: "0.93 0.09 95",
    ink: "light",
  },
  graphite: {
    from: "oklch(0.26 0.008 270)",
    to: "oklch(0.16 0.006 270)",
    light: "0.6 0.012 270",
    ink: "light",
  },
  platinum: {
    from: "oklch(0.86 0 0)",
    to: "oklch(0.66 0 0)",
    light: "1 0 0",
    ink: "dark",
  },
  "rose-gold": {
    from: "oklch(0.72 0.06 30)",
    to: "oklch(0.45 0.07 20)",
    light: "0.95 0.04 40",
    ink: "dark",
  },
  gunmetal: {
    from: "oklch(0.3 0 0)",
    to: "oklch(0.17 0 0)",
    light: "0.7 0 0",
    ink: "light",
  },
  steel: {
    from: "oklch(0.4 0 0)",
    to: "oklch(0.24 0 0)",
    light: "0.85 0 0",
    ink: "light",
  },
  nickel: {
    from: "oklch(0.55 0 0)",
    to: "oklch(0.33 0 0)",
    light: "0.95 0 0",
    ink: "light",
  },
  black: {
    from: "oklch(0.2 0 0)",
    to: "oklch(0.1 0 0)",
    light: "0.55 0 0",
    ink: "light",
  },
  bronze: {
    from: "oklch(0.52 0.07 70)",
    to: "oklch(0.3 0.05 55)",
    light: "0.93 0.09 95",
    ink: "light",
  },
  brass: {
    from: "oklch(0.7 0.1 95)",
    to: "oklch(0.44 0.08 80)",
    light: "0.97 0.08 100",
    ink: "light",
  },
  copper: {
    from: "oklch(0.6 0.11 45)",
    to: "oklch(0.36 0.09 35)",
    light: "0.92 0.08 60",
    ink: "light",
  },
  oxblood: {
    from: "oklch(0.38 0.1 20)",
    to: "oklch(0.2 0.06 15)",
    light: "0.8 0.08 30",
    ink: "light",
  },
  "blue-titanium": {
    from: "oklch(0.5 0.08 250)",
    to: "oklch(0.28 0.06 260)",
    light: "0.9 0.06 250",
    ink: "light",
  },
  verdigris: {
    from: "oklch(0.55 0.07 180)",
    to: "oklch(0.32 0.05 190)",
    light: "0.92 0.05 170",
    ink: "light",
  },
} as const

type MetalName = keyof typeof METALS
type MetalInk = "light" | "dark"
/** A finish of your own: the gradient's two stops, the light's color as an oklch triple, and the ink that reads on it. */
type MetalFinish = { from: string; to: string; light: string; ink?: MetalInk }
/** A named finish or a `MetalFinish` of your own. */
type MetalLike = MetalName | MetalFinish

const resolveMetal = (
  m: MetalLike
): Required<MetalFinish> & { name: string } =>
  typeof m === "string"
    ? { ...METALS[m], name: m }
    : { ink: "light", ...m, name: "custom" }

// Light off the top-right corner falls off as 1 / (1 + (d / 0.35)^2).
const pool = (c: string) =>
  `radial-gradient(ellipse 90% 80% at 72% 18%, oklch(${c} / 0.55) 0%, oklch(${c} / 0.46) 10%, oklch(${c} / 0.33) 20%, oklch(${c} / 0.18) 35%, oklch(${c} / 0.09) 50%, oklch(${c} / 0.03) 70%, transparent 100%)`

/**
 * The ink a finish takes: `light` (white text) on `silver`, `gold`,
 * `graphite`, `gunmetal`, `steel`, `nickel`, `black`, `bronze`, `brass`,
 * `copper`, `oxblood`, `blue-titanium` and `verdigris`; `dark` on the pale
 * `platinum` and `rose-gold`.
 */
const metalInk = (m: MetalLike): MetalInk => resolveMetal(m).ink

/**
 * Brushed metal for a surface you already have: a grained gradient, a pool of
 * light from the top right and a lit top edge. Place it inside a `relative`
 * parent, before the content; it fills the parent, follows its corner radius
 * and is hidden from assistive tech. The finish
 * decides the ink: `light` finishes read best in `text-scene-foreground`,
 * `dark` ones (`platinum`, `rose-gold`) in a dark ink.
 */
function Metal({
  metal = "silver",
  className,
  style,
  ...props
}: React.ComponentProps<"div"> & {
  /**
   * The finish: `silver` (the default), `gold`, `graphite`, `platinum`,
   * `rose-gold`, `gunmetal`, `steel`, `nickel`, `black`, `bronze`, `brass`,
   * `copper`, `oxblood`, `blue-titanium` or `verdigris`, or a finish of your
   * own as `{ from, to, light, ink }`. Each carries an `ink` (`light` or
   * `dark`) for the text that sits on it.
   */
  metal?: MetalLike
}) {
  const { from, to, light, name } = resolveMetal(metal)
  return (
    <div
      aria-hidden="true"
      data-slot="metal"
      data-metal={name}
      // surface-paper paints the gradient and lays the grain over the light
      // pool below; positioned absolute so it fills the parent.
      className={cn(
        "surface-paper pointer-events-none rounded-[inherit]",
        className
      )}
      style={
        {
          position: "absolute",
          inset: 0,
          "--paper-from": from,
          "--paper-to": to,
          "--paper-blend": "overlay",
          "--paper-grain": 0.35,
          "--paper-grain-dark": 0.35,
          ...style,
        } as React.CSSProperties
      }
      {...props}
    >
      <div className="absolute inset-0" style={{ background: pool(light) }} />
      {/* The top-lit edge, in overlay, fading downward. */}
      <div
        data-slot="metal-edge"
        className="absolute inset-0 z-10 rounded-[inherit] border border-scene-foreground/60 mask-[linear-gradient(white,transparent)] mix-blend-overlay transition-colors motion-reduce:transition-none"
      />
    </div>
  )
}

export { Metal, metalInk, resolveMetal }
export type { MetalName, MetalFinish, MetalLike, MetalInk }

split-card

Split Card

Rounded two-column promo card with copy on one side and a picture or scene on the other, stacking when narrow. Flip swaps the sides, and a hairline divider beside the media is optional. Open its docs page

pnpm dlx shadcn add @01orbital/split-card

npx shadcn add @01orbital/split-card

yarn shadcn add @01orbital/split-card

bunx --bun shadcn add @01orbital/split-card

File

import type { ComponentProps } from "react"
import { cn } from "cn"

import {
  Card,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"

/**
 * A wide card with copy on one side and a picture or scene on the other.
 * Compose it from its parts: a `SplitCardContent` holding a
 * `SplitCardHeader` (meta, `SplitCardTitle`, `SplitCardDescription`) and
 * `SplitCardActions`, then a `SplitCardMedia`. It is the kit's `Card` and
 * its parts, styled. Every part takes `className`.
 *
 * It responds to the width of the enclosing `Section`, not the screen. The
 * two halves stack until the section is 48rem wide, then sit side by side,
 * and the padding, title size and divider change at the same width. Outside
 * a `Section`, the halves always stack. As in the stock Card, the header is
 * the `card-header` container.
 */
function SplitCard({
  flip = false,
  className,
  ...props
}: ComponentProps<typeof Card> & {
  /** Once the halves sit side by side, puts the media on the left. */
  flip?: boolean
}) {
  return (
    <Card
      data-slot="split-card"
      data-flip={flip || undefined}
      className={cn(
        "group/split-card grid gap-0 py-0 text-base md:grid-cols-2",
        className
      )}
      {...props}
    />
  )
}

/** The copy half: centered, its padding growing with the section, holding the header and the actions 24px apart. */
function SplitCardContent({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="split-card-content"
      className={cn(
        "flex flex-col justify-center gap-6 p-8 md:p-10 group-data-flip/split-card:md:order-2 lg:p-14",
        className
      )}
      {...props}
    />
  )
}

/**
 * The copy's top block: an optional line of meta, the title and the
 * description, 24px apart, capped at 28rem so a line stays readable. The
 * stock `card-header` container, without the card's padding, since the
 * content half pads.
 */
function SplitCardHeader({
  className,
  ...props
}: ComponentProps<typeof CardHeader>) {
  return (
    <CardHeader
      data-slot="split-card-header"
      // w-full, because an inline-size container has no intrinsic width: without
      // it the header collapses when its parent does not stretch it.
      className={cn("w-full max-w-md gap-6 rounded-none px-0", className)}
      {...props}
    />
  )
}

/** The card's title, read as a level-3 heading: 24px, 30px once the section is 48rem wide. */
function SplitCardTitle({
  className,
  ...props
}: ComponentProps<typeof CardTitle>) {
  return (
    <CardTitle
      data-slot="split-card-title"
      role="heading"
      aria-level={3}
      className={cn(
        "text-2xl/8 font-[450] tracking-[-0.04em] text-balance md:text-3xl/9",
        className
      )}
      {...props}
    />
  )
}

/** Muted supporting text under the title, 16px with 28px lines. */
function SplitCardDescription({
  className,
  ...props
}: ComponentProps<typeof CardDescription>) {
  return (
    <CardDescription
      data-slot="split-card-description"
      className={cn("text-base/7 text-pretty", className)}
      {...props}
    />
  )
}

/** The card's buttons or links, in a row that wraps when they do not fit. */
function SplitCardActions({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="split-card-actions"
      className={cn("flex flex-wrap items-center gap-3", className)}
      {...props}
    />
  )
}

/**
 * The picture half: at least 24rem tall, centered and clipped. A scene fills
 * it with `absolute inset-0`; an `img` needs `size-full object-cover`.
 * `divider` (on by default) draws the hairline between the halves: along the
 * top while they stack, along the inner edge once they sit side by side.
 */
function SplitCardMedia({
  divider = true,
  className,
  ...props
}: ComponentProps<"div"> & {
  /** The hairline between the copy and the media. `false` removes it at every width. */
  divider?: boolean
}) {
  return (
    <div
      data-slot="split-card-media"
      className={cn(
        "relative grid min-h-96 place-items-center overflow-hidden group-data-flip/split-card:md:order-1",
        divider &&
          "border-t border-border md:border-t-0 md:before:absolute md:before:inset-y-0 md:before:left-0 md:before:z-1 md:before:w-px md:before:bg-border group-data-flip/split-card:md:before:right-0 group-data-flip/split-card:md:before:left-auto",
        className
      )}
      {...props}
    />
  )
}

export {
  SplitCard,
  SplitCardContent,
  SplitCardHeader,
  SplitCardTitle,
  SplitCardDescription,
  SplitCardActions,
  SplitCardMedia,
}

import type { ComponentProps } from "react"
import { cn } from "cn"

import {
  SplitCard,
  SplitCardActions,
  SplitCardContent,
  SplitCardDescription,
  SplitCardHeader,
  SplitCardMedia,
  SplitCardTitle,
} from "@/components/card/split-card"
import {
  Poster,
  PosterDescription,
  PosterFootnote,
  PosterLabel,
  PosterTitle,
} from "@/components/poster/poster"
import {
  Section,
  SectionContent,
} from "@/components/section/section"
import { buttonVariants } from "@/components/ui/button"

const COPY = {
  title: "The economics of delivering on a system",
  body: "A study of build time, review cycles and coherence across fifty launches.",
  cta: "Download",
  label: "01orbital.",
  posterTitle: "The economics of delivering on a system",
  posterBody: "Cost savings and coherence with the kit",
  footnote: "A study of fifty launches, 2026",
} as const

// report-download-01's art, copied here so the demo matches the block.
function OrbitRings({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      aria-hidden="true"
      className={cn(
        "pointer-events-none absolute inset-0 before:absolute before:top-[22%] before:left-[8%] before:size-44 before:rounded-full before:border before:border-foreground/25 after:absolute after:right-[6%] after:bottom-[10%] after:size-64 after:rounded-full after:border after:border-dashed after:border-foreground/25",
        className
      )}
      {...props}
    />
  )
}

function OrbitMark({ className, ...props }: ComponentProps<"span">) {
  return (
    <span
      aria-hidden="true"
      className={cn(
        "flex items-center gap-2 text-current before:size-8 before:rounded-full before:border before:border-current/80 after:size-12 after:rounded-full after:border after:border-current/80",
        className
      )}
      {...props}
    >
      <span className="w-10 border-t border-dashed border-current/80" />
    </span>
  )
}

export default function SplitCardDemo() {
  return (
    <Section>
      <SectionContent className="items-center">
        <SplitCard className="w-full max-w-5xl dark:surface-sheen">
          <SplitCardContent>
            <SplitCardHeader>
              <SplitCardTitle>{COPY.title}</SplitCardTitle>
              <SplitCardDescription>{COPY.body}</SplitCardDescription>
            </SplitCardHeader>
            <SplitCardActions>
              <a
                href="#"
                data-slot="button"
                className={cn(
                  buttonVariants({ variant: "secondary", size: "lg" })
                )}
              >
                {COPY.cta}
              </a>
            </SplitCardActions>
          </SplitCardContent>
          <SplitCardMedia divider={false}>
            <OrbitRings />
            <Poster className="dark rotate-3 text-shadow-legible">
              <img
                src="https://01orbital.dev/art/kit/layered-currents-415686.png"
                alt=""
                loading="lazy"
              />
              <PosterLabel>{COPY.label}</PosterLabel>
              <PosterTitle>{COPY.posterTitle}</PosterTitle>
              <PosterDescription>{COPY.posterBody}</PosterDescription>
              <OrbitMark className="mt-8" />
              <PosterFootnote>{COPY.footnote}</PosterFootnote>
            </Poster>
          </SplitCardMedia>
        </SplitCard>
      </SectionContent>
    </Section>
  )
}

import type { ComponentProps } from "react"
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"

// : every part below measures the section, not the viewport.
// The section paints the page ground and ink; `dark` flips both, art in
// SectionBackground covers the ground, a scene ink stamps it.
// The section is the band and the stack, as Card is the box and the stack:
// inside it one 80rem column carries the gutters and the gap between header,
// content and actions. size is the band: md 96 for a product section, lg
// 128 for a marquee, sm 64 for docs.
// className styles the outer section; children sit inside a centered column.
const sectionVariants = cva(
  "relative isolate w-full bg-background wrap-anywhere text-foreground",
  {
    variants: {
      /**
       * The band's top and bottom padding, and the gap between the parts
       * inside it. `sm` is 64px padding with 40px gaps. `md` (the default)
       * is 96px padding with 40px gaps, 64px once the section is 42rem
       * wide. `lg` is 128px padding with 64px gaps.
       */
      size: { sm: "py-16", md: "py-24", lg: "py-32" },
    },
    defaultVariants: { size: "md" },
  }
)

const columnVariants = cva(
  "mx-auto flex w-full max-w-7xl min-w-0 flex-col px-6 lg:px-10",
  {
    variants: {
      size: {
        sm: "gap-10",
        md: "gap-10 sm:gap-16",
        lg: "gap-16",
      },
    },
    defaultVariants: { size: "md" },
  }
)

/**
 * A full-width page band, as a `section`. It paints the page background and
 * text color, and centers its children in one column up to 80rem wide, with
 * side gutters and a gap between the header, content and actions.
 *
 * `size` sets the top and bottom padding (`sm` 64px, `md` 96px by default,
 * `lg` 128px) and, with it, the gap between parts. `className` lands on the
 * outer `section`; children go inside the column. `SectionColumns` and
 * blocks step at screen breakpoints for their layouts.
 * Add the `dark` class to paint it with the dark theme.
 */
function Section({
  className,
  size = "md",
  children,
  ...props
}: ComponentProps<"section"> & VariantProps<typeof sectionVariants>) {
  return (
    <section
      data-slot="section"
      data-size={size}
      className={cn(sectionVariants({ size }), className)}
      {...props}
    >
      <div data-slot="section-column" className={columnVariants({ size })}>
        {children}
      </div>
    </section>
  )
}

/**
 * A layer for art or a fill behind a section's content. Place it as a child
 * of `Section`: it covers the whole section, sits behind everything else in
 * it, and is hidden from assistive tech and the pointer.
 */
function SectionBackground({ className, ...props }: ComponentProps<"div">) {
  return (
    <div
      data-slot="section-background"
      aria-hidden="true"
      className={cn("pointer-events-none absolute inset-0 -z-10", className)}
      {...props}
    />
  )
}

// The body, as CardContent is to Card: a stack at 32 (sm 24) for a control
// and what it drives; lg (64) sets a header well apart from its body. width
// caps it: sm stays a reading measure at every size, md is prose, lg a form
// or cart, xl a list. full fills the frame at every size, so it always lines
// up with the header above it; md, lg and xl are centered columns that open up
// as the section widens.
const contentVariants = cva("mx-auto flex w-full min-w-0 flex-col", {
  variants: {
    /**
     * The gap between children: `sm` 24px, `md` (the default) 32px, `lg`
     * 64px.
     */
    size: {
      sm: "gap-6",
      md: "gap-8",
      lg: "gap-16",
    },
    /**
     * The column's maximum width; the column is centered. `full` (the
     * default) fills the section's column, so it lines up with the header.
     * `sm` stays 42rem at every width. `md`, `lg` and `xl` start at 42rem
     * and widen to 48rem once the section is 48rem wide; once it is 64rem
     * wide, `lg` widens to 56rem and `xl` to 64rem. `md` suits prose, `lg`
     * a form and `xl` a list.
     */
    width: {
      sm: "max-w-2xl",
      md: "max-w-2xl md:max-w-3xl",
      lg: "max-w-2xl md:max-w-3xl lg:max-w-4xl",
      xl: "max-w-2xl md:max-w-3xl lg:max-w-5xl",
      full: "max-w-7xl",
    },
  },
  defaultVariants: { size: "md", width: "full" },
})

/**
 * The body of a section, under `SectionHeader`: a centered column, a `div` by
 * default, that stacks its children.
 *
 * `size` sets the gap between children: `sm` 24px, `md` (the default) 32px,
 * `lg` 64px. `width` caps the column. `full` (the default) fills the section
 * column, so it lines up with the header. `sm` stays 42rem at every width.
 * `md`, `lg` and `xl` start at 42rem and widen as the section grows, to
 * 48rem, 56rem and 64rem: `md` suits prose, `lg` a form, `xl` a list.
 */
function SectionContent({
  className,
  size = "md",
  width = "full",
  render,
  ...props
}: useRender.ComponentProps<"div"> & VariantProps<typeof contentVariants>) {
  return useRender({
    defaultTagName: "div",
    render,
    state: { slot: "section-content", width },
    props: mergeProps<"div">(
      {
        className: cn(contentVariants({ size, width }), className),
      },
      props
    ),
  })
}

// equal splits the frame in half; intro gives a header two fifths and the
// list beside it three.
const columnsVariants = cva(
  "grid w-full max-w-2xl grid-cols-1 items-start gap-x-(--gutter) gap-y-(--row-gap) lg:max-w-none",
  {
    variants: {
      /**
       * How the two columns share the width once the section is 64rem wide.
       * `equal` (the default) splits it in half. `intro` gives the first
       * column two fifths and the second three fifths, for a header beside
       * a list. Below 64rem the columns stack, up to 42rem wide.
       */
      variant: {
        equal: "lg:grid-cols-2",
        intro: "lg:grid-cols-[2fr_3fr]",
      },
    },
    defaultVariants: { variant: "equal" },
  }
)

/**
 * Two columns side by side once the section is 64rem wide, stacked and
 * capped at 42rem below that. `equal` (the default) splits the width in
 * half. `intro` gives the first column two fifths and the second three, for
 * a header beside a list.
 */
function SectionColumns({
  className,
  variant = "equal",
  ...props
}: ComponentProps<"div"> & VariantProps<typeof columnsVariants>) {
  return (
    <div
      data-slot="section-columns"
      data-variant={variant}
      className={cn(columnsVariants({ variant }), className)}
      {...props}
    />
  )
}

// The header owns the width, for the title too: a Subheading inside has no
// measure of its own. md is a section introduction, lg a centered CTA whose
// description wants room. split sets SectionActions beside the title.
const headerVariants = cva("group/section-header grid w-full min-w-0 gap-6", {
  variants: {
    /**
     * The header's maximum width: `md` (the default) 42rem, `lg` 56rem.
     * Not available with `variant="split"`.
     */
    size: {
      md: "max-w-2xl",
      lg: "max-w-4xl",
    },
    /**
     * `start` (the default) aligns the header's parts and text to the
     * start. `center` centers the header in its parent and centers its
     * parts and text; give a `SectionActions` inside it `align="center"`.
     * Not available with `variant="split"`.
     */
    align: {
      start: "justify-items-start",
      center: "mx-auto justify-items-center text-center",
    },
    variant: {
      stack: "",
      split:
        "max-w-none sm:grid-cols-[1fr_auto] sm:items-end sm:*:data-[slot=section-actions]:col-start-2 sm:*:data-[slot=section-actions]:row-start-1",
    },
  },
  defaultVariants: { align: "start", size: "md", variant: "stack" },
})

type SectionHeaderProps = ComponentProps<"div"> &
  (
    | (Omit<VariantProps<typeof headerVariants>, "variant"> & {
        /**
         * `stack` (the default) stacks the parts with 24px gaps. `split`
         * fills the full width and, once the section is 42rem wide, sets
         * `SectionActions` to the right of the title with their bottoms
         * aligned; it expects that `SectionActions`. `split` takes no `size` or `align`.
         */
        variant?: "stack"
      })
    | {
        /**
         * `stack` (the default) stacks the parts with 24px gaps. `split`
         * fills the full width and, once the section is 42rem wide, sets
         * `SectionActions` to the right of the title with their bottoms
         * aligned; it expects that `SectionActions`. `split` takes no `size` or `align`.
         */
        variant: "split"
        size?: never
        align?: never
      }
  )

/**
 * The top of a section. Holds a `SectionTitleGroup`, an optional `Text`
 * and optional `SectionActions`, stacked with 24px gaps.
 *
 * `size` caps its width: `md` (the default) 42rem, `lg` 56rem.
 * `align="center"` centers it and its text. The `split` variant fills
 * the full width and, once the section is 42rem wide, sets `SectionActions`
 * to the right of the title with their bottoms aligned. It takes no `size`
 * or `align`.
 */
function SectionHeader({
  className,
  align = "start",
  size = "md",
  variant = "stack",
  ...props
}: SectionHeaderProps) {
  return (
    <div
      data-slot="section-header"
      data-align={align}
      data-size={size}
      data-variant={variant}
      className={cn(headerVariants({ align, size, variant }), className)}
      {...props}
    />
  )
}

// A CTA's actions are the Section's sibling of its header, on the section
// stack, or sit inside the header; align centers the row either way.
const sectionActionsVariants = cva(
  "flex max-w-full flex-wrap items-center gap-4",
  {
    variants: {
      /**
       * `start` (the default) packs the row at the start. `center` centers
       * it.
       */
      align: {
        start: "",
        center: "justify-center",
      },
    },
    defaultVariants: { align: "start" },
  }
)

/**
 * A row of buttons or links, with 16px gaps, that wraps when space runs out.
 * Place it in `SectionHeader`, or directly in `Section` after the header for
 * a call to action. `align="center"` centers the row.
 */
function SectionActions({
  className,
  align = "start",
  ...props
}: ComponentProps<"div"> & VariantProps<typeof sectionActionsVariants>) {
  return (
    <div
      data-slot="section-actions"
      data-align={align}
      className={cn(sectionActionsVariants({ align }), className)}
      {...props}
    />
  )
}

// Stacks whatever it wraps: an eyebrow and title at sm, a title and its
// subheading at lg. row sets two columns side by side from 1024px, their
// feet level; gap is then the space when they stack.
const titleGroupVariants = cva("grid w-full min-w-0", {
  variants: {
    /**
     * `column` (the default) stacks the children. `row` sets them in two
     * columns once the section is 64rem wide, with their bottoms aligned
     * and 64px (`--gutter`) between the columns.
     */
    direction: {
      column: "",
      row: "lg:grid-cols-2 lg:items-end lg:gap-x-(--gutter)",
    },
    /**
     * The space between the children: `sm` (the default) 8px, `md` 12px,
     * `lg` 24px. In a `row` group, once the section is 64rem wide, it sets
     * only the space between rows.
     */
    gap: {
      sm: "gap-2",
      md: "gap-3",
      lg: "gap-6",
    },
  },
  defaultVariants: { direction: "column", gap: "sm" },
})

/**
 * Stacks a section title with what belongs to it, such as an eyebrow above
 * it or a subheading below. `gap` sets the space between them: `sm` (the
 * default) 8px, `md` 12px, `lg` 24px.
 *
 * `direction="row"` sets two children side by side once the section is 64rem
 * wide, with their bottoms aligned. `gap` then applies only while they stack.
 */
function SectionTitleGroup({
  className,
  direction = "column",
  gap = "sm",
  ...props
}: ComponentProps<"div"> & VariantProps<typeof titleGroupVariants>) {
  return (
    <div
      data-slot="section-title-group"
      data-direction={direction}
      data-gap={gap}
      className={cn(titleGroupVariants({ direction, gap }), className)}
      {...props}
    />
  )
}

export {
  Section,
  SectionBackground,
  SectionContent,
  SectionColumns,
  SectionHeader,
  SectionTitleGroup,
  SectionActions,
}

Dependencies

npm: cn. The CLI installs them for you.

No other registry pieces.

Card

ExamplesCopy Anchor Link

PaperNew

BevelNew

Bevel RaisedNew

Cascade WarmNew

Cascade CoolNew

Color Field FrameNew

Print ProductNew

Collection TileNew

Project PreviewNew

Calendar EventNew

Dark FrameNew

Horizontal FrameNew

Newsletter SignupNew

Palette PreviewNew

Clarice Open StudioNew

Client ApprovalNew

Cascade After HoursNew

Stock Supper ClubNew

Stock Private ViewingNew

Stock DispatchNew

Stock Trail LedgerNew

Card componentsCopy Anchor Link

Activity Feed Card

Activity Goal Card

Bento Cell

Bento Window

Cover Card

Engraved Card

Headline Card

Metal Face

Split Card

DependenciesCopy Anchor Link

Examples

New

New

New

New

New

New

New

New

New

New

New

New

New

New

New

New

New

New

New

New

New

Card components

Dependencies