Surface - Kumo

Surface Component

A container with consistent elevation and border styling.

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

export function SurfaceDemo() {
  return (
    <Surface className="rounded-lg p-6">
      <Text size="lg" bold>
        Surface Component
      </Text>
      <div className="mt-2">
        <Text variant="secondary">
          A container with consistent elevation and border styling.
        </Text>
      </div>
    </Surface>
  );
}

Installation

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

Rendering as a different element

Use the render prop to render Surface as a different HTML element or custom component.

As section element

As article element

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

export function SurfaceRenderDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Surface render={<section />} className="rounded-lg p-4">
        <Text bold>As section element</Text>
      </Surface>
      <Surface render={<article />} className="rounded-lg p-4">
        <Text bold>As article element</Text>
      </Surface>
      <Surface render={<aside />} className="rounded-lg p-4">
        <Text bold>As aside element</Text>
      </Surface>
    </div>
  );
}

Nested Surfaces

Surfaces can be nested to create layered interfaces.

Outer Surface

Nested Surface

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

export function SurfaceNestedDemo() {
  return (
    <Surface className="rounded-lg p-6">
      <Text bold>Outer Surface</Text>
      <Surface className="mt-4 rounded-md bg-kumo-elevated p-4">
        <Text variant="secondary">Nested Surface</Text>
      </Surface>
    </Surface>
  );
}

API Reference

Prop	Type	Default	Description
as	`React.ElementType`	-	-
render	`ReactNode`	-	Allows you to replace the component’s HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render.
children	`ReactNode`	-	-
className	`string`	-	-
id	`string`	-	-
lang	`string`	-	-
title	`string`	-	-