# Main

> The page body of Max's app shell: a `<main>` with the standard page padding and, by default, a centred 7xl width.

## Facts

- **Product**: Max
- **Family**: Layout
- **Global**: `window.DigitalCrew.Main`
- **Source**: `max-agent: src/components/layout/main.tsx`
- **Import in the app**: `import { Main } from "@/components/layout/main";`
- **Live preview**: /design/components/main/preview.html
- **Page**: /design/components/main

## Guidelines

**Use it for** the top-level content of every page inside the authenticated layout, below [`Header`](/design/components/header.md).

**What you provide**:
- `fixed?: boolean`: makes the page a growing flex column with `overflow-hidden` and sets `data-layout="fixed"`, which lets the shell's inset take the full viewport height. Use it for full-height tools.
- `fluid?: boolean`: drops the max width.
- `className`, `ref`, and any `<main>` attribute.

**Anatomy**: `px-4 py-6`. Unless `fluid`, the page gets `mx-auto w-full max-w-7xl` once the `@container/content` it sits in reaches the `7xl` container size. That container is the shell's `SidebarInset`, so outside the shell the max width never applies.

**Patterns in Max**:
- Scrolling pages such as Notifications use a plain `<Main>`.
- Full-bleed workspaces (calendar, crew, meeting assistant) use `<Main fixed fluid className="p-0">`.
- Prospects uses `<Main className="p-0">` and lets the page set its own padding.

**Don't** nest `Main`, and don't add another max-width wrapper inside it.

## API

```ts
type MainProps = React.HTMLAttributes<HTMLElement> & {
    fixed?: boolean;
    fluid?: boolean;
    ref?: React.Ref<HTMLElement>;
};
export declare function Main({ fixed, className, fluid, ...props }: MainProps): JSX.Element;
```

## Example

```html
<div id="root" class="p-6"></div>
<script>
(function () {
  var h = React.createElement, DC = window.DigitalCrew, I = DC.Icons;
  function Stat(props) {
    return h(DC.Card, { className: "gap-1 py-4" },
      h(DC.CardContent, { className: "px-4" },
        h("p", { className: "text-xs text-muted-foreground" }, props.label),
        h("p", { className: "text-xl font-semibold tabular-nums" }, props.value)));
  }
  function App() {
    // The shell's content pane is the @container/content that Main's max width keys off.
    return h("div", { className: "@container/content overflow-hidden rounded-[10px] border border-glass bg-background/70" },
      h("div", { className: "flex h-14 items-center gap-2 border-b border-border/60 px-4 text-sm text-muted-foreground" },
        h(I.Bell, { className: "size-4" }), "Header"),
      h(DC.Main, null,
        h("div", { className: "space-y-4" },
          h("div", { className: "flex items-center justify-between" },
            h("h1", { className: "text-2xl font-semibold" }, "Notifications"),
            h(DC.Button, { variant: "outline", size: "sm" }, "Mark all as read")),
          h("div", { className: "grid grid-cols-3 gap-4" },
            h(Stat, { label: "Unread", value: "7" }),
            h(Stat, { label: "Replies today", value: "12" }),
            h(Stat, { label: "Meetings booked", value: "3" })),
          h("p", { className: "text-sm text-muted-foreground" }, "Max booked a meeting with Claire Dubois, CFO at Northwind Traders, for Thursday at 10:00."))));
  }
  ReactDOM.createRoot(document.getElementById("root")).render(h(DC.TooltipProvider, { delayDuration: 80 }, h(App)));
})();
</script>
```

## More in Layout

- [Accordion](/design/components/accordion.md): Stacked sections that expand one at a time (or several); height animates in 250ms on the smooth-out ease (`--acc-*`).
- [Card](/design/components/card.md): The raised surface for grouped content: `card` fill, `border`, `radius-xl` (14px), `shadow-sm`, 24px padding and gap.
- [Collapsible](/design/components/collapsible.md): Shows and hides one region under its trigger (Radix Collapsible); animates with the accordion tokens.
- [ContentSection](/design/components/content-section.md): The settings-page section: a title, a one-line description, a separator, then a scrolling body.
- [DataTableToolbar](/design/components/data-table-toolbar.md): The toolbar of Max's data-table kit (search, faceted filters, Reset and the View columns menu) and how the kit's pieces fit around a `Table`.
- [PanelSplitter](/design/components/panel-splitter.md): The draggable seam between two side-by-side panels; every split view in Max uses it, so one gesture works everywhere.
- [ScrollArea](/design/components/scroll-area.md): A scroll container with thin themed scrollbars (10px track, `border`-coloured thumb) that appear on hover.
- [Separator](/design/components/separator.md): A 1px `border` hairline, horizontal or vertical (Radix Separator, decorative by default).
- [Table](/design/components/table.md): The data table primitive: 14px rows with `border` dividers, 40px header cells in medium weight, `muted` at 50% on hover and selection.