Main

Preview

import { Button } from '@usefragments/ui';
import { Main } from '@usefragments/ui';

const content = <p>No findings need attention.</p>;

<Main measure="full">

Usage

Installation

pnpm add @usefragments/ui

Import styles once from @usefragments/ui/styles. See the installation guide for framework and theme setup.

Anatomy

Import Main once, then compose its parts with dot notation.

• Main.Header
• Main.Title
• Main.Description
• Main.Content
• Main.Footer

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

import { Button } from '@usefragments/ui';
import { Main } from '@usefragments/ui';

const content = <p>No findings need attention.</p>;

<Main measure="full">
  <Main.Header>
    <Main.Title>Findings</Main.Title>
    <Main.Description>Every review finding raised against this repository, newest first.</Main.Description>
  </Main.Header>
  <Main.Content>{content}</Main.Content>
  <Main.Footer>
    <Button variant="soft">Export</Button>
  </Main.Footer>
</Main>

Examples

import { Field } from "@usefragments/ui";
import { Input } from "@usefragments/ui";
import { Button } from '@usefragments/ui';
import { Main } from '@usefragments/ui';

const form = (

API reference

Accessibility

• The default <main> carries id="main-content", the Header.SkipLink target
• Use as="section" or as="div" when another <main> already exists
• Main.Title renders the page's h1

Next steps

• Accessibility guidanceThe keyboard, focus and naming rules every component carries.
• Every componentThe catalog, grouped by what each component does.