Sheet
The Sheet component is used to display content in a panel that slides in from the side of the screen. It is useful for presenting forms, menus, or additional details without navigating away from the current page.

Usage
import {
Sheet,
SheetBody,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetTitle,
SheetTrigger
} from "@aqqo/aqqo-ui";
<Sheet>
<SheetTrigger asChild>
<Button variant="secondary">Open Sheet</Button>
</SheetTrigger>
<SheetContent>
<SheetBody>
<SheetTitle>Sheet Title</SheetTitle>
<SheetDescription>Additional details or instructions.</SheetDescription>
{}
</SheetBody>
<SheetFooter>
<SheetClose asChild>
<Button variant="secondary">Close</Button>
</SheetClose>
<Button variant="primary">Save</Button>
</SheetFooter>
</SheetContent>
</Sheet>
Examples
Slide in from Left
You can control from which side the Sheet slides in by using the side prop on Sheet.Content.
<Sheet>
<SheetTrigger asChild>
<Button variant="secondary">Open Sheet</Button>
</SheetTrigger>
<SheetContent side="left">
{}
</SheetContent>
</Sheet>
Props
Sheet
The Sheet component is the root component and extends the functionality of Radix UI's Dialog.
Sheet propsProp | Type | Values | Description |
---|
children | any | - | Content of the Sheet, including triggers and content. |
...props | any | - | Additional props are passed to the root element. |
SheetContent
SheetContent propsProp | Type | Values | Description |
---|
Side | string | "left" | "right" (default: "right") | Determines which side the Sheet slides in from. |
children | any | - | Content inside the Sheet panel. |
className | string | - | Additional CSS classes for custom styling. |
...props | any | - | Additional props are passed to the content element. |
SheetTrigger
SheetTrigger propsProp | Type | Values | Description |
---|
asChild | boolean | true | false (default: false) | If true, the first child is used as the trigger. Useful for custom triggers. |
children | any | - | The trigger element(s). |
...props | any | - | Additional props are passed to the trigger element. |
SheetTitle
SheetTitle propsProp | Type | Values | Description |
---|
children | any | - | The title text or elements. |
className | string | - | Additional CSS classes for custom styling. |
...props | any | - | Additional props are passed to the title element. |
SheetDescription
SheetDescription propsProp | Type | Values | Description |
---|
children | any | - | The main content of the Sheet. |
className | string | - | Additional CSS classes for custom styling. |
...props | any | - | Additional props are passed to the body element. |
SheetFooter propsProp | Type | Values | Description |
---|
children | any | - | Content of the footer, usually buttons. |
className | string | - | Additional CSS classes for custom styling. |
...props | any | - | Additional props are passed to the footer element. |
SheetClose
SheetClose propsProp | Type | Values | Description |
---|
asChild | boolean | true | false (default: false) | If true, the first child is used as the close trigger. Useful for custom triggers. |
children | any | - | The close trigger element(s). |
...props | any | - | Additional props are passed to the close element. |