Skip to content
flood.md
v0.2.10

Surface

A quiet container with semantic elevation and token-based padding.

Preview

Your workspace

A surface gives related content a shared place.

Use Surface

Surface is a named export of @flood-md/react. Connect the package once, then import what you use.

First time here? Connect Flood
Example import style
surface.tsxTSX
"use client";

import { FloodRoot, Surface, Text } from "@flood-md/react";
import "@flood-md/react/styles.css";

export function Example() {
  return (
    <FloodRoot>
      <Surface elevation="raised" padding="6">
        <Text>Everything in its place.</Text>
      </Surface>
    </FloodRoot>
  );
}

Design notes

  • Elevation describes appearance. Overlay does not create a dialog, portal or focus trap.
  • Prefer grouping and spacing before adding more nested containers.

API reference

PropValuesDefault
elevation"default" | "raised" | "overlay""default"
padding"0" | "1" | "2" | "3" | "4" | "6" | "8" | "12""6"
Native HTML propsHTMLAttributes<HTMLDivElement>Forwarded
View TypeScript source
Page MarkdownAgent skill