Surface

A container component that applies surface styling and provides context to child components

Usage

Surface provides a styled container with an optional header/content/footer structure. Use it to group related UI and to share "surface" context with child components.

Surface.Header: Optional top area for actions, badges, or metadata.
Surface.Content: Main body region.
Surface.Title: Primary heading for the surface.
Surface.Description: Supporting text displayed under the title.
Surface.Footer: Optional bottom area for secondary actions, status, or links.
Surface.Addon: Optional container for side assets, actions, or icons (commonly used in horizontal layouts).

Compose only the pieces you need; all sections are optional.

import { Surface } from "@elemnts-ui/react";

<Surface>
	<Surface.Header />
	<Surface.Content>
		<Surface.Title />
		<Surface.Description />
	</Surface.Content>
	<Surface.Footer />
</Surface>

Variants

Customize the layout orientation and elevation levels to match your visual structure.

API Reference

SurfaceRoot

The root component for the Surface.

Prop	Type	Default
asChild	`boolean`	`false`
delta	`number`	`undefined`
shadowLevel	`number`	`udefined`

SurfaceHeader

The header section of the Surface.

Prop	Type	Default
asChild	`boolean`	`false`

SurfaceContent

The content section of the Surface.

Prop	Type	Default
asChild	`boolean`	`false`

SurfaceFooter

The footer section of the Surface.

Prop	Type	Default
asChild	`boolean`	`false`

SurfaceAddon

The addon section of the Surface.

Prop	Type	Default
asChild	`boolean`	`false`

SurfaceTitle

The title section of the Surface.

Prop	Type	Default
asChild	`boolean`	`false`

SurfaceDescription

The description section of the Surface.

Prop	Type	Default
asChild	`boolean`	`false`