Bottom Sheet

Ply bottom-sheet is a mobile panel that slides up from the bottom with swipe-to-dismiss, focus trap, and Escape. Bind [(open)]. It is not a side drawer. CLI sheet and side-sheet install drawer, not this sheet.

When to use

Share, confirm, or pick-from-a-list actions on small screens.
When the user should drag the handle down to dismiss.

When not to use

A panel from the left or right — use drawer (CLI alias sheet).
A blocking modal with a typed result — use dialog.

Install with npx ply-ui-cli add bottom-sheet.

free

View source

Basic Usage

Bind [(open)] to a boolean and toggle it from a trigger button. Defaults to height="auto", which fits content up to 85vh.

HTML

<button (click)="isOpen = true">Open</button>

<ply-bottom-sheet [(open)]="isOpen">
  <h3>Basic Sheet</h3>
  <p>Drag down, tap the backdrop, or press Escape to dismiss.</p>
</ply-bottom-sheet>

TypeScript

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

// Install: npx ply-ui-cli add bottom-sheet
// Paths are relative to aliases.components (default: src/app/components)
import { BottomSheetComponent } from './bottom-sheet/bottom-sheet.component';

@Component({
  selector: 'app-bottom-sheet-example',
  imports: [
    BottomSheetComponent
  ],
  template: `...`
})
export class BottomSheetExampleComponent {}

Install

bash

npx ply-ui-cli add bottom-sheet

Height Variants

Use the height input: auto (default, fits content), half (50vh), full (94vh), or any custom CSS height string (e.g. "420px").

HTML

<ply-bottom-sheet [(open)]="isOpen" height="half">...</ply-bottom-sheet>
<ply-bottom-sheet [(open)]="isOpen" height="full">...</ply-bottom-sheet>
<ply-bottom-sheet [(open)]="isOpen" height="420px">...</ply-bottom-sheet>

TypeScript

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

// Install: npx ply-ui-cli add bottom-sheet
// Paths are relative to aliases.components (default: src/app/components)
import { BottomSheetComponent } from './bottom-sheet/bottom-sheet.component';

@Component({
  selector: 'app-bottom-sheet-example',
  imports: [
    BottomSheetComponent
  ],
  template: `...`
})
export class BottomSheetExampleComponent {}

Install

bash

npx ply-ui-cli add bottom-sheet

Close Button & Events

Set [showClose]="true" to add an X button. Listen to (closed) to react whenever the sheet closes, regardless of how it was dismissed.

HTML

<ply-bottom-sheet [(open)]="isOpen" [showClose]="true" (closed)="onClosed()">
  ...
</ply-bottom-sheet>

TypeScript

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

// Install: npx ply-ui-cli add bottom-sheet
// Paths are relative to aliases.components (default: src/app/components)
import { BottomSheetComponent } from './bottom-sheet/bottom-sheet.component';

@Component({
  selector: 'app-bottom-sheet-example',
  imports: [
    BottomSheetComponent
  ],
  template: `...`
})
export class BottomSheetExampleComponent {}

Install

bash

npx ply-ui-cli add bottom-sheet

Non-dismissible

Set [dismissible]="false" to disable backdrop click, swipe-down, and Escape — useful for required-action flows. You must close it programmatically.

With dismissible="false", the drag handle no longer responds to drag gestures and the backdrop click is ignored. Pair this with an in-content action button so users always have a way to close it.

TypeScript

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

// Install: npx ply-ui-cli add bottom-sheet
// Paths are relative to aliases.components (default: src/app/components)
import { BottomSheetComponent } from './bottom-sheet/bottom-sheet.component';

@Component({
  selector: 'app-bottom-sheet-example',
  imports: [
    BottomSheetComponent
  ],
  template: `...`
})
export class BottomSheetExampleComponent {}

Install

bash

npx ply-ui-cli add bottom-sheet

Installation

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

bash

npx ply-ui-cli add bottom-sheet

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 bottom-sheet
// Paths are relative to aliases.components (default: src/app/components)
import { BottomSheetComponent } from './bottom-sheet/bottom-sheet.component';

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

API for bottom-sheet — generated from JSDoc in the library source.

API reference for bottom-sheet
API	Member	Type	Default	Description
`ply-bottom-sheet`	`class`	`string`	`''`	Additional host CSS classes (merged via cn()).
`ply-bottom-sheet`	`open`	`boolean`	`false`	Two-way bindable open state.
`ply-bottom-sheet`	`height`	`BottomSheetHeight`	`'auto'`	Sheet height. Defaults to 'auto'.
`ply-bottom-sheet`	`showHandle`	`boolean`	`true`	Shows the drag handle bar at the top. Defaults to true.
`ply-bottom-sheet`	`showClose`	`boolean`	`false`	Shows a close (X) button in the top-right corner. Defaults to false.
`ply-bottom-sheet`	`sheetLabel`	`unknown`	`'Bottom sheet'`	Accessible name for the bottom sheet dialog.
`ply-bottom-sheet`	`dismissible`	`boolean`	`true`	Whether the backdrop click, swipe-down gesture, or Escape key can dismiss the sheet. Defaults to true.
`ply-bottom-sheet`	`(closed)`	`void`	—	Emitted when the sheet closes, regardless of how it was triggered.

Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 218 components and blocks (128 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).