Drawer

Used to render a content that slides in from the side of the screen.

'use client'

import { Button, Drawer } from '@saas-ui/react'

export const DrawerBasic = () => {
  return (
    <Drawer.Root>
      <Drawer.Backdrop />
      <Drawer.Trigger asChild>
        <Button variant="outline" size="sm">
          Open Drawer
        </Button>
      </Drawer.Trigger>
      <Drawer.Content>
        <Drawer.Header>
          <Drawer.Title>Drawer Title</Drawer.Title>
          <Drawer.CloseButton />
        </Drawer.Header>
        <Drawer.Body>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </Drawer.Body>
        <Drawer.Footer>
          <Drawer.ActionTrigger asChild>
            <Button variant="ghost">Cancel</Button>
          </Drawer.ActionTrigger>
          <Button variant="glass" colorPalette="accent">
            Save
          </Button>
        </Drawer.Footer>
        <Drawer.CloseTrigger />
      </Drawer.Content>
    </Drawer.Root>
  )
}

Anatomy

import { Drawer } from '@saas-ui/react/drawer'

<Drawer.Root>
  <Drawer.Backdrop />
  <Drawer.Trigger />
  <Drawer.Content>
    <Drawer.Header>
      <Drawer.Title />
      <Drawer.CloseButton />
    </Drawer.Header>
    <Drawer.Body />
    <Drawer.Footer>
      <Drawer.CloseTrigger asChild>
        <Button>Close</Button>
      </Drawer.CloseTrigger>
    </Drawer.Footer>
  </Drawer.Content>
</Drawer.Root>

Examples

Attached

Use the attached prop to render the drawer to attach to the edge of the viewport.

'use client'

import { useState } from 'react'

import { Button, Drawer } from '@saas-ui/react'

export const DrawerAttached = () => {
  const [open, setOpen] = useState(false)

  return (
    <Drawer.Root open={open} onOpenChange={(e) => setOpen(e.open)} attached>
      <Drawer.Backdrop />
      <Drawer.Trigger asChild>
        <Button variant="outline" size="sm">
          Open Drawer
        </Button>
      </Drawer.Trigger>
      <Drawer.Content>
        <Drawer.Header>
          <Drawer.Title>Drawer Title</Drawer.Title>
          <Drawer.CloseButton />
        </Drawer.Header>
        <Drawer.Body>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </Drawer.Body>
        <Drawer.Footer>
          <Drawer.ActionTrigger asChild>
            <Button variant="ghost">Cancel</Button>
          </Drawer.ActionTrigger>
          <Button variant="glass" colorPalette="accent">
            Save
          </Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer.Root>
  )
}

Sizes

Use the size prop to change the size of the drawer component.

'use client'

import { For, HStack, Kbd } from '@chakra-ui/react'
import { Button, Drawer } from '@saas-ui/react'

export const DrawerWithSizes = () => {
  return (
    <HStack wrap="wrap">
      <For each={['xs', 'sm', 'md', 'lg', 'xl', 'full']}>
        {(size) => (
          <Drawer.Root key={size} size={size}>
            <Drawer.Backdrop />
            <Drawer.Trigger asChild>
              <Button variant="outline" size="sm">
                Open ({size})
              </Button>
            </Drawer.Trigger>
            <Drawer.Content>
              <Drawer.Header>
                <Drawer.Title>Drawer Title</Drawer.Title>
                <Drawer.CloseButton />
              </Drawer.Header>
              <Drawer.Body>
                Press the <Kbd>esc</Kbd> key to close the drawer.
              </Drawer.Body>
              <Drawer.Footer>
                <Drawer.ActionTrigger asChild>
                  <Button variant="ghost">Cancel</Button>
                </Drawer.ActionTrigger>
                <Button variant="glass" colorPalette="accent">
                  Save
                </Button>
              </Drawer.Footer>
            </Drawer.Content>
          </Drawer.Root>
        )}
      </For>
    </HStack>
  )
}

Offset

Pass the offset prop to the DrawerContent to change the offset of the drawer component.

'use client'

import { Button, Drawer } from '@saas-ui/react'

export const DrawerWithOffset = () => {
  return (
    <Drawer.Root>
      <Drawer.Backdrop />
      <Drawer.Trigger asChild>
        <Button variant="outline" size="sm">
          Open Drawer
        </Button>
      </Drawer.Trigger>
      <Drawer.Content offset="4" rounded="md">
        <Drawer.Header>
          <Drawer.Title>Drawer Title</Drawer.Title>
          <Drawer.CloseButton />
        </Drawer.Header>
        <Drawer.Body>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
        </Drawer.Body>
        <Drawer.Footer>
          <Drawer.ActionTrigger asChild>
            <Button variant="ghost">Cancel</Button>
          </Drawer.ActionTrigger>
          <Button variant="glass" colorPalette="accent">
            Save
          </Button>
        </Drawer.Footer>
        <Drawer.CloseTrigger />
      </Drawer.Content>
    </Drawer.Root>
  )
}

Placement

Use the placement prop to change the placement of the drawer component.

'use client'

import { For, HStack } from '@chakra-ui/react'
import { Button, Drawer } from '@saas-ui/react'

export const DrawerWithPlacement = () => {
  return (
    <HStack wrap="wrap">
      <For each={['bottom', 'top', 'start', 'end']}>
        {(placement) => (
          <Drawer.Root key={placement} placement={placement}>
            <Drawer.Backdrop />
            <Drawer.Trigger asChild>
              <Button variant="outline" size="sm">
                Open ({placement})
              </Button>
            </Drawer.Trigger>
            <Drawer.Content
              roundedTop={placement === 'bottom' ? 'l3' : undefined}
              roundedBottom={placement === 'top' ? 'l3' : undefined}
            >
              <Drawer.Header>
                <Drawer.Title>Drawer Title</Drawer.Title>
                <Drawer.CloseButton />
              </Drawer.Header>
              <Drawer.Body>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
                eiusmod tempor incididunt ut labore et dolore magna aliqua.
              </Drawer.Body>
              <Drawer.Footer>
                <Drawer.ActionTrigger asChild>
                  <Button variant="ghost">Cancel</Button>
                </Drawer.ActionTrigger>
                <Button variant="glass" colorPalette="accent">
                  Save
                </Button>
              </Drawer.Footer>
            </Drawer.Content>
          </Drawer.Root>
        )}
      </For>
    </HStack>
  )
}

Initial Focus

Use the initialFocusEl prop to set the initial focus of the drawer component.

'use client'

import { useRef } from 'react'

import { Input, Stack } from '@chakra-ui/react'
import { Button, Drawer } from '@saas-ui/react'

export const DrawerWithInitialFocus = () => {
  const ref = useRef<HTMLInputElement>(null)
  return (
    <Drawer.Root initialFocusEl={() => ref.current}>
      <Drawer.Backdrop />
      <Drawer.Trigger asChild>
        <Button variant="outline" size="sm">
          Open Drawer
        </Button>
      </Drawer.Trigger>
      <Drawer.Content>
        <Drawer.Header>
          <Drawer.Title>Drawer Title</Drawer.Title>
          <Drawer.CloseButton />
        </Drawer.Header>
        <Drawer.Body>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua.
          </p>
          <Stack mt="5">
            <Input defaultValue="Naruto" placeholder="First name" />
            <Input ref={ref} placeholder="Email" />
          </Stack>
        </Drawer.Body>
        <Drawer.Footer>
          <Drawer.ActionTrigger asChild>
            <Button variant="ghost">Cancel</Button>
          </Drawer.ActionTrigger>
          <Button variant="glass" colorPalette="accent">
            Save
          </Button>
        </Drawer.Footer>
      </Drawer.Content>
    </Drawer.Root>
  )
}

Props

Root

Prop	Default	Type
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink' \| 'accent'` The color palette of the component
`size`	`'xs'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| 'full'` The size of the component
`placement`	`'end'`	`'start' \| 'end' \| 'top' \| 'bottom'` The placement of the component
`contained`		`'true' \| 'false'` The contained of the component
`as`		`React.ElementType` The underlying element to render.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`unstyled`		`boolean` Whether to remove the component's style.

Dialog

Editable

Drawer

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}Anatomy

Anatomy