AppShell

Three-row vertical frame — header (fixed), scrollable content, optional footer (fixed). Mirrors the framed page pattern (think app chrome) and pairs with BrandMark for a wordmark in the header.

BOOGIE.RO

This is the scrollable content slot.

Header and footer stay pinned while this section scrolls. The shell hugs the center edge of the parent — open the picker above to flip it.

Usage

import { AppShell, BrandMark, Button } from '@bwo-ui/react';

<AppShell
  maxWidth={420}
  align="center"
  header={
    <>
      <BrandMark brand="BOOGIE" tld=".RO" href="/" />
      <div style={{ display: 'inline-flex', gap: 8 }}>
        <Button size="sm" variant="ghost">Ghid</Button>
        <Button size="sm" variant="outline">Login</Button>
      </div>
    </>
  }
  footer={<span>#crafted-in-ro</span>}
>
  {/* your page content */}
</AppShell>

Alignment

The align prop controls where the shell sits horizontally inside its parent — handy when the shell is narrower than its container (a constrained maxWidth inside a full-bleed page, for example).

'center' (default) — equivalent to margin: 0 auto. The shell sits in the middle of the parent.
'left' — shell hugs the parent's left edge.
'right' — shell hugs the parent's right edge.

Alignment only matters when the shell's maxWidth is smaller than the parent. A full-width shell looks the same in all three modes. The prop also emits a data-align attribute and a bwo-app-shell--{align} modifier class so you can hook into either from custom CSS.

<AppShell align="left"  maxWidth={420}>{/* hugs left  */}</AppShell>
<AppShell align="center" maxWidth={420}>{/* default      */}</AppShell>
<AppShell align="right" maxWidth={420}>{/* hugs right */}</AppShell>

AppShell props

Prop	Type	Default	Description
`header`	`ReactNode`	—	Top row — typically brand on the left, actions on the right.
`footer`	`ReactNode`	—	Bottom row. Optional.
`maxWidth`	`number \| string`	—	Constrains the shell width. Numbers are treated as px. Defaults to the CSS variable `--bwo-app-shell-max` (900px).
`align`	`'left' \| 'center' \| 'right'`	`'center'`	Where the shell sits horizontally inside its parent. Only visible when `maxWidth` < parent width.
`contentId`	`string`	—	Id on the scrollable content div — useful for `scrollIntoView` from elsewhere.

BrandMark props

Prop	Type	Default	Description
`brand`	`ReactNode`	—	Main wordmark, e.g. "BOOGIE".
`accent`	`ReactNode`	—	Optional fragment rendered in `--bwo-accent`.
`tld`	`ReactNode`	—	Trailing TLD-style suffix, smaller and muted.