'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' | 'zinc' | 'neutral' | 'stone' | 'red' | 'orange' | 'amber' | 'yellow' | 'lime' | 'green' | 'emerald' | 'teal' | 'cyan' | 'sky' | 'blue' | 'indigo' | 'violet' | 'purple' | 'fuchsia' | 'pink' | 'rose' | 'presence' | 'status' | 'sidebar' | 'sidebar.accent' | 'accent' | 'slate'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 |
attached | 'true' | 'false'The attached of the component | |
as | React.ElementTypeThe underlying element to render. | |
asChild | booleanUse the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide. | |
unstyled | booleanWhether to remove the component's style. |