Sheet
The Sheet
component overlays a modal on the top, left, bottom, or right of the viewport.
Preview
Usage
Props
Prop | Description | Required | Value |
---|---|---|---|
children | child component(s) | required | component(s) |
className | custom style | optional | SCSS or Tailwind |
side | side where the sheet appears | optional | string (left/right/top/bottom), default: right |
title | sheet title | optional | string |
trigger | trigger component | required |
Notes
The
Sheet
component usesSheetPrimitive
from@radix-ui/react-dialog
for the sheet functionality.The
side
prop specifies the side of the viewport where the sheet will appear and defaults to 'right'.The
className
prop allows for custom styling to be applied.The
trigger
prop specifies the component that triggers the opening of the sheet.The
title
anddescription
props provide additional context for the sheet.The
children
prop allows for rendering nested components within the sheet.For more details, refer to the Shadcn Sheet documentation.
Last updated