Layout Components

Structural components for building plugin pages — Page, PageHeader, Layout, Card, Box, BlockStack, InlineStack, and Divider.

Layout components provide the structural scaffolding for your plugin pages. They handle spacing, grouping, and visual hierarchy.

Page

Top-level wrapper for a plugin page. Every page should be wrapped in Page.

import { Page, PageHeader } from "./components/whatalo-ui";

function DashboardPage() {
  return (
    <Page>
      <PageHeader
        title="Dashboard"
        description="Overview of your plugin data"
      />
      {/* Page content */}
    </Page>
  );
}

PageHeader

Displays the page title with an optional description. Place it immediately after Page as the first child.

<PageHeader
  title="Settings"
  description="Configure your plugin preferences"
/>

Layout

A section-based layout container. Use Layout.Section to divide content into distinct areas.

import { Layout, Card } from "./components/whatalo-ui";

<Layout>
  <Layout.Section>
    <Card>Main content</Card>
  </Layout.Section>
  <Layout.Section>
    <Card>Secondary content</Card>
  </Layout.Section>
</Layout>

Card

A content container with a subtle border and background. Use it to visually group related content.

import { Card, Text } from "./components/whatalo-ui";

<Card>
  <Text>Simple card content</Text>
</Card>

Box

A generic container with controlled padding and margin. Use it when you need spacing without the visual treatment of a Card.

import { Box, Text } from "./components/whatalo-ui";

<Box>
  <Text>Content in a box</Text>
</Box>

BlockStack

Stacks children vertically with consistent gap between items.

import { BlockStack, Text } from "./components/whatalo-ui";

<BlockStack>
  <Text>Item 1</Text>
  <Text>Item 2</Text>
  <Text>Item 3</Text>
</BlockStack>

InlineStack

Arranges children horizontally with consistent gap between items. Useful for button groups and label/value pairs.

import { InlineStack, Button } from "./components/whatalo-ui";

<InlineStack>
  <Button>Save</Button>
  <Button variant="secondary">Cancel</Button>
</InlineStack>

Divider

A horizontal separator line. Use it within BlockStack to visually separate content sections.

import { BlockStack, Divider, Text } from "./components/whatalo-ui";

<BlockStack>
  <Text>Above the divider</Text>
  <Divider />
  <Text>Below the divider</Text>
</BlockStack>

On this page