Surface

TS

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

Hero

TSX

import { Surface } from "@fungi.computer/caps/components/surface";

export default function Hero() {
  return (
    <Surface className="max-w-sm">
      <div className="p-lg">
        <p className="text-sm">
          A recessed shell with no opinion about what sits inside it.
        </p>
      </div>
    </Surface>
  );
}

Depths

TSX

import { Surface } from "@fungi.computer/caps/components/surface";

export default function Depths() {
  return (
    <div className="grid grid-cols-2 gap-md">
      <Surface depth="shallow">
        <div className="p-md text-sm">Shallow</div>
      </Surface>
      <Surface depth="deep">
        <div className="p-md text-sm">Deep</div>
      </Surface>
    </div>
  );
}

Display

TSX

import { Display } from "@fungi.computer/caps/components/surface";

export default function DisplayExample() {
  return (
    <Display size="md" className="max-w-sm">
      <div className="grid gap-xs p-lg">
        <span className="text-xs">LOCATION</span>
        <span className="text-xl">Creek bend</span>
        <code className="font-mono text-sm">38.1°N, 122.4°W</code>
      </div>
    </Display>
  );
}

Props

SurfaceProps

Prop	Type	Description
size?	"sm" | "md" | "lg"	Rim scale, independent of the content's dimensions.
depth?	"shallow" | "deep"
placement?	"standalone" | "embedded"	Embedded surfaces borrow their parent's casing; omit the exterior surround.

• size?"sm" | "md" | "lg"

  Rim scale, independent of the content's dimensions.

• depth?"shallow" | "deep"
• placement?"standalone" | "embedded"

  Embedded surfaces borrow their parent's casing; omit the exterior surround.

DisplayProps

Prop	Type	Description
fit?	"content" | "fill"	Fill a flex region rather than sizing to its content.
density?	"normal" | "compact"	Reduce the gasket footprint for compact displays.

• fit?"content" | "fill"

  Fill a flex region rather than sizing to its content.

• density?"normal" | "compact"

  Reduce the gasket footprint for compact displays.

ScreenHeaderProps

Prop	Type	Description
icon?	ReactNode	A decorative Sigil or App icon before the title.
title	ReactNode
status?	ReactNode	A Status or short readout opposite the title.

• icon?ReactNode

  A decorative Sigil or App icon before the title.

• titleReactNode
• status?ReactNode

  A Status or short readout opposite the title.

ScreenCellProps

Prop	Type	Description
appearance?	"default" | "compact"	Compact rows put their subject icon and legend before the controls.
icon?	ReactNode	A leading subject icon.
legend?	ReactNode	The cell's tiny mono legend, such as "Processes".
readout?	ReactNode	A short value readout in the cell's corner, such as "2/4 ON".
wide?	boolean	Span the full row instead of one column.

• appearance?"default" | "compact"

  Compact rows put their subject icon and legend before the controls.

• icon?ReactNode

  A leading subject icon.

• legend?ReactNode

  The cell's tiny mono legend, such as "Processes".

• readout?ReactNode

  A short value readout in the cell's corner, such as "2/4 ON".

• wide?boolean

  Span the full row instead of one column.

Full types: API reference.