# Sheet

Sliding panel that overlays content from screen edges

## Example[​](#example "Direct link to Example")

<!-- -->

```tsx
import {
  Button,
  Input,
  Label,
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@databricks/appkit-ui/react"

export default function SheetExample() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Edit profile</SheetTitle>
          <SheetDescription>
            Make changes to your profile here. Click save when you're done.
          </SheetDescription>
        </SheetHeader>
        <div className="grid gap-4 py-4 px-4">
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="name" className="text-right">
              Name
            </Label>
            <Input id="name" value="Foo Bar" className="col-span-3" />
          </div>
          <div className="grid grid-cols-4 items-center gap-4">
            <Label htmlFor="username" className="text-right">
              Username
            </Label>
            <Input id="username" value="foobar" className="col-span-3" />
          </div>
        </div>
        <SheetFooter>
          <SheetClose asChild>
            <Button type="submit">Save changes</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  )
}

```

## Sheet[​](#sheet-1 "Direct link to Sheet")

Sliding panel that overlays content from screen edges

**Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx)

### Props[​](#props "Direct link to Props")

| Prop           | Type                        | Required | Default | Description |
| -------------- | --------------------------- | -------- | ------- | ----------- |
| `open`         | `boolean`                   |          | -       | -           |
| `defaultOpen`  | `boolean`                   |          | -       | -           |
| `onOpenChange` | `((open: boolean) => void)` |          | -       | -           |
| `modal`        | `boolean`                   |          | -       | -           |

### Usage[​](#usage "Direct link to Usage")

```tsx
import { Sheet } from '@databricks/appkit-ui';

<Sheet /* props */ />

```

## SheetClose[​](#sheetclose "Direct link to SheetClose")

Button that closes the sheet

**Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx)

### Props[​](#props-1 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-1 "Direct link to Usage")

```tsx
import { SheetClose } from '@databricks/appkit-ui';

<SheetClose /* props */ />

```

## SheetContent[​](#sheetcontent "Direct link to SheetContent")

Main content area of the sheet

**Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx)

### Props[​](#props-2 "Direct link to Props")

| Prop                   | Type                                                              | Required | Default | Description                                                                                                                                                                               |
| ---------------------- | ----------------------------------------------------------------- | -------- | ------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `forceMount`           | `true`                                                            |          | -       | Used to force mounting when more control is needed. Useful when controlling animation with React animation libraries.                                                                     |
| `asChild`              | `boolean`                                                         |          | -       | -                                                                                                                                                                                         |
| `onEscapeKeyDown`      | `((event: KeyboardEvent) => void)`                                |          | -       | Event handler called when the escape key is down. Can be prevented.                                                                                                                       |
| `onPointerDownOutside` | `((event: PointerDownOutsideEvent) => void)`                      |          | -       | Event handler called when the a `pointerdown` event happens outside of the `DismissableLayer`. Can be prevented.                                                                          |
| `onFocusOutside`       | `((event: FocusOutsideEvent) => void)`                            |          | -       | Event handler called when the focus moves outside of the `DismissableLayer`. Can be prevented.                                                                                            |
| `onInteractOutside`    | `((event: FocusOutsideEvent \| PointerDownOutsideEvent) => void)` |          | -       | Event handler called when an interaction happens outside the `DismissableLayer`. Specifically, when a `pointerdown` event happens outside or focus moves outside of it. Can be prevented. |
| `onOpenAutoFocus`      | `((event: Event) => void)`                                        |          | -       | Event handler called when auto-focusing on open. Can be prevented.                                                                                                                        |
| `onCloseAutoFocus`     | `((event: Event) => void)`                                        |          | -       | Event handler called when auto-focusing on close. Can be prevented.                                                                                                                       |
| `side`                 | `enum`                                                            |          | `right` | -                                                                                                                                                                                         |

### Usage[​](#usage-2 "Direct link to Usage")

```tsx
import { SheetContent } from '@databricks/appkit-ui';

<SheetContent /* props */ />

```

## SheetDescription[​](#sheetdescription "Direct link to SheetDescription")

Description text for the sheet

**Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx)

### Props[​](#props-3 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-3 "Direct link to Usage")

```tsx
import { SheetDescription } from '@databricks/appkit-ui';

<SheetDescription /* props */ />

```

## SheetFooter[​](#sheetfooter "Direct link to SheetFooter")

Footer section of the sheet

**Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx)

### Props[​](#props-4 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-4 "Direct link to Usage")

```tsx
import { SheetFooter } from '@databricks/appkit-ui';

<SheetFooter /* props */ />

```

## SheetHeader[​](#sheetheader "Direct link to SheetHeader")

Header section of the sheet

**Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx)

### Props[​](#props-5 "Direct link to Props")

This component extends standard HTML element attributes.

### Usage[​](#usage-5 "Direct link to Usage")

```tsx
import { SheetHeader } from '@databricks/appkit-ui';

<SheetHeader /* props */ />

```

## SheetTitle[​](#sheettitle "Direct link to SheetTitle")

Title text for the sheet

**Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx)

### Props[​](#props-6 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-6 "Direct link to Usage")

```tsx
import { SheetTitle } from '@databricks/appkit-ui';

<SheetTitle /* props */ />

```

## SheetTrigger[​](#sheettrigger "Direct link to SheetTrigger")

Button that opens the sheet

**Source:** [`packages/appkit-ui/src/react/ui/sheet.tsx`](https://github.com/databricks/appkit/blob/main/packages/appkit-ui/src/react/ui/sheet.tsx)

### Props[​](#props-7 "Direct link to Props")

| Prop      | Type      | Required | Default | Description |
| --------- | --------- | -------- | ------- | ----------- |
| `asChild` | `boolean` |          | -       | -           |

### Usage[​](#usage-7 "Direct link to Usage")

```tsx
import { SheetTrigger } from '@databricks/appkit-ui';

<SheetTrigger /* props */ />

```