> For the complete documentation index, see [llms.txt](https://docs.usegravity.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.usegravity.app/gravity-web/components/sheet.md).

# Sheet

The `Sheet` component overlays a modal on the top, left, bottom, or right of the viewport.

### Preview

<div align="left"><figure><img src="/files/kNatNzg7j1UaOEArpbHh" alt="Gravity sheet component" width="370"><figcaption></figcaption></figure></div>

### Usage

```javascript
import { Sheet } from 'components/lib';

function MyComponent({ ...props }) {
  return (
    <div>
      <Sheet 
        trigger={ <button>Open Sheet</button> }
        title="Sheet Title"
        description="This is a description of the sheet."
        side="right">
        
          <div>Sheet content goes here.</div>
        
      </Sheet>
    </div>
  );
}
```

### 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 uses `SheetPrimitive` 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` and `description` 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](https://ui.shadcn.com/docs/components/sheet).