Legacy (shadcn-uikit)Components
Sheet
A panel that slides in from the edge of the screen, used for secondary content or forms.
Usage
import {
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetTitle,
SheetDescription,
SheetFooter,
SheetClose,
} from '@acronis-platform/shadcn-uikit';<Sheet>
<SheetTrigger>Open</SheetTrigger>
<SheetContent>
<SheetHeader>
<SheetTitle>Edit profile</SheetTitle>
<SheetDescription>Make changes to your profile here.</SheetDescription>
</SheetHeader>
{/* Form content */}
<SheetFooter>
<SheetClose>Cancel</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>Overview
The Sheet is a dialog variant that slides in from any screen edge. It is built on Base UI's Dialog primitive with animated slide-in/slide-out transitions. The side prop controls which edge the sheet appears from.
API Reference
SheetContent
| Prop | Type | Default | Description |
|---|---|---|---|
side | "top" | "bottom" | "left" | "right" | "right" | The edge the sheet slides in from. |
portal | boolean | true | Whether to render in a portal. |
className | string | — | Additional CSS class names. |
Compound components
| Component | Description |
|---|---|
Sheet | Root component (Base UI Dialog.Root). Controls open/close state. |
SheetTrigger | Button that opens the sheet (Dialog.Trigger). |
SheetContent | The sliding panel. Accepts side and portal props. |
SheetHeader | Container for title and description at the top. |
SheetTitle | Heading within the sheet (Dialog.Title). |
SheetDescription | Description text (Dialog.Description). |
SheetFooter | Container for actions at the bottom. |
SheetClose | Button that closes the sheet (Dialog.Close). |
SheetOverlay | Backdrop overlay behind the sheet. |