Skip to content

components/surface

@fungi.computer/caps


@fungi.computer/caps / components/surface

SurfaceProps = HTMLAttributes<HTMLDivElement> > & object

Native surface attributes with independent rim, depth and placement choices.

optional size?: "sm" | "md" | "lg"

Rim scale, independent of the content’s dimensions.

optional depth?: "shallow" | "deep"

optional placement?: "standalone" | "embedded"

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


DisplayProps = SurfaceProps & object

A recessed display with a separate gasket and screen face.

optional fit?: "content" | "fill"

Fill a flex region rather than sizing to its content.

optional density?: "normal" | "compact"

Reduce the gasket footprint for compact displays.

const Surface: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & object & RefAttributes<HTMLDivElement>>>>

A themeable frame around a surface. No padding or interaction ownership.


const Screen: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & RefAttributes<HTMLDivElement>>>>

Display face using theme surfaces while preserving the inherited text font.


const Display: ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> > & object & object & RefAttributes<HTMLDivElement>>>>

Theme-owned recessed screen with a gasket and optional compact fill geometry.