Bottom Sheet

A mobile-style panel that slides up from the bottom of the screen. Supports swipe-down-to-dismiss via the drag handle, a configurable height, focus trapping, and closes on backdrop click or Escape. Bind [(open)] for two-way state and project any content as children.

free

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

Height Variants

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

HTML

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

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.

Installation

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

bash

npx base-ui-cli add bottom-sheet

API Reference

For AI agents

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

bash

npx -y base-ui-mcp

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

typescript (Example)

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