Layout

Full application shell combining sidebar, header, and main content area.

Preview · Layout

Code

HTML · @primus/ui-core

<div style="display:flex;border:1px solid var(--border);border-radius:var(--radius-medium);overflow:hidden;height:200px">
  <aside style="width:140px;background:var(--card);border-right:1px solid var(--border);padding:0.875rem;flex-shrink:0">
    <div style="font-weight:600;font-size:0.8rem;margin-bottom:0.75rem">Primus</div>
    <nav style="font-size:0.8rem;display:flex;flex-direction:column;gap:4px">
      <a href="#" style="padding:0.35rem 0.5rem;border-radius:4px;background:color-mix(in srgb,var(--primary) 10%,transparent);color:var(--primary);text-decoration:none;font-weight:500" aria-current="page">Dashboard</a>
      <a href="#" style="padding:0.35rem 0.5rem;border-radius:4px;color:var(--foreground);text-decoration:none">Reports</a>
    </nav>
  </aside>
  <main style="flex:1;padding:1rem;background:var(--background)">
    <h2 style="margin:0 0 0.5rem;font-size:0.975rem">Dashboard</h2>
    <p style="margin:0;font-size:0.8rem;color:var(--muted-foreground)">Main content area</p>
  </main>
</div>

React

import { PrimusLayout, PrimusSidebar, PrimusHeader } from 'primus-react-ui';

<PrimusLayout
  sidebar={<PrimusSidebar items={navItems} activeId={activeId} />}
  header={<PrimusHeader title="My App" user={currentUser} />}
>
  <Outlet />
</PrimusLayout>

Angular

<primus-layout [sidebar]="true" [header]="true">
  <primus-header title="My App" [user]="currentUser"></primus-header>
  <primus-sidebar [items]="navItems" [activeId]="activeId"></primus-sidebar>
  <router-outlet></router-outlet>
</primus-layout>

Props

Prop	Type	Default	Description
sidebar	ReactNode | boolean	—	Sidebar slot — pass <PrimusSidebar>
header	ReactNode | boolean	—	Header slot — pass <PrimusHeader>
darkMode	boolean	false	Force dark mode
children	ReactNode	required	Main content area

TypeScript interfaces

// Full layout composition — React
import {
  PrimusLayout, PrimusSidebar, PrimusHeader,
} from 'primus-react-ui';

const navItems: SidebarItem[] = [
  { id: 'dashboard', label: 'Dashboard', route: '/dashboard' },
  { id: 'tenants',   label: 'Tenants',   route: '/tenants' },
];

function AppShell({ children }) {
  return (
    <PrimusLayout
      sidebar={
        <PrimusSidebar
          items={navItems}
          activeId={useActiveRoute()}
          onItemClick={(item) => navigate(item.route)}
        />
      }
      header={
        <PrimusHeader
          title={usePageTitle()}
          breadcrumbs={useBreadcrumbs()}
          user={useCurrentUser()}
        />
      }
    >
      {children}
    </PrimusLayout>
  );
}

// Angular — content projection
// <primus-layout [sidebar]="true" [header]="true">
//   <primus-sidebar [items]="navItems" [activeId]="activeId" sidebar></primus-sidebar>
//   <primus-header [title]="pageTitle" header></primus-header>
//   <div main-content><!-- page content --></div>
// </primus-layout>

Version history

See the Changelog for version history and breaking changes.