Layout

Import

import { SingleColumnPage, SidebarPage, DualSidebarPage, StackedPage, HolyGrailPage, SplitPage, GridPage, AsymmetricPage, PageLayout, Header, Sidebar, Main, Footer, Container } from '@tac-ui/web';

SingleColumnPage

A centered single-column layout ideal for content-focused pages like blog posts, articles, documentation, and landing pages. Content is horizontally centered with responsive padding and a configurable max-width constraint.

<SingleColumnPage
  maxWidth="lg"
  header={<Header sticky bordered>Navigation</Header>}
  footer={<Footer>Footer</Footer>}
>
  <p>Page content goes here</p>
</SingleColumnPage>

SidebarPage

A layout with a fixed-width sidebar and a scrollable main content area. The standard app shell pattern used for admin panels, settings pages, and navigation-heavy applications. The sidebar supports collapsing, positioning on either side, rounded floating style, and custom header with label/icon.

<SidebarPage
  sidebar={<nav>Sidebar navigation</nav>}
  sidebarWidth={280}
  sidebarPosition="left"
  sidebarLabel="Navigation"
  sidebarIcon={<Menu size={18} />}
  sidebarRounded
  collapsible
  defaultCollapsed={false}
  header={<Header sticky bordered>Navigation</Header>}
>
  <p>Main content</p>
</SidebarPage>

DashboardPage

A dashboard layout with a left-anchored navigation sidebar and a main content area. Similar to SidebarPage but specialized for dashboard use cases where the sidebar is always on the left. Commonly combined with GridPage children for card-based dashboard grids.

<DashboardPage
  sidebar={<nav>Dashboard nav</nav>}
  sidebarWidth={260}
  sidebarLabel="Dashboard"
  collapsible
  header={<Header sticky bordered blur>App Header</Header>}
>
  <GridPage columns={3}>
    <Card>Stats</Card>
    <Card>Chart</Card>
    <Card>Table</Card>
  </GridPage>
</DashboardPage>

SplitPage

A two-pane layout with equal-width left and right panels separated by a border. Ideal for side-by-side comparisons, authentication pages (hero + form), dual-panel editors, or before/after views. Each panel scrolls independently.

<SplitPage
  left={<div>Left panel content</div>}
  right={<div>Right panel content</div>}
  header={<Header sticky bordered>App</Header>}
/>

GridPage

A responsive grid layout that distributes children into columns. Columns are responsive by default: single column on mobile, scaling up to the configured column count on wider screens. Useful for card grids, image galleries, and product listings.

<GridPage
  columns={3}
  header={<Header sticky bordered>App</Header>}
>
  <Card>Item 1</Card>
  <Card>Item 2</Card>
  <Card>Item 3</Card>
  <Card>Item 4</Card>
</GridPage>

StackedPage

A vertically stacked layout where children fill the main column in document order. Each child is rendered as a full-width section in a flex column. Ideal for multi-section landing pages, onboarding flows, and long-scroll storytelling pages.

<StackedPage header={<Header sticky bordered>Navigation</Header>}>
  <section>Hero Section</section>
  <section>Features</section>
  <section>Testimonials</section>
</StackedPage>

DualSidebarPage

Three-column layout with independent left and right sidebars flanking the main content. Each sidebar has its own width, collapsibility, label, icon, and style options. Useful for IDE-like interfaces, email clients, or content management systems where navigation and detail panels coexist.

<DualSidebarPage
  leftSidebar={<nav>Navigation</nav>}
  rightSidebar={<aside>Details panel</aside>}
  leftWidth={240}
  rightWidth={240}
  leftCollapsible
  rightCollapsible
  leftLabel="Explorer"
  rightLabel="Properties"
  header={<Header sticky bordered>App</Header>}
>
  <p>Main content</p>
</DualSidebarPage>

HolyGrailPage

Classic holy-grail layout: full-width header and footer with a three-column body containing navigation, main content, and an aside. Structurally similar to DualSidebarPage but semantically designed for the traditional web layout pattern with header/footer spanning the full width.

<HolyGrailPage
  leftSidebar={<nav>Nav</nav>}
  rightSidebar={<aside>Aside</aside>}
  leftCollapsible
  rightCollapsible
  header={<Header sticky bordered>App</Header>}
  footer={<Footer bordered>Footer</Footer>}
>
  <p>Main content</p>
</HolyGrailPage>

AsymmetricPage

Two-pane layout with a configurable flex ratio between the primary and secondary panels. The secondary panel has a card-style background and a left border. Ideal for article + sidebar, main content + related items, or any layout where one pane should be visually dominant.

<AsymmetricPage
  primary={<div>Main article</div>}
  secondary={<div>Related content</div>}
  ratio="2:1"
  header={<Header sticky bordered>App</Header>}
/>

AppPage

A narrow, fixed-width layout optimized for mobile apps and webview embedding. Full-width on small screens, centered with an optional elevated card style on larger screens. Supports safe-area inset padding for native iOS/Android webview environments, and independently controllable sticky header/footer.

<AppPage
  maxWidth="sm"
  elevated
  safeArea
  header={<Header sticky bordered>App</Header>}
  footer={<Footer bordered>Footer</Footer>}
>
  <p>Mobile-optimized content</p>
</AppPage>

Building Blocks

Low-level layout primitives used to compose the page layouts above. These can also be used independently to build custom layouts.

Header

Top-level page header bar (64px height) with optional sticky positioning, bottom border, backdrop blur, and auto-hide on scroll. Uses flex row layout for aligning navigation items. The header preserves its height via shrink-0, preventing compression in flex column containers.

// Basic header
<Header sticky bordered>Navigation</Header>

// Blur + auto-hide header
<Header sticky bordered blur autoHide>
  <span>Logo</span>
  <nav>Links</nav>
</Header>

Footer

Page footer bar with optional top border. Renders a footer element with card background and horizontal padding.

<Footer bordered>
  <p>© 2025 Company</p>
</Footer>

Sidebar

Collapsible side panel that can be positioned on the left or right of the layout. Features animated collapse/expand transitions, a header area with label, icon, and toggle button, a scrollable content area, and an optional pinned footer. When collapsed, the sidebar shrinks to 64px (icon-only width). The rounded variant renders the sidebar as a floating card with margins and rounded corners.

<Sidebar
  width={280}
  position="left"
  label="Navigation"
  icon={<Menu size={18} />}
  collapsible
  collapsed={collapsed}
  onCollapse={setCollapsed}
  rounded
  swapOnCollapse
  footer={<SidebarFooter>Settings</SidebarFooter>}
>
  <SidebarGroup label="Menu">
    <SidebarItem variant="filled" size="md" icon={<Home />} active>Home</SidebarItem>
    <SidebarItem variant="filled" size="md" icon={<Settings />}>Settings</SidebarItem>
  </SidebarGroup>
</Sidebar>

Sidebar Sub-components

Components designed to be used inside Sidebar for structured navigation. They automatically respond to the parent Sidebar's collapsed state via SidebarContext.

Container

Centered content wrapper with responsive horizontal padding (px-4 on mobile, px-6 on sm, px-8 on lg) and configurable max-width. A general-purpose content constraint component.

Main

Primary content area that grows to fill available space (flex-1) with padding and optional max-width constraint. Used as the main content region inside layout compositions.

FloatingMenuBar

A floating navigation bar that hovers over page content with a pill-shaped appearance. Supports 9 positions in a 3x3 grid (top/middle/bottom x left/center/right), backdrop blur, and border. Commonly used as a bottom tab bar in mobile/app-like layouts or as a floating action toolbar.

<FloatingMenuBar position="bottom-center" bordered blur>
  <FloatingMenuItem icon={<Home size={18} />} label="Home" active />
  <FloatingMenuItem icon={<Search size={18} />} label="Search" />
  <FloatingMenuItem icon={<Bell size={18} />} label="Alerts" />
  <FloatingMenuItem icon={<User size={18} />} label="Profile" />
</FloatingMenuBar>

FloatingMenuItem

An individual item inside a FloatingMenuBar. Renders an icon with an optional text label underneath. Active state highlights the item with the primary color.

PageLayout

Low-level full-page layout shell combining a header, optional sidebar, main content area, and footer. This is the base primitive used internally — prefer the higher-level page compositions (SidebarPage, DashboardPage, etc.) for most use cases.

Hooks

Layout-related hooks for building custom sidebar components.