Components
Layout

Layout Components

Structural components for page layout and content organization.

Status: Stable

MetronicLayout

The primary application shell component supporting 8 layout variants. See Layouts for full documentation.

import { MetronicLayout } from '@gtcx/ui';
 
<MetronicLayout variant="sidebar" menu={menu} logo={logo}>
  <PageContent />
</MetronicLayout>

Header

Application header with user menu, navigation, and toolbar.

import { Header } from '@gtcx/ui';
 
<Header
  user={{ name: 'Jane Doe', email: 'jane@example.com' }}
  menuItems={[
    { label: 'Dashboard', path: '/' },
    { label: 'Settings', path: '/settings' },
  ]}
  onLogout={handleLogout}
/>

Separator

Visual divider between content sections.

import { Separator } from '@gtcx/ui';
 
<Separator />                          // Horizontal
<Separator orientation="vertical" />   // Vertical

ScrollArea

Scrollable container with custom scrollbar styling.

import { ScrollArea } from '@gtcx/ui';
 
<ScrollArea style={{ height: 400 }}>
  <div>Long scrollable content...</div>
</ScrollArea>

ResponsiveGrid

Responsive grid layout with configurable columns.

import { ResponsiveGrid, ResponsiveGridItem } from '@gtcx/ui';
 
<ResponsiveGrid columns={{ xs: 1, sm: 2, lg: 3 }} gap={16}>
  <ResponsiveGridItem><Card>Item 1</Card></ResponsiveGridItem>
  <ResponsiveGridItem><Card>Item 2</Card></ResponsiveGridItem>
  <ResponsiveGridItem><Card>Item 3</Card></ResponsiveGridItem>
</ResponsiveGrid>

SplitPane

Resizable split panel layout.

import { SplitPane } from '@gtcx/ui';
 
<SplitPane
  direction="horizontal"
  defaultSizes={[30, 70]}
  minSize={200}
>
  <div>Left panel</div>
  <div>Right panel</div>
</SplitPane>

Accessibility Notes

  • Ensure skip links or landmarks for large layouts.
  • Keep navigation regions focusable and labeled.
  • Preserve keyboard order across panes.

Tokens to Customize

  • colorBgBase
  • borderRadiusLG
  • boxShadowSecondary
FeedbackMenus