Shell

<ply-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

Shell — part of Ply Pro

Unlock it plus 90 pro blocks, widgets & layouts — $99 one-time. Lifetime updates, 14-day money-back guarantee.

Unlock Pro

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.

Docs

Article

Header, content, and footer push together when a sidebar opens. Only one side may be open at a time.

Optional footer slot

HTML

<ply-shell mode="page">
  <ply-shell-sidebar side="left">...</ply-shell-sidebar>
  <ply-shell-header>
    Brand
    <ply-shell-toggle side="right"></ply-shell-toggle>
  </ply-shell-header>
  <ply-shell-content><router-outlet /></ply-shell-content>
  <ply-shell-footer>...</ply-shell-footer>
</ply-shell>

<ply-shell mode="dashboard" [(collapsed)]="collapsed">
  <ply-shell-sidebar>
    <ply-shell-nav>
      <ply-shell-nav-section label="Workspace">
        <a ply-shell-nav-item icon="home" routerLink="/">Home</a>
      </ply-shell-nav-section>
    </ply-shell-nav>
  </ply-shell-sidebar>
  <ply-shell-header>App</ply-shell-header>
  <ply-shell-content><router-outlet /></ply-shell-content>
</ply-shell>

TypeScript

import { Component } from '@angular/core';

// Install: npx ply-ui-cli add shell
// Paths are relative to aliases.components (default: src/app/components)
import { ShellContentComponent } from './shell/shell-content/shell-content.component';
import { ShellFooterComponent } from './shell/shell-footer/shell-footer.component';
import { ShellHeaderComponent } from './shell/shell-header/shell-header.component';
import { ShellNavItemComponent } from './shell/shell-nav-item/shell-nav-item.component';
import { ShellNavSectionComponent } from './shell/shell-nav-section/shell-nav-section.component';
import { ShellNavComponent } from './shell/shell-nav/shell-nav.component';
import { ShellSidebarComponent } from './shell/shell-sidebar/shell-sidebar.component';
import { ShellToggleComponent } from './shell/shell-toggle/shell-toggle.component';
import { ShellComponent } from './shell/shell.component';
import { ShellService } from './shell/shell.service';

@Component({
  selector: 'app-shell-example',
  imports: [
    ShellComponent,
    ShellContentComponent,
    ShellFooterComponent,
    ShellHeaderComponent,
    ShellNavComponent,
    ShellNavItemComponent,
    ShellNavSectionComponent,
    ShellSidebarComponent,
    ShellToggleComponent
  ],
  template: `...`
})
export class ShellExampleComponent {
  private shell = inject(ShellService);
}

Install

bash

npx ply-ui-cli add shell

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.

HTML

When to use

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

Installation

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

bash

npx ply-ui-cli add shell

API Reference

For AI agents

Copy a prompt with the registry name, CLI install, and import — or add the Ply MCP server.

bash

npx -y ply-ui-mcp

Ply provides standalone components. Import the exact elements you want to use into your component.

typescript (Example)

// Install: npx ply-ui-cli add shell
// Paths are relative to aliases.components (default: src/app/components)
import { ShellContentComponent } from './shell/shell-content/shell-content.component';
import { ShellFooterComponent } from './shell/shell-footer/shell-footer.component';
import { ShellHeaderComponent } from './shell/shell-header/shell-header.component';
import { ShellNavItemComponent } from './shell/shell-nav-item/shell-nav-item.component';
import { ShellNavSectionComponent } from './shell/shell-nav-section/shell-nav-section.component';
import { ShellNavComponent } from './shell/shell-nav/shell-nav.component';
import { ShellSidebarComponent } from './shell/shell-sidebar/shell-sidebar.component';
import { ShellToggleComponent } from './shell/shell-toggle/shell-toggle.component';
import { ShellComponent } from './shell/shell.component';
import { ShellService } from './shell/shell.service';

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

API for shell — generated from JSDoc in the library source.

API reference for shell
API	Member	Type	Default	Description
`ShellService`	`open()`	`(side: ShellSide) => void`	—	Calls open.
`ShellService`	`close()`	`(side: ShellSide) => void`	—	Calls close.
`ShellService`	`closeAll()`	`() => void`	—	Calls closeAll.
`ShellService`	`toggle()`	`(side: ShellSide) => void`	—	Calls toggle.
`ShellService`	`isOpen()`	`(side: ShellSide) => void`	—	Calls isOpen.
`ShellService`	`toggleCollapsed()`	`() => void`	—	Calls toggleCollapsed.
`ShellService`	`toggleMobile()`	`() => void`	—	Calls toggleMobile.
`ShellService`	`setMobileOpen()`	`(open: boolean) => void`	—	Calls setMobileOpen.
`ShellService`	`closeDrawer()`	`() => void`	—	Close any transient drawer (page panel or dashboard mobile).
`a[ply-shell-nav-item], button[ply-shell-nav-item], ply-shell-nav-item`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`a[ply-shell-nav-item], button[ply-shell-nav-item], ply-shell-nav-item`	`icon`	`string`	`''`	Icon sprite name rendered before the label.
`ply-shell`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-shell`	`mode`	`ShellMode`	`'page'`	Product mode. `page` = marketing push-drawer under 991px (no mini). `dashboard` = expanded / mini / mobile rail.
`ply-shell`	`layout`	`ShellLayoutMode`	`'auto'`	Force chrome for demos. `auto` follows breakpoints for the active mode.
`ply-shell`	`width`	`number`	`280`	Dashboard expanded rail width in px.
`ply-shell`	`miniWidth`	`number`	`76`	Dashboard mini rail width in px.
`ply-shell`	`collapsed`	`boolean`	`false`	Start dashboard in mini (icons-only) rail. Two-way bindable.
`ply-shell`	`(collapsedChange)`	`boolean`	—	Emits when dashboard collapsed state changes.
`ply-shell-content`	`—`	`—`	—	Scrollable main area for `ply-shell`. Place `<router-outlet>` here. In page mode the parent column scrolls (with footer); in dashboard mode this host scrolls.
`ply-shell-content`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-shell-footer`	`—`	`—`	—	Optional footer slot for `ply-shell`. Typically used in page mode.
`ply-shell-footer`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-shell-header`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-shell-header`	`showCollapseToggle`	`boolean`	`true`	Show the dashboard collapse/expand control (left edge, next to the sidebar).
`ply-shell-header`	`showMenuToggle`	`boolean`	`true`	Show the built-in hamburger (dashboard mobile, or page under 991px when enabled).
`ply-shell-nav`	`—`	`—`	—	Navigation list container for `ply-shell-sidebar`.
`ply-shell-nav`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-shell-nav-section`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-shell-nav-section`	`label`	`string`	`''`	Visible section heading. Fades out when the dashboard rail is collapsed.
`ply-shell-sidebar`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-shell-sidebar`	`side`	`ShellSide`	`'left'`	Edge for page-mode panels. Dashboard mode always uses the left rail.
`ply-shell-sidebar`	`width`	`number`	`280`	Panel / rail width in px (page panel or dashboard expanded width).
`ply-shell-toggle`	`class`	`string`	`''`	Extra host classes merged via `cn()`.
`ply-shell-toggle`	`side`	`ShellSide`	`'left'`	Which panel this toggle opens.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 215 components and blocks (125 free), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package. Not MUI Base UI (base-ui.com, React).