@vladyoslav/drawer

Draggable drawer component for React.

Read the Docs

Basic `Drawer`

This is a minimal example of using the Drawer! Easy enough, right?

import {Drawer} from '@vladyoslav/drawer'
 
<Drawer.Root>
  <Drawer.Trigger>Open Drawer</Drawer.Trigger>
  <Drawer.Portal>
    <Drawer.Overlay />
    <Drawer.Content>
      ...
    </Drawer.Content>
  </Drawer.Portal>
</Drawer.Root>

With scaled background

To enable background scaling, add the shouldScaleBackground prop to the Drawer.Root and vladyoslav-drawer-wrapper="" attribute to the root element!

import {Drawer} from '@vladyoslav/drawer'
 
<main vladyoslav-drawer-wrapper="">
  <Drawer.Root shouldScaleBackground>
    ...
  </Drawer.Root>
</main>

With scrollable content

It's pretty easy to make the content in the Drawer scrollable, just add the overflow css rule to the container! Try it on mobile!

import {Drawer} from '@vladyoslav/drawer'
 
// Example with Tailwind CSS
<Drawer.Root>
  <Drawer.Content>
    <div className="overflow-y-auto">
      ...
    </div>
  </Drawer.Content>
</Drawer.Root>

With snap points

You can add multiple points to which the Drawer should snap using the snapPoints prop. It even supports inertia!

import {Drawer} from '@vladyoslav/drawer'
 
<Drawer.Root snapPoints={[100, '50%', '100%']}>
  ...
</Drawer.Root>

Non-blocking

Using modal prop you can even create a Drawer that doesn't block interaction with background elements!

import {Drawer} from '@vladyoslav/drawer'
 
<Drawer.Root dismissible={false}>
  ...
</Drawer.Root>

Non-dismissible

Or a Drawer that cannot be closed simply by clicking on the background or swiping down using dismissible prop!

import {Drawer} from '@vladyoslav/drawer'
 
<Drawer.Root dismissible={false}>
  ...
</Drawer.Root>

And that's not all the features! Check out the docs for more info!