Badge: React Badge component

Badge example: a small pill label in default, secondary, destructive, outline, ghost and link variants. It can render as a link, for statuses, tags and counts.

pnpm dlx shadcn add @01orbital/badge

File

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 badgeVariants = cva(
  "group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-3xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!",
  {
    variants: {
      variant: {
        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
        secondary:
          "bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80",
        destructive:
          "bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20",
        outline:
          "border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground",
        ghost:
          "hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50",
        link: "text-primary underline-offset-4 hover:underline",
      },
    },
    defaultVariants: {
      variant: "default",
    },
  }
)

function Badge({
  className,
  variant = "default",
  render,
  ...props
}: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>) {
  return useRender({
    defaultTagName: "span",
    props: mergeProps<"span">(
      {
        className: cn(badgeVariants({ variant }), className),
      },
      props
    ),
    render,
    state: {
      slot: "badge",
      variant,
    },
  })
}

export { Badge, badgeVariants }

import { Badge } from "@/components/ui/badge"

// The copy: change text here, not in the markup.
const COPY = {
  badge: "Pro",
} as const

/** Badge in its default style. */
export default function BadgeDemo() {
  return <Badge>{COPY.badge}</Badge>
}

Examples

New

badge-neoconstruct

Neoconstruct

Badge example in the Neoconstruct poster style: square, uppercase, with a heavy border in the theme's gold. Brings the Neoconstruct theme with it.

pnpm dlx shadcn add @01orbital/badge-neoconstruct

npx shadcn add @01orbital/badge-neoconstruct

yarn shadcn add @01orbital/badge-neoconstruct

bunx --bun shadcn add @01orbital/badge-neoconstruct

import { Badge } from "@/components/ui/badge"

// The copy: change text here, not in the markup.
const COPY = {
  badge: "Beta",
} as const

export default function BadgeNeoconstruct() {
  return (
    <Badge
      data-theme="neoconstruct"
      variant={null}
      className="h-auto gap-1.5 rounded-none border-2 border-border bg-accent px-3 py-1 font-heading text-xs font-normal tracking-wider text-accent-foreground uppercase"
    >
      {COPY.badge}
    </Badge>
  )
}

New

badge-neoconstruct-ribbon

Neoconstruct Ribbon

Badge example: a poster-red Neoconstruct badge with a gold corner folded in. Shows a ribbon-style badge for sale or featured labels.

pnpm dlx shadcn add @01orbital/badge-neoconstruct-ribbon

npx shadcn add @01orbital/badge-neoconstruct-ribbon

yarn shadcn add @01orbital/badge-neoconstruct-ribbon

bunx --bun shadcn add @01orbital/badge-neoconstruct-ribbon

import { Badge } from "@/components/ui/badge"

// The copy: change text here, not in the markup.
const COPY = {
  badge: "Sold out",
} as const

export default function BadgeNeoconstructRibbon() {
  return (
    <Badge
      data-theme="neoconstruct"
      variant={null}
      className="relative h-auto gap-2 overflow-visible rounded-none border-2 border-border bg-main px-4 py-1 font-heading text-xs font-normal tracking-wider text-main-foreground uppercase"
    >
      {/* The gold corner folded into the ribbon. */}
      <span
        aria-hidden="true"
        className="absolute top-0 right-0 size-0 border-t-14 border-l-14 border-t-accent border-l-transparent"
      />
      {COPY.badge}
    </Badge>
  )
}

New

badge-neoconstruct-fundraiser

Neoconstruct Fundraiser

Badge example: a Neoconstruct fundraising card with a gold match badge, a red ribbon badge, a progress bar and a disclosure. Shows poster-style badges on a donation card.

pnpm dlx shadcn add @01orbital/badge-neoconstruct-fundraiser

npx shadcn add @01orbital/badge-neoconstruct-fundraiser

yarn shadcn add @01orbital/badge-neoconstruct-fundraiser

bunx --bun shadcn add @01orbital/badge-neoconstruct-fundraiser

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Marker } from "@/components/graphics/neoconstruct-marker"
import { Grain } from "@/components/texture/grain"
import { Badge } from "@/components/ui/badge"
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 = {
  label: "Mend Fund winter repair campaign",
  eyebrow: "Mend Fund",
  badge: "1:1 match",
  description:
    "A $45 gift buys a weather-sealing kit. North County Hardware will match the next $4,000 donated through November 15.",
  raised: "raised toward $10,000",
  progress: "$6,240 raised toward $10,000",
  summary: "How the match works",
  terms:
    "Gifts received November 3–15 are matched dollar for dollar, up to $4,000 total. Matched funds are included in the amount above. Kits go to households referred by the county’s home-repair team.",
  title: "Keep 80 homes",
  aside: "warm this winter.",
  amount: "$6,240",
  deadline: "12 days left",
} as const

/** A Neoconstruct fundraising card with a gold match badge, a red ribbon badge, a progress bar and a disclosure. */
export default function BadgeNeoconstructFundraiser() {
  return (
    <section
      data-theme="neoconstruct"
      aria-label={COPY.label}
      className="relative isolate w-full max-w-lg overflow-hidden border-2 border-border bg-background p-6 text-foreground"
    >
      <Grain variant="paper" opacity={0.15} />
      <div className="relative">
        <header className="flex flex-wrap items-center justify-between gap-4">
          <Eyebrow variant="caps" tone="ink" className="text-sm font-bold">
            {COPY.eyebrow}
          </Eyebrow>
          <Badge
            data-theme="neoconstruct"
            variant={null}
            className="h-auto gap-1.5 rounded-none border-2 border-border bg-accent px-3 py-1 font-sans text-xs font-bold font-normal tracking-wider text-accent-foreground uppercase"
          >
            {COPY.badge}
          </Badge>
        </header>
        <h3 className="mt-8 text-3xl leading-tight font-bold tracking-tight">
          {COPY.title}
          <br />
          {COPY.aside}
        </h3>
        <p className="mt-4 max-w-sm text-sm leading-6">{COPY.description}</p>
        <div className="mt-7 flex flex-wrap items-end justify-between gap-4">
          <div>
            <p className="text-3xl font-bold tabular-nums">{COPY.amount}</p>
            <p className="mt-1 text-xs text-muted-foreground">{COPY.raised}</p>
          </div>
          <Badge
            data-theme="neoconstruct"
            variant={null}
            className="relative h-auto gap-2 overflow-visible rounded-none border-2 border-border bg-main px-4 py-1 font-sans text-xs font-bold font-normal tracking-wider text-main-foreground uppercase"
          >
            <span
              aria-hidden="true"
              className="absolute top-0 right-0 size-0 border-t-14 border-l-14 border-t-accent border-l-transparent"
            />
            <Marker variant="band" className="size-3" />
            {COPY.deadline}
          </Badge>
        </div>
        <Progress
          value={6240}
          max={10000}
          aria-label={COPY.progress}
          className="mt-5"
        />
        <Collapsible className="mt-5 border-t-2 border-border pt-3 text-xs leading-6">
          <CollapsibleTrigger className="w-full cursor-pointer py-2 text-left font-semibold focus-visible:outline-2 focus-visible:outline-offset-4">
            {COPY.summary}
          </CollapsibleTrigger>
          <CollapsibleContent>
            <p className="mt-2">{COPY.terms}</p>
          </CollapsibleContent>
        </Collapsible>
      </div>
    </section>
  )
}

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}")`

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

/**
 * Constructivist marks, drawn with ruler and compass. Each one comes from the
 * period's own vocabulary: Lissitzky's wedge into a circle, the diagonal band,
 * Suprematist disc and square, the arrow, the compass-drawn target, the
 * printer's registration mark and the heavy typographic rule.
 * Numerals live in `MarkerNumeral`.
 */
const shapes = {
  // A wedge driving into a ring.
  wedge: (
    <>
      <circle
        cx="15"
        cy="12"
        r="6.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <polygon points="1,6.5 16,12 1,17.5" />
    </>
  ),
  // A thick band at 30 degrees.
  band: <polygon points="2,15.5 19,5.5 22,10 5,20" />,
  disc: <circle cx="12" cy="12" r="8" />,
  // Two compass-drawn rings around a dot.
  target: (
    <>
      <circle
        cx="12"
        cy="12"
        r="9"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <circle cx="12" cy="12" r="3.5" />
    </>
  ),
  // The printer's registration mark: a cross through a ring.
  registration: (
    <>
      <circle
        cx="12"
        cy="12"
        r="6.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <path d="M11 1h2v22h-2zM1 11h22v2H1z" />
    </>
  ),
  arrow: <path d="M2 10h12V5l8 7-8 7v-5H2z" />,
  square: <rect x="5" y="5" width="14" height="14" />,
  bar: <rect x="2" y="9" width="20" height="6" />,
} as const

type MarkerVariant = keyof typeof shapes

/** A marker choice for components: any shape, or "none" to render nothing. */
type MarkerProp = MarkerVariant | "none"

/**
 * A small Constructivist mark for buttons, badges and list items: a wedge,
 * band, disc, target, registration mark, arrow, square or bar. It draws in
 * the text color at `size-4` and is hidden from assistive tech.
 */
function Marker({
  variant = "wedge",
  className,
  ...props
}: React.ComponentProps<"svg"> & {
  /** Which mark to draw; "none" renders nothing. Defaults to "wedge". */
  variant?: MarkerProp
}) {
  if (variant === "none") return null

  return (
    <svg
      data-slot="marker"
      data-theme="neoconstruct"
      data-variant={variant}
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      className={cn("size-4 shrink-0", className)}
      {...props}
    >
      {shapes[variant]}
    </svg>
  )
}

/**
 * A zero-padded step or issue number in the heading font: 1 shows as "01".
 * It has no size of its own, so set one with `className`. It is hidden from
 * assistive tech, so pair it with text that names the step.
 */
function MarkerNumeral({
  n,
  className,
  ...props
}: React.ComponentProps<"span"> & {
  /** The number to show, padded to two digits. */
  n: number
}) {
  return (
    <span
      data-slot="marker-numeral"
      data-theme="neoconstruct"
      aria-hidden="true"
      className={cn("font-heading leading-none tabular-nums", className)}
      {...props}
    >
      {String(n).padStart(2, "0")}
    </span>
  )
}

export { Marker, MarkerNumeral }
export type { MarkerVariant }

New

badge-neoconstruct-room-status

Neoconstruct Room Status

Badge example: a Neoconstruct room list with status badges, one inverted for open, and a disclosure for each room. Shows badges as availability status labels.

pnpm dlx shadcn add @01orbital/badge-neoconstruct-room-status

npx shadcn add @01orbital/badge-neoconstruct-room-status

yarn shadcn add @01orbital/badge-neoconstruct-room-status

bunx --bun shadcn add @01orbital/badge-neoconstruct-room-status

File

import { cn } from "cn"

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Badge } from "@/components/ui/badge"
import {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
} from "@/components/ui/collapsible"

// The copy: change text here, not in the markup.
const COPY = {
  label: "Parcel Works meeting rooms",
  eyebrow: "Parcel Works / Members’ desk",
  title: "Need a room?",
  when: "Tuesday, November 3 · 11:20 am",
  summary: "Room details",
  footnote: "Book at the front desk · First 2 hours included",
} as const

const ROOMS = [
  {
    name: "The Print Room",
    capacity: "4 people · Display + whiteboard",
    status: "Open now",
    variant: "success",
    note: "Available until 2 pm. Includes a USB-C display, a whiteboard, and step-free access.",
  },
  {
    name: "The Bindery",
    capacity: "8 people · Video conference kit",
    status: "Back at 3 pm",
    variant: "neutral",
    note: "Booked until 3 pm. Includes an eight-seat table, camera, speakerphone, and adjustable lighting.",
  },
] as const

/** A Neoconstruct room list with status badges, one inverted for open, and a disclosure for each room. */
export default function BadgeNeoconstructRoomStatus() {
  return (
    <section
      data-theme="neoconstruct"
      aria-label={COPY.label}
      className="w-full max-w-lg border-2 border-border bg-secondary-background text-foreground"
    >
      <header className="border-b-2 border-border bg-accent p-6 text-accent-foreground">
        <Eyebrow variant="caps" tone="ink" className="font-bold">
          {COPY.eyebrow}
        </Eyebrow>
        <h3 className="mt-3 text-3xl font-bold tracking-tight">{COPY.title}</h3>
        <p className="mt-2 text-sm">{COPY.when}</p>
      </header>
      <div className="divide-y-2 divide-border">
        {ROOMS.map((room) => (
          <div key={room.name} className="p-6">
            <div className="flex flex-wrap items-center justify-between gap-3">
              <h4 className="text-base font-bold">{room.name}</h4>
              <Badge
                data-theme="neoconstruct"
                variant={null}
                className={cn(
                  "h-auto gap-1.5 rounded-none border-2 border-border bg-accent px-3 py-1 font-heading text-xs font-normal tracking-wider text-accent-foreground uppercase",
                  "font-sans font-semibold tracking-normal normal-case",
                  room.variant === "success"
                    ? "bg-foreground text-background"
                    : "bg-secondary-background text-foreground"
                )}
              >
                {room.status}
              </Badge>
            </div>
            <p className="mt-2 text-xs text-muted-foreground">
              {room.capacity}
            </p>
            <Collapsible className="mt-3 text-xs leading-6">
              <CollapsibleTrigger className="w-full cursor-pointer py-2 text-left font-semibold focus-visible:outline-2 focus-visible:outline-offset-4">
                {COPY.summary}
              </CollapsibleTrigger>
              <CollapsibleContent>
                <p className="mt-2">{room.note}</p>
              </CollapsibleContent>
            </Collapsible>
          </div>
        ))}
      </div>
      <p className="border-t-2 border-border p-4 text-center text-xs">
        {COPY.footnote}
      </p>
    </section>
  )
}

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

badge-zora-admission

Zora Admission

Badge example: square badges for admission and access labels on a paper-grain museum card. Shows badges as ticket-type tags.

pnpm dlx shadcn add @01orbital/badge-zora-admission

npx shadcn add @01orbital/badge-zora-admission

yarn shadcn add @01orbital/badge-zora-admission

bunx --bun shadcn add @01orbital/badge-zora-admission

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Grain } from "@/components/texture/grain"
import { Badge } from "@/components/ui/badge"
import { Card } from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  eyebrow: "Zora Type Museum",
  title: "The printed city",
  description: "Letterpress, street signs, and the people who made them.",
  label: "Admission details",
  badge: "Included with admission",
  access: ["Ages 8+", "Step-free access"],
  footnote: "Gallery 2 · Through 24 January · Allow 45 minutes",
} as const

/** Square Badges for admission and access labels on a paper-grain museum card. */
export default function BadgeZoraAdmission() {
  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:[--muted-foreground:color-mix(in_oklch,_#f6f3ee_70%,_#0b0a09)] dark:[--radius:0.625rem]">
      <Card className="relative isolate w-full max-w-md gap-0 rounded-none p-7 shadow-none ring-0">
        <Grain variant="paper" intensity="fine" />
        <Eyebrow className="relative">{COPY.eyebrow}</Eyebrow>
        <h3 className="relative mt-2 text-4xl font-medium tracking-tighter">
          {COPY.title}
        </h3>
        <p className="relative mt-2 text-sm text-muted-foreground">
          {COPY.description}
        </p>
        <div
          className="relative mt-8 flex flex-wrap gap-2"
          aria-label={COPY.label}
        >
          <Badge className="h-7 px-3">{COPY.badge}</Badge>
          {COPY.access.map((label) => (
            <Badge
              key={label}
              variant="outline"
              className="h-7 border-foreground/40 px-3"
            >
              {label}
            </Badge>
          ))}
        </div>
        <p className="relative mt-6 border-t pt-4 text-xs text-muted-foreground">
          {COPY.footnote}
        </p>
      </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

badge-neoconstruct-print-run

Neoconstruct Print Run

Badge example: a gold Neoconstruct badge, a row of band markers and a bold headline on a dark print-shop poster. Shows a poster-style badge in a promo.

pnpm dlx shadcn add @01orbital/badge-neoconstruct-print-run

npx shadcn add @01orbital/badge-neoconstruct-print-run

yarn shadcn add @01orbital/badge-neoconstruct-print-run

bunx --bun shadcn add @01orbital/badge-neoconstruct-print-run

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Marker } from "@/components/graphics/neoconstruct-marker"
import { Grain } from "@/components/texture/grain"
import { Badge } from "@/components/ui/badge"

// The copy: change text here, not in the markup.
const COPY = {
  badge: "Print run 04",
  press: "Independent press",
  body: "Posters, editions, and things worth putting on a wall.",
  title: "MAKE",
  aside: "AN IMPRESSION.",
} as const

/** A gold Neoconstruct Badge, a row of band Markers and a bold headline on a dark print-shop poster. */
export default function BadgeNeoconstructPrintRun() {
  return (
    <div className="dark relative isolate flex min-h-[26rem] flex-col justify-between overflow-hidden bg-background p-7 text-foreground [--font-display:var(--font-unbounded)]">
      <Grain variant="square" intensity="rich" />
      <div className="relative flex flex-wrap items-center justify-between gap-4">
        <Badge
          data-theme="neoconstruct"
          variant={null}
          className="h-auto gap-1.5 rounded-none border-2 border-border bg-primary px-3 py-1 font-sans text-xs font-normal tracking-wider text-foreground uppercase"
        >
          {COPY.badge}
        </Badge>
        <Eyebrow
          variant="mono"
          tone="ink"
          className="text-[10px]"
          render={<span />}
        >
          {COPY.press}
        </Eyebrow>
      </div>
      <div
        aria-hidden="true"
        className="relative flex justify-end text-foreground"
      >
        <Marker variant="band" className="size-16" />
        <Marker variant="band" className="size-16" />
        <Marker variant="band" className="size-16" />
      </div>
      <div className="relative">
        <p className="font-display text-2xl leading-tight">
          {COPY.title}
          <br />
          {COPY.aside}
        </p>
        <p className="mt-5 max-w-72 text-sm leading-6">{COPY.body}</p>
      </div>
    </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}")`

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

/**
 * Constructivist marks, drawn with ruler and compass. Each one comes from the
 * period's own vocabulary: Lissitzky's wedge into a circle, the diagonal band,
 * Suprematist disc and square, the arrow, the compass-drawn target, the
 * printer's registration mark and the heavy typographic rule.
 * Numerals live in `MarkerNumeral`.
 */
const shapes = {
  // A wedge driving into a ring.
  wedge: (
    <>
      <circle
        cx="15"
        cy="12"
        r="6.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <polygon points="1,6.5 16,12 1,17.5" />
    </>
  ),
  // A thick band at 30 degrees.
  band: <polygon points="2,15.5 19,5.5 22,10 5,20" />,
  disc: <circle cx="12" cy="12" r="8" />,
  // Two compass-drawn rings around a dot.
  target: (
    <>
      <circle
        cx="12"
        cy="12"
        r="9"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <circle cx="12" cy="12" r="3.5" />
    </>
  ),
  // The printer's registration mark: a cross through a ring.
  registration: (
    <>
      <circle
        cx="12"
        cy="12"
        r="6.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <path d="M11 1h2v22h-2zM1 11h22v2H1z" />
    </>
  ),
  arrow: <path d="M2 10h12V5l8 7-8 7v-5H2z" />,
  square: <rect x="5" y="5" width="14" height="14" />,
  bar: <rect x="2" y="9" width="20" height="6" />,
} as const

type MarkerVariant = keyof typeof shapes

/** A marker choice for components: any shape, or "none" to render nothing. */
type MarkerProp = MarkerVariant | "none"

/**
 * A small Constructivist mark for buttons, badges and list items: a wedge,
 * band, disc, target, registration mark, arrow, square or bar. It draws in
 * the text color at `size-4` and is hidden from assistive tech.
 */
function Marker({
  variant = "wedge",
  className,
  ...props
}: React.ComponentProps<"svg"> & {
  /** Which mark to draw; "none" renders nothing. Defaults to "wedge". */
  variant?: MarkerProp
}) {
  if (variant === "none") return null

  return (
    <svg
      data-slot="marker"
      data-theme="neoconstruct"
      data-variant={variant}
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      className={cn("size-4 shrink-0", className)}
      {...props}
    >
      {shapes[variant]}
    </svg>
  )
}

/**
 * A zero-padded step or issue number in the heading font: 1 shows as "01".
 * It has no size of its own, so set one with `className`. It is hidden from
 * assistive tech, so pair it with text that names the step.
 */
function MarkerNumeral({
  n,
  className,
  ...props
}: React.ComponentProps<"span"> & {
  /** The number to show, padded to two digits. */
  n: number
}) {
  return (
    <span
      data-slot="marker-numeral"
      data-theme="neoconstruct"
      aria-hidden="true"
      className={cn("font-heading leading-none tabular-nums", className)}
      {...props}
    >
      {String(n).padStart(2, "0")}
    </span>
  )
}

export { Marker, MarkerNumeral }
export type { MarkerVariant }

New

badge-neoconstruct-night-shift-ticket

Neoconstruct Night Shift Ticket

Badge example: a red Neoconstruct ribbon badge on a tilted paper admission ticket with a perforated stub. Shows a badge on an event ticket.

pnpm dlx shadcn add @01orbital/badge-neoconstruct-night-shift-ticket

npx shadcn add @01orbital/badge-neoconstruct-night-shift-ticket

yarn shadcn add @01orbital/badge-neoconstruct-night-shift-ticket

bunx --bun shadcn add @01orbital/badge-neoconstruct-night-shift-ticket

File

import { Eyebrow } from "@/components/eyebrow/eyebrow"
import { Marker } from "@/components/graphics/neoconstruct-marker"
import { Text } from "@/components/text/text"
import { Grain } from "@/components/texture/grain"
import { Badge } from "@/components/ui/badge"
import {
  Card,
  CardContent,
  CardFooter,
  CardTitle,
} from "@/components/ui/card"

// The copy: change text here, not in the markup.
const COPY = {
  description: "An evening at the printworks.",
  details: "Friday 13 November / Admit one",
  code: "DOOR / 0218",
  badge: "Last entry 23:30",
  title: "NIGHT",
  aside: "SHIFT",
} as const

/** A red Neoconstruct ribbon Badge on a tilted paper admission ticket with a perforated stub. */
export default function BadgeNeoconstructNightShiftTicket() {
  return (
    <div className="relative isolate grid min-h-[26rem] place-items-center overflow-hidden bg-muted p-6 text-foreground [--font-display:var(--font-unbounded)]">
      <Grain variant="single" opacity={0.25} />
      <Card className="relative w-full max-w-88 -rotate-2 rounded-none bg-muted text-base text-foreground shadow-[5px_8px_0_oklch(0.28_0.035_45)] ring-0">
        <Grain variant="paper" intensity="rich" />
        <CardContent className="relative">
          <Badge
            data-theme="neoconstruct"
            variant={null}
            className="relative h-auto gap-2 overflow-visible rounded-none border-2 border-foreground bg-main px-4 py-1 font-sans text-xs font-normal tracking-wider text-main-foreground uppercase"
          >
            <span
              aria-hidden="true"
              className="absolute top-0 right-0 size-0 border-t-14 border-l-14 border-t-accent border-l-transparent"
            />
            <Marker variant="registration" className="size-3" />
            {COPY.badge}
          </Badge>
          <CardTitle className="mt-8 font-display text-3xl leading-tight font-normal">
            {COPY.title}
            <br />
            {COPY.aside}
          </CardTitle>
          <Text className="mt-4 text-sm">{COPY.description}</Text>
          <Eyebrow variant="mono" tone="ink" className="mt-6 text-[10px]">
            {COPY.details}
          </Eyebrow>
        </CardContent>
        <CardFooter className="relative justify-between gap-4 border-t border-dashed border-border">
          <span className="font-mono text-xs">{COPY.code}</span>
          <Marker variant="wedge" className="size-7" />
        </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}")`

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

/**
 * Constructivist marks, drawn with ruler and compass. Each one comes from the
 * period's own vocabulary: Lissitzky's wedge into a circle, the diagonal band,
 * Suprematist disc and square, the arrow, the compass-drawn target, the
 * printer's registration mark and the heavy typographic rule.
 * Numerals live in `MarkerNumeral`.
 */
const shapes = {
  // A wedge driving into a ring.
  wedge: (
    <>
      <circle
        cx="15"
        cy="12"
        r="6.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <polygon points="1,6.5 16,12 1,17.5" />
    </>
  ),
  // A thick band at 30 degrees.
  band: <polygon points="2,15.5 19,5.5 22,10 5,20" />,
  disc: <circle cx="12" cy="12" r="8" />,
  // Two compass-drawn rings around a dot.
  target: (
    <>
      <circle
        cx="12"
        cy="12"
        r="9"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <circle cx="12" cy="12" r="3.5" />
    </>
  ),
  // The printer's registration mark: a cross through a ring.
  registration: (
    <>
      <circle
        cx="12"
        cy="12"
        r="6.5"
        fill="none"
        stroke="currentColor"
        strokeWidth="2.5"
      />
      <path d="M11 1h2v22h-2zM1 11h22v2H1z" />
    </>
  ),
  arrow: <path d="M2 10h12V5l8 7-8 7v-5H2z" />,
  square: <rect x="5" y="5" width="14" height="14" />,
  bar: <rect x="2" y="9" width="20" height="6" />,
} as const

type MarkerVariant = keyof typeof shapes

/** A marker choice for components: any shape, or "none" to render nothing. */
type MarkerProp = MarkerVariant | "none"

/**
 * A small Constructivist mark for buttons, badges and list items: a wedge,
 * band, disc, target, registration mark, arrow, square or bar. It draws in
 * the text color at `size-4` and is hidden from assistive tech.
 */
function Marker({
  variant = "wedge",
  className,
  ...props
}: React.ComponentProps<"svg"> & {
  /** Which mark to draw; "none" renders nothing. Defaults to "wedge". */
  variant?: MarkerProp
}) {
  if (variant === "none") return null

  return (
    <svg
      data-slot="marker"
      data-theme="neoconstruct"
      data-variant={variant}
      viewBox="0 0 24 24"
      fill="currentColor"
      aria-hidden="true"
      className={cn("size-4 shrink-0", className)}
      {...props}
    >
      {shapes[variant]}
    </svg>
  )
}

/**
 * A zero-padded step or issue number in the heading font: 1 shows as "01".
 * It has no size of its own, so set one with `className`. It is hidden from
 * assistive tech, so pair it with text that names the step.
 */
function MarkerNumeral({
  n,
  className,
  ...props
}: React.ComponentProps<"span"> & {
  /** The number to show, padded to two digits. */
  n: number
}) {
  return (
    <span
      data-slot="marker-numeral"
      data-theme="neoconstruct"
      aria-hidden="true"
      className={cn("font-heading leading-none tabular-nums", className)}
      {...props}
    >
      {String(n).padStart(2, "0")}
    </span>
  )
}

export { Marker, MarkerNumeral }
export type { MarkerVariant }

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 }

Dependencies

npm: @base-ui/react, class-variance-authority, cn. The CLI installs them for you.

No other registry pieces.

Badge

ExamplesCopy Anchor Link

NeoconstructNew

Neoconstruct RibbonNew

Neoconstruct FundraiserNew

Neoconstruct Room StatusNew

Zora AdmissionNew

Neoconstruct Print RunNew

Neoconstruct Night Shift TicketNew

DependenciesCopy Anchor Link

Examples

New

New

New

New

New

New

New

Dependencies