Drawer

Ply drawer is a slide-in panel from any edge. Register provideAnimationsAsync() or open throws NG05105. Copy drawer in, set position and size, and emit closed from links so the overlay detaches on navigate. It is extra context, not the main page.

When to use

Filters, nav on small screens, and inspect-record side panels.
When the underlying page should stay mounted behind the overlay.

When not to use

Blocking tasks that need a focus-trapped modal — use dialog.
The primary layout rail — use sidenav or shell.

Install with npx ply-ui-cli add drawer.

free

Use <ply-drawer #myDrawer position="left"></ply-drawer> to add a drawer to any page you want. Name it with identifier by your choice and use position="" to define position of the drawer. Supported positions are "left", "right", "top" and "bottom".

Use close=""with boolean "true" or "false" to control whether the drawer to be with button close or without it..

Left Drawer

Click button below to show the Left Drawer example

HTML

<button ply-button color="primary" [ply-drawer]="drawer">
  Open Left Drawer
</button>

<ply-drawer #drawer position="left" [close]="true">
  <!-- drawer content -->
</ply-drawer>

TypeScript

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

// Install: npx ply-ui-cli add drawer
// Paths are relative to aliases.components (default: src/app/components)
import { DrawerPanel } from './drawer/drawer-panel';
import { DrawerComponent } from './drawer/drawer.component';
import { DrawerDirective } from './drawer/drawer.directive';

@Component({
  selector: 'app-drawer-example',
  imports: [
    DrawerComponent,
    DrawerDirective
  ],
  template: `...`
})
export class DrawerExampleComponent {}

Install

bash

npx ply-ui-cli add drawer

Right Drawer

Click button below to show the Right Drawer example

HTML

<button ply-button color="primary" [ply-drawer]="drawerRight">
  Open Right Drawer
</button>

<ply-drawer #drawerRight position="right" size="md" [close]="true">
  <!-- drawer content -->
</ply-drawer>

TypeScript

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

// Install: npx ply-ui-cli add drawer
// Paths are relative to aliases.components (default: src/app/components)
import { DrawerPanel } from './drawer/drawer-panel';
import { DrawerComponent } from './drawer/drawer.component';
import { DrawerDirective } from './drawer/drawer.directive';

@Component({
  selector: 'app-drawer-example',
  imports: [
    DrawerComponent,
    DrawerDirective
  ],
  template: `...`
})
export class DrawerExampleComponent {}

Install

bash

npx ply-ui-cli add drawer

Top Drawer

Click button below to show the Top Drawer example

HTML

<button ply-button color="primary" [ply-drawer]="drawerTop">
  Open Top Drawer
</button>

<ply-drawer #drawerTop position="top" size="sm" [close]="true">
  <!-- drawer content -->
</ply-drawer>

TypeScript

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

// Install: npx ply-ui-cli add drawer
// Paths are relative to aliases.components (default: src/app/components)
import { DrawerPanel } from './drawer/drawer-panel';
import { DrawerComponent } from './drawer/drawer.component';
import { DrawerDirective } from './drawer/drawer.directive';

@Component({
  selector: 'app-drawer-example',
  imports: [
    DrawerComponent,
    DrawerDirective
  ],
  template: `...`
})
export class DrawerExampleComponent {}

Install

bash

npx ply-ui-cli add drawer

Bottom Drawer

Click button below to show the Bottom Drawer example

HTML

<button ply-button color="primary" [ply-drawer]="drawerBottom">
  Open Bottom Drawer
</button>

<ply-drawer #drawerBottom position="bottom" [close]="false">
  <!-- drawer content -->
</ply-drawer>

TypeScript

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

// Install: npx ply-ui-cli add drawer
// Paths are relative to aliases.components (default: src/app/components)
import { DrawerPanel } from './drawer/drawer-panel';
import { DrawerComponent } from './drawer/drawer.component';
import { DrawerDirective } from './drawer/drawer.directive';

@Component({
  selector: 'app-drawer-example',
  imports: [
    DrawerComponent,
    DrawerDirective
  ],
  template: `...`
})
export class DrawerExampleComponent {}

Install

bash

npx ply-ui-cli add drawer

Drawer Size

Use size="" to define the Drawer size. Supported sizes are "sm", "md", "lg" and "xl". If size is not defined it will take automatic width of the content inside

HTML

<button ply-button color="primary" [ply-drawer]="drawerSm">Open Small Drawer</button>
<button ply-button color="primary" [ply-drawer]="drawerMd">Open Medium Drawer</button>
<button ply-button color="primary" [ply-drawer]="drawerLg">Open Large Drawer</button>
<button ply-button color="primary" [ply-drawer]="drawerXl">Open XLarge Drawer</button>

<ply-drawer #drawerSm position="left" size="sm" [close]="true"></ply-drawer>
<ply-drawer #drawerMd position="left" size="md" [close]="true"></ply-drawer>
<ply-drawer #drawerLg position="left" size="lg" [close]="true"></ply-drawer>
<ply-drawer #drawerXl position="left" size="xl" [close]="true"></ply-drawer>

TypeScript

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

// Install: npx ply-ui-cli add drawer
// Paths are relative to aliases.components (default: src/app/components)
import { DrawerPanel } from './drawer/drawer-panel';
import { DrawerComponent } from './drawer/drawer.component';
import { DrawerDirective } from './drawer/drawer.directive';

@Component({
  selector: 'app-drawer-example',
  imports: [
    DrawerComponent,
    DrawerDirective
  ],
  template: `...`
})
export class DrawerExampleComponent {}

Install

bash

npx ply-ui-cli add drawer

Installation

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

bash

npx ply-ui-cli add drawer

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 drawer
// Paths are relative to aliases.components (default: src/app/components)
import { DrawerPanel } from './drawer/drawer-panel';
import { DrawerComponent } from './drawer/drawer.component';
import { DrawerDirective } from './drawer/drawer.directive';

@Component({
  selector: 'app-your-component',
  imports: [
    DrawerComponent,
    DrawerDirective
  ],
  template: `...`
})
export class YourComponent {}

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

API reference for drawer
API	Member	Type	Default	Description
`DrawerPanel`	`templateRef`	`Signal<TemplateRef<T>>`	—	—
`DrawerPanel`	`closed`	`OutputEmitterRef<void>`	—	—
`ply-drawer`	`size`	`DrawerSize`	`'md'`	The size of the drawer. Defaults to 'md'.
`ply-drawer`	`position`	`DrawerPosition`	`'right'`	The edge of the screen to slide in from. Defaults to 'right'.
`ply-drawer`	`close`	`boolean`	`false`	Triggers the closing animation when set to true.
`ply-drawer`	`drawerLabel`	`unknown`	`'Drawer'`	Accessible name for the drawer dialog.
`ply-drawer`	`(closed)`	`void`	—	Event emitted when the drawer has fully closed.
`[ply-drawer]`	`placement`	`unknown`	`'right'`	The edge of the screen to slide the drawer in from.
`[ply-drawer]`	`ply-drawer`	`DrawerPanel<T>`	`(required)`	The reference to the `ply-drawer` component to open.

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).