As article element
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
<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. |