Logo

AueraUI

Docs

Components

Components

Drawer

An organized slide-out panel for displaying overlay content

Logo

Type

The Drawer is available in two types, use the type prop to change

Position

Use the position prop to change the drawer position

Using DrawerTrigger

You can use the DrawerTrigger on componenet which do not support the trigger

Note: Ensure that the `value` used in the `<Drawer />` component matches the one used in `openDrawer` or `DrawerTrigger`.

Reference

Below you'll find source code for the above overlays and it content

Demo Drawer

components/overlays/drawer-demo.tsx

Float Drawer

components/overlays/float-drawer.tsx

Left Drawer

components/overlays/left-drawer.tsx

Drawer_Content

A list of notifications grouped by timestamp using GroupMap

components/examples/DrawerContent.tsx

Drawer

preventClose

Type:

boolean

Prevents the drawer component from closing when clicked outside

Default:

false
intensity

Type:

"none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"

Controls the intensity of the drop component backdrop.

Default:

sm
mode

Type:

"light" | "dark"

Sets the theme mode for the backdrop component.

Default:

system
value*

Type:

string

Provides the drawer's value, typically used for managing the active state.

Default:

className

Type:

string

Custom class for the Drawer

Default:

zIndex

Type:

"80" | "100" | "150" | "200" | "250" | "300" | "350" | "400" | "450" | "500" | "550" | "600" | "650" | "700" | "750" | "800" | "850" | "900" | "950" | "1000"

Controls visibility order

Default:

500
preventScroll

Type:

boolean

Determines if background scrolling is disabled when the drawer is open.

Default:

false

DrawerPanel

position

Type:

"left" | "right"

The drawer position

Default:

right
type

Type:

"float" | "sticky"

Drawer variant type

Default:

sticky
mode

Type:

"light" | "dark"

A shared theme mode across other drawer component ('Header','Footer')

Default:

system

DrawerHeader

showBorder

Type:

boolean

Adds border-bottom to the component.

Default:

true

DrawerContent

centerContent

Type:

boolean

Centers all it content

Default:

false
position

Type:

"left" | "right"

The drawer position

Default:

right
type

Type:

"float" | "sticky"

Drawer variant type

Default:

sticky
mode

Type:

"light" | "dark"

A shared theme mode across other drawer component ('Header','Footer')

Default:

system