---
layout: ~/layouts/MdxDocLayout.astro
title: "Surface"
description: "A container component that provides a surface for content with proper styling."
sourceFile: "components/surface"
---

import ComponentExample from "~/components/docs/ComponentExample.astro";
import ComponentSection from "~/components/docs/ComponentSection.astro";
import Heading from "~/components/docs/Heading.astro";
import PropsTable from "~/components/docs/PropsTable.astro";
import {
  SurfaceDemo,
  SurfaceRenderDemo,
  SurfaceNestedDemo,
} from "~/components/demos/SurfaceDemo";

{/* Hero Demo */}

<ComponentSection>
  <ComponentExample demo="SurfaceDemo">
    <SurfaceDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Installation */}

<ComponentSection>
  <Heading level={2}>Installation</Heading>

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

</ComponentSection>

{/* render prop */}

<ComponentSection>
  <Heading level={2}>Rendering as a different element</Heading>
  <p class="text-kumo-strong mb-4">
    Use the `render` prop to render Surface as a different HTML element or
    custom component.
  </p>
  <ComponentExample demo="SurfaceRenderDemo">
    <SurfaceRenderDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* Nested Surfaces */}

<ComponentSection>
  <Heading level={2}>Nested Surfaces</Heading>
  <p class="text-kumo-strong mb-4">
    Surfaces can be nested to create layered interfaces.
  </p>
  <ComponentExample demo="SurfaceNestedDemo">
    <SurfaceNestedDemo client:visible />
  </ComponentExample>
</ComponentSection>

{/* API Reference */}

<ComponentSection>
  <Heading level={2}>API Reference</Heading>
  <PropsTable component="Surface" />
</ComponentSection>
