Skip to content
flood.md
v0.2.10

Stack

Vertical composition with spacing from the shared token scale.

Preview

One shared foundation.

A clear rhythm between things.

Use Stack

Stack 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
stack.tsxTSX
"use client";

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

export function Example() {
  return (
    <FloodRoot>
      <Stack gap="4">
        <Heading size="section">Project</Heading>
        <Text as="p">One place for your work.</Text>
      </Stack>
    </FloodRoot>
  );
}

Design notes

  • The parent owns the gap between its children.
  • Spacing keys are strings and use rem. Flood does not reset the host root font size.

API reference

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