Usage

import { AppLayout, AppMain } from '@/components/ui'

<AppLayout>
  <AppSidebar>...</AppSidebar>
  <AppMain>
    <YourContent />
  </AppMain>
</AppLayout>

Features

• Full-screen flex container
• 248.AI background color (#FAFAFA)
• Handles overflow and scrolling
• 24px padding on main content

Visual Structure

With Actions

Simple Header

Usage

import { AppHeader } from '@/components/layout'

<AppHeader 
  title="My App"
  actions={
    <>
      <Button variant="outline">Help</Button>
      <Button>Upgrade</Button>
    </>
  } 
/>

With Subtitle and Actions

Simple Title

Usage

import { PageTitle } from '@/components/layout'

<PageTitle 
  title="Page Title" 
  subtitle="Description"
  actions={<Button>Action</Button>}
/>

Usage

import { AppSidebar } from '@/components/ui'

<AppSidebar
  appName="My App"
  defaultOpen={true}
  onToggle={(isOpen) => setSidebarOpen(isOpen)}
  showUser={true}
>
  {/* SidebarNavItem components */}
</AppSidebar>

Props

• appName: string - Required: Application name in header
• children: ReactNode - Required: Navigation items
• defaultOpen?: boolean - Optional: Initial open state (default: true)
• onToggle?: (isOpen: boolean) => void - Optional: Toggle callback
• showUser?: boolean - Optional: Show user section (default: true)
• userIcon?: string - Optional: User icon path

Features

• Smooth collapse animation (256px → 48px)
• Auto-switching hamburger/close icons
• User avatar section at bottom
• White background with subtle borders

Example

Open (256px)

Laboratory✕

Dashboard

Search

Settings

Collapsed (48px)

☰

Usage

import { SidebarNavItem } from '@/components/ui'

<SidebarNavItem
  id="dashboard"
  label="Dashboard"
  iconPath="/icons/sparkles-dark.svg"
  isActive={activeTab === 'dashboard'}
  isCollapsed={!sidebarOpen}
  onClick={() => setActiveTab('dashboard')}
/>

Props

• id: string - Required: Unique identifier
• label: string - Required: Display text
• iconPath: string - Required: Path to icon SVG (e.g., "/icons/sparkles-dark.svg")
• isActive?: boolean - Optional: Active state (default: false)
• isCollapsed?: boolean - Optional: Collapsed state (default: false)
• onClick?: () => void - Optional: Click handler

Smart Icon Switching

Available Icons

From /Branding Assets/Custom Icons/Dark/SVGs/:

• sparkles-dark.svg - AI/Magic features
• address-book-dark.svg - Contacts/Inbox
• magnifying-glass-dark.svg - Search
• sliders-dark.svg - Controls/Settings
• bars-dark.svg - List/Table view
• grid-dark.svg - Card/Grid view
• bolt-dark.svg - Power/Speed
• gear-dark.svg - Settings

Examples

Dashboard (Active)

Search

Settings

Active state uses Midnight background

Usage

import {
  Sidebar,
  SidebarItem,
  SidebarGroup,
  SidebarUser
} from '@/components/layout'

<Sidebar
  isOpen={isOpen}
  onToggle={() => setIsOpen(!isOpen)}
  header={<h1>App Name</h1>}
  footer={<SidebarUser name="User" email="user@example.com" />}
>
  <SidebarGroup title="Navigation" isCollapsed={!isOpen}>
    <SidebarItem
      label="Home"
      icon="/icons/home.svg"
      isActive={active === 'home'}
      isCollapsed={!isOpen}
      onClick={() => setActive('home')}
      badge={5}
    />
  </SidebarGroup>
</Sidebar>

Usage

import { Button } from '@/components/ui'

<Button>Primary Button</Button>
<Button variant="outline">Secondary Button</Button>
<Button size="sm">Small Button</Button>
<Button disabled>Disabled Button</Button>

Examples

Usage

import { 
  Select, 
  SelectContent, 
  SelectItem, 
  SelectTrigger, 
  SelectValue 
} from '@/components/ui'

<Select onValueChange={setValue}>
  <SelectTrigger>
    <SelectValue placeholder="Select option" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="option1">Option 1</SelectItem>
    <SelectItem value="option2">Option 2</SelectItem>
    <SelectItem value="option3">Option 3</SelectItem>
  </SelectContent>
</Select>

Examples

Usage

import { Checkbox } from '@/components/ui'
import { Label } from '@/components/ui'

<div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
  <Checkbox 
    id="terms" 
    checked={isChecked}
    onCheckedChange={setIsChecked}
  />
  <Label htmlFor="terms">
    Accept terms and conditions
  </Label>
</div>

Examples

Features

• Uses 248.AI Midnight (#1C1B20) for checked state
• Clean border styling with #EEEEEE
• Supports disabled state
• Accessible with proper label associations

Usage

import { SidePanelPlaceholder } from '@/components/side-panel'

<Button onClick={() => setIsOpen(true)}>
  Open Panel
</Button>

<SidePanelPlaceholder 
  isOpen={isOpen}
  onClose={() => setIsOpen(false)}
/>

Demo