Skip to main content
⚠️ AppKit is in an early development phase and is subject to change without notice. DO NOT use in production environments.

# Sheet

Sliding panel that overlays content from screen edges

## Example​

    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​

Sliding panel that overlays content from screen edges

Source: `packages/appkit-ui/src/react/ui/sheet.tsx`

### Props​

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

### Usage​

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

    <Sheet /* props */ />

## SheetClose​

Button that closes the sheet

Source: `packages/appkit-ui/src/react/ui/sheet.tsx`

### Props​

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

### Usage​

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

    <SheetClose /* props */ />

## SheetContent​

Main content area of the sheet

Source: `packages/appkit-ui/src/react/ui/sheet.tsx`

### 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​

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

    <SheetContent /* props */ />

## SheetDescription​

Description text for the sheet

Source: `packages/appkit-ui/src/react/ui/sheet.tsx`

### Props​

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

### Usage​

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

    <SheetDescription /* props */ />

## SheetFooter​

Footer section of the sheet

Source: `packages/appkit-ui/src/react/ui/sheet.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SheetFooter /* props */ />

## SheetHeader​

Header section of the sheet

Source: `packages/appkit-ui/src/react/ui/sheet.tsx`

### Props​

This component extends standard HTML element attributes.

### Usage​

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

    <SheetHeader /* props */ />

## SheetTitle​

Title text for the sheet

Source: `packages/appkit-ui/src/react/ui/sheet.tsx`

### Props​

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

### Usage​

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

    <SheetTitle /* props */ />

## SheetTrigger​

Button that opens the sheet

Source: `packages/appkit-ui/src/react/ui/sheet.tsx`

### Props​

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

### Usage​

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

    <SheetTrigger /* props */ />