Layout

Implement a basic page layout with multiple content areas.

Source

Want to skip the docs? Try our MCP Server

#
Documentation

#
Usage

Header

Sidebar

Content

DetailsPanel


import { Box } from "@optiaxiom/react";
import { Layout, LayoutContent } from "@optiaxiom/react/unstable";
 
import { Panel } from "../Panel";
 
export function App() {
  return (
    <Box bg="bg.page" p="24" style={{ height: "400px", width: "600px" }}>
      <Layout
        detailsPanel={<Panel h="full">DetailsPanel</Panel>}
        header={<Panel>Header</Panel>}
        sidebar={<Panel>Sidebar</Panel>}
        size="full"
      >
        <LayoutContent>
          <Panel h="full">Content</Panel>
        </LayoutContent>
      </Layout>
    </Box>
  );
}

#
Anatomy


import { Layout, LayoutContent } from "@optiaxiom/react/unstable";
 
export default () => (
  <Layout>
    <LayoutContent />
  </Layout>
);

#
Related

Sidebar

Primary navigation menu for left side of the page, with support for branding and links.

Grid

Use Grid component to place items in a grid using equal width columns.

#
Props

#
Layout

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`
`detailsPanel` Content for the details panel area of the layout. `ReactNode`
`header` Content for the header area of the layout. `ReactNode`
`resizable` Whether to enable resizable panels for the details panel area. `false \| true`
`sidebar` Content for the sidebar area of the layout. `ReactNode`
`size` Whether to fit the layout to the browser screen or the parent element. `"screen" \| "full"` Default: `screen`

#
LayoutContent

Supports all Box props in addition to its own. Renders a <div> element.

Prop
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`children` `ReactNode`
`className` `string`

#
Changelog

#
1.6.0

Added component