@object-ui/layout

Layout components for Object UI - provides application shell components for building structured layouts with React Router integration.

Features

• Application Shell - Complete app layout structure with header, sidebar, and content areas
• Page Components - Standard page layouts with headers and content sections
• Navigation - Sidebar navigation with React Router integration
• Responsive - Mobile-friendly layouts with collapsible sidebars
• Tailwind Native - Built with Tailwind CSS for easy customization

Installation

pnpm add @object-ui/layout

Peer Dependencies:

• react >= 18.0.0
• react-dom >= 18.0.0
• react-router-dom >= 6.0.0

Components

AppShell

Complete application shell with header, sidebar, and main content area.

import { AppShell } from '@object-ui/layout';

<AppShell
  header={<div>Header Content</div>}
  sidebar={<div>Sidebar Content</div>}
>
  <div>Main Content</div>
</AppShell>

Page

Standard page layout with optional header section.

import { Page, PageHeader } from '@object-ui/layout';

<Page>
  <PageHeader title="Dashboard" description="View your metrics" />
  <div>Page Content</div>
</Page>

SidebarNav

Navigation sidebar component with React Router integration.

import { SidebarNav } from '@object-ui/layout';

const navItems = [
  { label: 'Dashboard', path: '/dashboard', icon: 'home' },
  { label: 'Users', path: '/users', icon: 'users' },
  { label: 'Settings', path: '/settings', icon: 'settings' }
];

<SidebarNav items={navItems} />

Usage with React Router

The layout components are designed to work seamlessly with React Router:

import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { AppShell, SidebarNav } from '@object-ui/layout';

function App() {
  return (
    <BrowserRouter>
      <AppShell
        header={<div className="p-4">My App</div>}
        sidebar={
          <SidebarNav
            items={[
              { label: 'Dashboard', path: '/', icon: 'home' },
              { label: 'Users', path: '/users', icon: 'users' }
            ]}
          />
        }
      >
        <Routes>
          <Route path="/" element={<Dashboard />} />
          <Route path="/users" element={<Users />} />
        </Routes>
      </AppShell>
    </BrowserRouter>
  );
}

Customization

All components accept className prop for Tailwind customization:

<AppShell
  className="bg-gray-50"
  headerClassName="border-b"
  sidebarClassName="bg-white shadow-lg"
>
  {children}
</AppShell>

API Reference

For detailed API documentation, visit the Object UI Documentation.

Compatibility

• React: 18.x or 19.x
• Node.js: ≥ 18
• TypeScript: ≥ 5.0 (strict mode)
• @objectstack/spec: ^3.3.0
• @objectstack/client: ^3.3.0
• Tailwind CSS: ≥ 3.4 (for packages with UI)

Links

• 📚 Documentation
• 📦 npm package
• 📝 Changelog
• 🐛 Report an issue
• 🤝 Contributing Guide
• 🗺️ Roadmap

License

MIT — see LICENSE.