Shell

<base-shell> is the unified Pro application shell. Use mode="page" for marketing/content sites (hamburger push drawer under 991px, optional footer) or mode="dashboard" for admin apps (expanded / mini / mobile rail). Project header, sidebar, content, and an optional footer; put <router-outlet> in content.

Proshell

Live demo

Switch product mode, then open panels or collapse the rail. Force mobile chrome with the viewport buttons to preview push/drawer behavior inside the frame.

Modes and sizing

Page mode uses a 991px cutoff and push panels (mutex left/right). Dashboard mode uses 1080px / 1360px for mobile / mini / expanded, with [(collapsed)], [width], and [miniWidth]. Force chrome with layout (auto | mobile | desktop) for demos.

When to use

• mode="page" — marketing sites, docs articles, optional site footer.
• mode="dashboard" — admin apps with persistent icon navigation.
• Free-tier alternatives: <base-sidenav> for simple docs hubs, <base-scroll-nav> for on-page TOC shells, and <base-page-main> for header/body/footer page frames.

Installation

Run the following command to add this shell to your project:

npx base-ui-cli add shell

import { ShellComponent, ShellContentComponent, ShellFooterComponent, ShellHeaderComponent, ShellNavComponent, ShellNavItemComponent, ShellSidebarComponent, ShellToggleComponent } from '@lussos/base-ui';

@Component({
  selector: 'app-your-component',
  imports: [
    ShellComponent,
    ShellContentComponent,
    ShellFooterComponent,
    ShellHeaderComponent,
    ShellNavComponent,
    ShellNavItemComponent,
    ShellSidebarComponent,
    ShellToggleComponent
  ],
  template: `...`
})
export class YourComponent {}