Technonomicon

TS

import { … } from "@fungi.computer/caps/components/technonomicon";

Plate

TSX

import { Plate } from "@fungi.computer/caps/components/technonomicon";

export default function PlateExample() {
  return (
    <div data-theme="field-guide" className="max-w-sm">
      <Plate
        label="Fig. 14"
        caption="Gill spacing, close"
        image={
          <div className="flex h-24 items-center justify-center text-4xl">
            🍄
          </div>
        }
      />
    </div>
  );
}

Masthead and sections

TSX

import {
  Masthead,
  SectionBar,
} from "@fungi.computer/caps/components/technonomicon";

export default function MastheadAndSections() {
  return (
    <div data-theme="field-guide" className="w-full max-w-sm">
      <Masthead
        wordmark="The Spore Gazette"
        href="#front"
        tagline="News from under the bark"
        edition={["Issue 14", "Oct 2026"]}
        sections={
          <SectionBar
            aria-label="Sections"
            sections={[
              { href: "#a", label: "Growth", current: true },
              { href: "#b", label: "Harvest" },
            ]}
          />
        }
      />
    </div>
  );
}

Callout and growth

TSX

import {
  Callout,
  GrowthBadge,
} from "@fungi.computer/caps/components/technonomicon";

export default function CalloutAndGrowth() {
  return (
    <div data-theme="field-guide" className="flex max-w-sm flex-col gap-3">
      <Callout kind="lesson" title="Field note">
        <p>Mist before dawn, when the spores are still settling.</p>
      </Callout>
      <div className="flex gap-2">
        <GrowthBadge stage="spore" />
        <GrowthBadge stage="mycelium" />
        <GrowthBadge stage="fruiting" />
      </div>
    </div>
  );
}

Cigarette card

TSX

import { CigaretteCard } from "@fungi.computer/caps/components/technonomicon";

export default function CigaretteCardExample() {
  return (
    <div data-theme="field-guide" className="w-56">
      <CigaretteCard
        number={14}
        seriesNumeral="I"
        series="Woodland Fungi"
        title="Shiitake"
        typeLine="Machine of the Log"
        image={<span className="text-4xl">🍄</span>}
        stats={[
          {
            key: "humidity",
            label: "Humidity",
            value: 85,
            unit: "%",
            source: "sensor",
            asOf: "2026-10-09",
          },
          {
            key: "yield",
            label: "Last yield",
            value: 1.2,
            unit: "kg",
            source: "log",
            asOf: "2026-10-01",
          },
        ]}
        note="Fruits best on oak logs in cool, humid air."
      />
    </div>
  );
}

Props

PlateProps

Prop	Type	Description
caption	ReactNode
image	ReactNode
label	string

• captionReactNode
• imageReactNode
• labelstring

StagePlateProps

Prop	Type	Description
caption	ReactNode
children	ReactNode	The live drawing: an element with the caps-stage-plate-viewport class.
hint?	ReactNode	How to handle the drawing, shown under the caption.
hintId?	string	Id for the hint, so the drawing can name it with aria-describedby.
label	string
specimenKey?	ReactNode	A numbered key to what the drawing shows.

• captionReactNode
• childrenReactNode

  The live drawing: an element with the caps-stage-plate-viewport class.

• hint?ReactNode

  How to handle the drawing, shown under the caption.

• hintId?string

  Id for the hint, so the drawing can name it with aria-describedby.

• labelstring
• specimenKey?ReactNode

  A numbered key to what the drawing shows.

MarginNoteProps

Prop	Type	Description
children	ReactNode

• childrenReactNode

CalloutProps

Prop	Type	Description
kind	"lesson" | "status" | "plan" | "warning"
title?	ReactNode
children	ReactNode

• kind"lesson" | "status" | "plan" | "warning"
• title?ReactNode
• childrenReactNode

GrowthBadgeProps

Prop	Type	Description
stage	"spore" | "mycelium" | "fruiting"

• stage"spore" | "mycelium" | "fruiting"

IssueMastheadProps

Prop	Type	Description
date	string
dek	ReactNode
number	string
publication	string	The publication the Issue belongs to, printed in the kicker.
title	string

• datestring
• dekReactNode
• numberstring
• publicationstring

  The publication the Issue belongs to, printed in the kicker.

• titlestring

MastheadProps

Prop	Type	Description
wordmark	string	The publication name, set large in the nameplate face.
href	string	Where the nameplate links, normally the front page.
mark?	ReactNode	A small printed mark beside the wordmark, such as a logo drawing.
tagline?	ReactNode	One line under the wordmark in the publication's voice.
edition?	readonly ReactNode[]	The ruled edition line: date, issue, editor and similar items.
startEar?	ReactNode	The left ear box beside the nameplate, such as a weather note.
endEar?	ReactNode	The right ear box beside the nameplate, such as the editor's portrait.
sections?	ReactNode	The section bar under the edition line, normally a SectionBar.
size?	"front" | "running"

• wordmarkstring

  The publication name, set large in the nameplate face.

• hrefstring

  Where the nameplate links, normally the front page.

• mark?ReactNode

  A small printed mark beside the wordmark, such as a logo drawing.

• tagline?ReactNode

  One line under the wordmark in the publication's voice.

• edition?readonly ReactNode[]

  The ruled edition line: date, issue, editor and similar items.

• startEar?ReactNode

  The left ear box beside the nameplate, such as a weather note.

• endEar?ReactNode

  The right ear box beside the nameplate, such as the editor's portrait.

• sections?ReactNode

  The section bar under the edition line, normally a SectionBar.

• size?"front" | "running"

SectionBarProps

Prop	Type	Description
sections	readonly SectionLink[]
tools?	ReactNode	Controls set at the end of the bar, such as theme and help buttons.

• sectionsreadonly SectionLink[]
• tools?ReactNode

  Controls set at the end of the bar, such as theme and help buttons.

FolioProps

Prop	Type	Description
items	readonly ReactNode[]	Running items, such as the publication, page number and date.

• itemsreadonly ReactNode[]

  Running items, such as the publication, page number and date.

SpreadProps

Prop	Type	Description
layout	"lead" | "columns" | "grid"
children	ReactNode

• layout"lead" | "columns" | "grid"
• childrenReactNode

CardAlbumProps

Prop	Type	Description
title	string
slots	readonly AlbumSlot[]

• titlestring
• slotsreadonly AlbumSlot[]

Full types: API reference.