Surface - Kumo

Surface Component

A container with consistent elevation and border styling.

<Surface className="p-6 rounded-lg">
  <Text size="lg" weight="semibold">Surface Component</Text>
  <Text variant="secondary" className="mt-2">
    A container with consistent elevation and border styling.
  </Text>
</Surface>

Installation

import { Surface } from "@cloudflare/kumo";

Polymorphic "as" prop

Surface can render as different HTML elements using the `as` prop.

As section element

As article element

<Surface as="section" className="p-4 rounded-lg">
  <Text weight="medium">As section element</Text>
</Surface>
<Surface as="article" className="p-4 rounded-lg">
  <Text weight="medium">As article element</Text>
</Surface>
<Surface as="aside" className="p-4 rounded-lg">
  <Text weight="medium">As aside element</Text>
</Surface>

Nested Surfaces

Surfaces can be nested to create layered interfaces.

Outer Surface

Nested Surface

<Surface className="p-6 rounded-lg">
  <Text weight="semibold">Outer Surface</Text>
  <Surface className="mt-4 p-4 rounded-md bg-kumo-elevated">
    <Text variant="secondary">Nested Surface</Text>
  </Surface>
</Surface>

API Reference

Prop	Type	Default	Description
as	`React.ElementType`	-	The HTML element type to render as (e.g. `"div"`, `"section"`, `"article"`).
className	`string`	-	Additional CSS classes merged via `cn()`.
children	`ReactNode`	-	Content rendered inside the surface.