Skip to main content

Main

Owns a page's gutters, reading measure, and vertical rhythm.

import { Main } from "@/fragments/ui";Source

Preview

import { Box } from '@/components/Box';
import { Main } from '@/components/Main';

<Box width="100%" border rounded="md">
  <Main measure="full">
    <Main.Header>Findings</Main.Header>

Installation

npm install -D @usefragments/cli
npx @usefragments/cli registry add Main --to src/fragments/ui --import-path "@/fragments/ui"
npx @usefragments/cli registry status

Cloud Registry installs verified source with a lockfile and needs a workspace key: in Fragments Cloud open Settings, then Repositories, then Open MCP setup beside Workspace key. Keep the key in a password manager or CI secret and never commit it. If status reports drift, inspect it with registry diff and restore managed source with registry sync.

Usage

Content fills the canvas, inset only by the page gutter.

import { Box } from '@/components/Box';
import { Main } from '@/components/Main';

<Box width="100%" border rounded="md">
  <Main measure="full">
    <Main.Header>Findings</Main.Header>
    <Main.Description>
      Every governance finding raised against this repository, newest first.
    </Main.Description>
    <Main.Content>
      Content stretches edge to edge, inset only by the page gutter.
    </Main.Content>
    <Main.Footer>Export report</Main.Footer>
  </Main>
</Box>

Examples

Narrow Measure

Caps content at the reading measure and centres it on wide screens.

import { Box } from '@/components/Box';
import { Main } from '@/components/Main';

<Box width="100%" border rounded="md">
  <Main measure="narrow">
    <Main.Header>Settings</Main.Header>

Guidance

Use when

  • Laying out a page's header, description, content, and footer
  • Giving a page one consistent gutter and measure

Avoid when

  • Shell-level navigation chrome (use AppShell)
  • Arbitrary spacing inside a component (use Stack or Box)

API

Component props
Prop
Type
Default
Description
childrenRequirednodeNot setPage regions composed from Main.Header, Main.Description, Main.Content, and Main.Footer
measureenumfullnarrowfullMaximum width applied to the page composition
asenumdivsectionnavarticleasideheaderfootermainulolmainSemantic HTML element rendered by the root

Next steps