overlay

Sheet

A panel that slides in from the edge of the screen. Useful for navigation, filters, or forms.

Preview

A preview of the Sheet component with interactive controls.

Preview Code

Interactive

Installation

Add the Sheet component to your project.

Bash

ng g @ng-cn/core:c sheet

Usage

Import and use the Sheet component in your Angular application.

Template TypeScript

template.html

<Sheet>
  <SheetTrigger>
    <Button variant="outline">Open</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Edit profile</SheetTitle>
      <SheetDescription>
        Make changes to your profile here. Click save when you're done.
      </SheetDescription>
    </SheetHeader>
    <div class="grid gap-4 py-4">
      <div class="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="name" class="text-right">Name</Label>
        <Input id="name" value="Pedro Duarte" class="col-span-3" />
      </div>
      <div class="grid grid-cols-4 items-center gap-4">
        <Label htmlFor="username" class="text-right">Username</Label>
        <Input id="username" value="@peduarte" class="col-span-3" />
      </div>
    </div>
    <SheetFooter>
      <SheetClose>
        <Button type="submit">Save changes</Button>
      </SheetClose>
    </SheetFooter>
  </SheetContent>
</Sheet>

Examples

Explore different variations and use cases for the Sheet component.

Basic (Right Side)

Default sheet sliding in from the right.

Preview Code

Interactive

Left Side

Sheet sliding in from the left, commonly used for navigation.

Preview Code

Interactive

Top Side

Sheet sliding down from the top.

Preview Code

Interactive

Bottom Side

Sheet sliding up from the bottom, ideal for mobile interfaces.

Preview Code

Interactive

Controlled State

Control the sheet open state with signals.

Preview Code

Interactive

With Form

Sheet containing a complete form.

Preview Code

Interactive

Animation States

Sheet uses directional slide animations based on the side prop.

Preview Code

Interactive

API Reference

Sheet

Prop	Type	Default	Description
`open`	`boolean`	—	Controlled open state.
`defaultOpen`	`boolean`	`false`	Default open state.

SheetContent

Prop	Type	Default	Description
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'right'`	The side the sheet slides in from.
`class`	`string`	—	Additional CSS classes.
`showClose`	`boolean`	`true`	Show the close button.