Drawer

A side panel that slides in from any edge. Built on Radix Dialog.

Import

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
  DrawerBody,
  DrawerFooter,
} from '@aspect/react';

Usage

<Drawer>
  <DrawerTrigger asChild>
    <Button>Open drawer</Button>
  </DrawerTrigger>
  <DrawerContent side="right">
    <DrawerHeader>
      <DrawerTitle>Settings</DrawerTitle>
    </DrawerHeader>
    <DrawerBody>Content here</DrawerBody>
  </DrawerContent>
</Drawer>

Side

<DrawerContent side="left">...</DrawerContent>
<DrawerContent side="right">...</DrawerContent>
<DrawerContent side="top">...</DrawerContent>
<DrawerContent side="bottom">...</DrawerContent>

Props (DrawerContent)

| Prop | Type | Default | Description | | ------ | ---------------------------------------- | --------- | --------------- | | side | 'left' \| 'right' \| 'top' \| 'bottom' | 'right' | Slide direction |