Welcome UI - Drawer

The Drawer component is a versatile UI element that slides in from the edge of the screen to reveal additional content or options without navigating away from the current page. It provides a space-efficient way to present temporary or contextual information, such as menus, settings, or notifications. Drawers enhance user experience by maintaining focus on the main content while offering quick access to supplementary features.

Source Built with Ariakit

Github

import { Button } from 'welcome-ui/Button'
import { Drawer, useDrawer } from 'welcome-ui/Drawer'

const Example = () => {
  const drawer = useDrawer()

  return (
    <>
      <Drawer.Trigger as={Button} store={drawer}>
        Open Drawer
      </Drawer.Trigger>
      <Drawer aria-label="Default drawer" store={drawer}>
        <Drawer.Content>
          Praesent sit amet quam ac velit faucibus dapibus. Quisque sapien ligula, rutrum quis
          aliquam nec, convallis sit amet erat. Mauris auctor blandit porta.
        </Drawer.Content>
      </Drawer>
    </>
  )
}

export default Example

Examples

The most basic drawer needs useDrawer(), <Drawer.Trigger /> and <Drawer />. If you don't want a backdrop to be visible, please provide it a withBackdrop prop set to false. Backdrop allows us to have a smooth scroll across all browsers by wrapping the Drawer. This way, the Drawer can be absolutely positioned in the fixed Backdrop wrapper.

Backdrop

You have to add on <Drawer /> a prop withBackdrop. This adds our backdrop <Drawer.Backdrop /> on the drawer. You can also add a custom wrapper with the property backdrop.

Github

Window

Github

Layout

We provide basic layout components for your drawer: <Drawer.Title />, <Drawer.Content /> and <Drawer.Footer />. They are all optional. By default, you have a close button <Drawer.Close /> that you can remove by setting the withCloseButton property to false. If you're using <Drawer.Close /> along with <Drawer.Title />, please make sure to position <Drawer.Close /> first in your code for styling purposes.

Github

Content Header

You can use <Drawer.Content /> to have a content header with an icon, a title and a subtitle.

Github

Footer

You can use <Drawer.Footer /> to have a footer section in your drawer. You can choose between two variants: right (default) and full.

Github

Placement

By default the placement of the drawer will be on the right but you can set it to top, bottom, or left.

Github

Sizes

By default the size of the drawer will be lg which is set in the theme. We provide 3 different sizes that will adapt according to the position of the Drawer.

Github

Styling

All the elements can be styled as you see fit, by passing Tailwind classes to the various components.

Github

AssetDrawer

For our cases we need to show a Drawer from bottom, with full size and with rounded border. It's a new sub component to the modal: AssetDrawer

Github

useDrawer

We use useDialogStore from Ariakit Dialog for the state of the drawer with the animated flag set to true by default.

Pass options to useDrawer:

defaultOpen: e.g. const drawer = useDrawer({ defaultOpen: true })

And the hook returns (among other things):

useState('open'): whether the drawer is currently open
hide: a function to hide the drawer

Tabs Modal