## Overview [#overview]
The **Sheet** component presents content in a panel that slides from any edge of the viewport. It's ideal for lightweight flows such as settings, filters, or multi-step forms. Built on Base UI Dialog primitives with Framer Motion for smooth, customizable animations.
## Usage [#usage]
```tsx
import {
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetBody,
SheetFooter,
SheetTitle,
SheetDescription,
SheetClose,
} from "@tilt-legal/cubitt-components/primitives";
```
```tsx
}>Open Sheet
Sheet TitleSheet description goes here.
```
Using Cubitt's URL-state hooks, you can sync the sheet state with the URL by providing a `paramName`:
```tsx
// Opens when ?settings=true in URL
}>Open Settings
Settings
Configure your preferences.
// Advanced options:
console.log('Sheet open:', value)}
>
{/* ... */}
```
## Examples [#examples]
### Basic [#basic]
### With Actions [#with-actions]
### With Form [#with-form]
### Different Sides [#different-sides]
Sheets can slide in from any edge of the viewport.
```tsx
// Left side
}>Left
Left SideThis sheet slides in from the left.
// Right side (default)
}>Right
Right SideThis sheet slides in from the right.
// Top side
}>Top
Top SideThis sheet slides in from the top.
// Bottom side
}>Bottom
Bottom SideThis sheet slides in from the bottom.
```
### Floating Sheet [#floating-sheet]
### Scrollable Content [#scrollable-content]
Sheet with long content that scrolls. The header and footer remain sticky with a blurred background effect.
```tsx
}>
Terms & Conditions
Terms and Conditions
Please read and accept our terms and conditions.
{/* Long content... */}
}>Decline
```
### Without Close Button [#without-close-button]
### URL State [#url-state]
Sheet with URL state synchronization for shareable sheet states.
```tsx
import {
Button,
Sheet,
SheetTrigger,
SheetContent,
SheetHeader,
SheetBody,
SheetTitle,
SheetDescription,
SheetFooter,
SheetClose,
} from "@tilt-legal/cubitt-components/primitives";
// Sheet state synced with ?settings=true
}>
Open with URL state
Settings
This sheet's state is synced with the URL. Check the URL parameter when
you open it!
}>Cancel
;
```
***
## API Reference [#api-reference]
### Sheet [#sheet]
Root component that manages sheet state.
| Prop | Type | Default | Description |
| -------------- | ------------------------- | ------- | ------------------------------------------- |
| `open` | `boolean` | - | Controlled open state of the sheet. |
| `defaultOpen` | `boolean` | `false` | Default open state for uncontrolled usage. |
| `onOpenChange` | `(open: boolean) => void` | - | Callback fired when the open state changes. |
| `modal` | `boolean` | `true` | Whether the sheet is modal (locks scroll). |
#### URL State Props [#url-state-props]
The following props enable URL state management by syncing the sheet open/closed state with URL parameters via TanStack Router search params. When `paramName` is provided, the sheet's state will be reflected in the URL.
| Prop | Type | Default | Description |
| --------------------- | ---------------------------------- | ------- | ------------------------------------------------------------------------------------------- |
| `paramName` | `string` | - | URL parameter name for syncing state with URL. When provided, enables URL state management. |
| `paramMatchValue` | `string` | - | Value that must match for the sheet to open. |
| `onUrlValueChange` | `(value: boolean \| null) => void` | - | Callback when URL parameter value changes. |
| `paramClearOnDefault` | `boolean` | `true` | Remove URL param when value equals default. |
| `paramThrottle` | `number` | - | Throttle URL updates in milliseconds. |
| `paramDebounce` | `number` | - | Debounce URL updates in milliseconds. |
### SheetTrigger [#sheettrigger]
Button that opens the sheet.
| Prop | Type | Default | Description |
| -------- | -------------------- | ------- | --------------------------------- |
| `render` | `React.ReactElement` | - | Custom trigger element to render. |
### SheetContent [#sheetcontent]
Container for the sheet content with backdrop and animations.
| Prop | Type | Default | Description |
| ----------------- | ---------------------------------------- | --------- | ------------------------------------------------------------------- |
| `side` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'right'` | Which edge the sheet slides from. |
| `float` | `boolean` | `false` | Renders content as a floating card with rounded corners and border. |
| `showCloseButton` | `boolean` | `true` | Show a built-in close button in the corner. |
| `className` | `string` | - | Additional CSS classes for the sheet popup. |
### SheetHeader / SheetFooter [#sheetheader--sheetfooter]
Container components for sheet header and footer with sticky positioning.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | -------------------------------------- |
| `className` | `string` | - | Additional CSS classes for the header. |
### SheetBody [#sheetbody]
Container for the main content area with consistent padding.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ------------------------------------ |
| `className` | `string` | - | Additional CSS classes for the body. |
### SheetTitle [#sheettitle]
The accessible title of the sheet.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ------------------------------------- |
| `className` | `string` | - | Additional CSS classes for the title. |
### SheetDescription [#sheetdescription]
Description text that provides context about the sheet.
| Prop | Type | Default | Description |
| ----------- | -------- | ------- | ------------------------------------------- |
| `className` | `string` | - | Additional CSS classes for the description. |
### SheetClose [#sheetclose]
Button that closes the sheet.
| Prop | Type | Default | Description |
| ----------- | -------------------- | ------- | -------------------------------------------- |
| `render` | `React.ReactElement` | - | Custom close button element to render. |
| `className` | `string` | - | Additional CSS classes for the close button. |