Kumo

@cloudflare/kumo

Surface

A container component that provides a surface for content with proper styling.

Content

<Surface className="w-40 h-24 rounded-lg bg-surface flex items-center justify-center">
  <p className="text-sm text-neutral-500">Content</p>
</Surface>

Installation

import { Surface } from "~/components/surface/surface";

Usage

import { Surface } from "~/components/surface/surface";

export default function Example() {
  return (
    <Surface className="p-4">
      <p>Your content here</p>
    </Surface>
  );
}

Examples

Basic Surface

A surface container

<Surface className="w-64 h-32 rounded-lg bg-surface flex items-center justify-center">
  <p className="text-sm text-neutral-500">A surface container</p>
</Surface>

Card Layout

Card Title

This is a card built with the Surface component.

<Surface className="w-80 rounded-lg bg-surface p-6 border border-neutral-200 dark:border-neutral-800">
  <h3 className="text-lg font-semibold mb-2">Card Title</h3>
  <p className="text-sm text-neutral-600 dark:text-neutral-400">
    This is a card built with the Surface component.
  </p>
</Surface>