Drawer

Slide-out panel for supplementary content and actions

Usage

1import { Drawer, Button } from "@lenso/ui";

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-basic (Apache-2.0).4import { Button, Drawer } from "@lenso/ui";5
6export function Basic() {7  return (8    <Drawer.Provider>9      <Drawer swipeDirection="right">10        <Drawer.Trigger render={<Button variant="secondary" />}>Open Drawer</Drawer.Trigger>11        <Drawer.Portal>12          <Drawer.Backdrop />13          <Drawer.Viewport>14            <Drawer.Popup>15              <Drawer.Content>16                <Drawer.Header>17                  <Drawer.Title>Drawer Title</Drawer.Title>18                </Drawer.Header>19                <Drawer.Body>20                  <p>21                    This is a bottom drawer built with React Aria's Modal component. It slides up22                    from the bottom of the screen with a smooth CSS transition.23                  </p>24                </Drawer.Body>25                <Drawer.Footer>26                  <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>27                  <Drawer.Close render={<Button />}>Confirm</Drawer.Close>28                </Drawer.Footer>29              </Drawer.Content>30            </Drawer.Popup>31          </Drawer.Viewport>32        </Drawer.Portal>33      </Drawer>34    </Drawer.Provider>35  );36}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Anatomy

1import { Drawer, Button } from "@lenso/ui";2
3export default () => (4  <Drawer>5    <Button>Open Drawer</Button>6    <Drawer.Backdrop>7      <Drawer.Content>8        <Drawer.Dialog>9          <Drawer.Handle /> {/* Optional: Drag handle */}10          <Drawer.CloseTrigger /> {/* Optional: Close button */}11          <Drawer.Header>12            <Drawer.Heading />13          </Drawer.Header>14          <Drawer.Body />15          <Drawer.Footer />16        </Drawer.Dialog>17      </Drawer.Content>18    </Drawer.Backdrop>19  </Drawer>20);

Examples

Placement

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-placements (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer } from "@lenso/ui";6import { styles } from "./styles";7
8export function Placements() {9  const placements = ["bottom", "top", "left", "right"] as const;10  return (11    <div {...stylex.props(styles.row)}>12      {placements.map((placement) => (13        <Drawer.Provider key={placement}>14          <Drawer15            swipeDirection={16              placement === "bottom" ? "down" : placement === "top" ? "up" : placement17            }18          >19            <Drawer.Trigger render={<Button variant="secondary" />}>20              {placement.charAt(0).toUpperCase() + placement.slice(1)}21            </Drawer.Trigger>22            <Drawer.Portal>23              <Drawer.Backdrop />24              <Drawer.Viewport>25                <Drawer.Popup>26                  <Drawer.Content>27                    <Drawer.Close28                      aria-label="Close drawer"29                      render={30                        <Button31                          isIconOnly32                          size="sm"33                          variant="tertiary"34                          xstyle={styles.cornerClose}35                        />36                      }37                    >38                      <CloseIcon />39                    </Drawer.Close>40                    {placement === "bottom" && <Drawer.Handle />}41                    <Drawer.Header>42                      <Drawer.Title>43                        {placement.charAt(0).toUpperCase() + placement.slice(1)} Drawer44                      </Drawer.Title>45                    </Drawer.Header>46                    <Drawer.Body>47                      <p>48                        This drawer slides in from the <strong>{placement}</strong> edge of the49                        screen.50                      </p>51                    </Drawer.Body>52                    <Drawer.Footer>53                      <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>54                      <Drawer.Close render={<Button />}>Done</Drawer.Close>55                    </Drawer.Footer>56                    {placement === "top" && <Drawer.Handle />}57                  </Drawer.Content>58                </Drawer.Popup>59              </Drawer.Viewport>60            </Drawer.Portal>61          </Drawer>62        </Drawer.Provider>63      ))}64    </div>65  );66}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Non-Dismissable

Set isDismissable={false} on Drawer.Backdrop to prevent closing by clicking outside or dragging. The user must interact with the drawer's action buttons.

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-non-dismissable (Apache-2.0).4import { Button, Drawer } from "@lenso/ui";5
6export function NonDismissable() {7  return (8    <Drawer.Provider>9      <Drawer10        swipeDirection="down"11        onOpenChange={(_open, details) => {12          if (details.reason === "outside-press" || details.reason === "swipe") details.cancel();13        }}14      >15        <Drawer.Trigger render={<Button variant="secondary" />}>Important Action</Drawer.Trigger>16        <Drawer.Portal>17          <Drawer.Backdrop />18          <Drawer.Viewport>19            <Drawer.Popup>20              <Drawer.Content>21                <Drawer.Header>22                  <Drawer.Title>Confirm Action</Drawer.Title>23                </Drawer.Header>24                <Drawer.Body>25                  <p>26                    This drawer cannot be dismissed by clicking outside or dragging. You must use27                    one of the buttons below.28                  </p>29                </Drawer.Body>30                <Drawer.Footer>31                  <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>32                  <Drawer.Close render={<Button />}>Confirm</Drawer.Close>33                </Drawer.Footer>34              </Drawer.Content>35            </Drawer.Popup>36          </Drawer.Viewport>37        </Drawer.Portal>38      </Drawer>39    </Drawer.Provider>40  );41}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Scrollable Content

The Drawer.Body automatically handles overflow with native scrolling. Drag-to-dismiss is excluded from the body area to avoid scroll conflicts.

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-scrollable-content (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer } from "@lenso/ui";6import { styles } from "./styles";7
8export function ScrollableContent() {9  return (10    <Drawer.Provider>11      <Drawer swipeDirection="down">12        <Drawer.Trigger render={<Button variant="secondary" />}>Terms & Conditions</Drawer.Trigger>13        <Drawer.Portal>14          <Drawer.Backdrop />15          <Drawer.Viewport>16            <Drawer.Popup>17              <Drawer.Content>18                <Drawer.Handle />19                <Drawer.Close20                  aria-label="Close drawer"21                  render={22                    <Button isIconOnly size="sm" variant="tertiary" xstyle={styles.cornerClose} />23                  }24                >25                  <CloseIcon />26                </Drawer.Close>27                <Drawer.Header>28                  <Drawer.Title>Terms & Conditions</Drawer.Title>29                </Drawer.Header>30                <Drawer.Body>31                  {Array.from({ length: 20 }, (_, i) => (32                    <p key={i} {...stylex.props(styles.paragraph)}>33                      Paragraph {i + 1}: Lorem ipsum dolor sit amet, consectetur adipiscing elit.34                      Nullam pulvinar risus non risus hendrerit venenatis. Pellentesque sit amet35                      hendrerit risus, sed porttitor quam.36                    </p>37                  ))}38                </Drawer.Body>39                <Drawer.Footer>40                  <Drawer.Close render={<Button variant="secondary" />}>Decline</Drawer.Close>41                  <Drawer.Close render={<Button />}>Accept</Drawer.Close>42                </Drawer.Footer>43              </Drawer.Content>44            </Drawer.Popup>45          </Drawer.Viewport>46        </Drawer.Portal>47      </Drawer>48    </Drawer.Provider>49  );50}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Controlled State

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-controlled (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer, useOverlayState } from "@lenso/ui";6import React from "react";7import { styles } from "./styles";8
9export function Controlled() {10  const [isOpen, setIsOpen] = React.useState(false);11  const state = useOverlayState();12  return (13    <div {...stylex.props(styles.controlled)}>14      <div {...stylex.props(styles.section)}>15        <h3 {...stylex.props(styles.heading)}>With React.useState()</h3>16        <p {...stylex.props(styles.explanation)}>17          Control the drawer using React's <code>useState</code> hook for simple state management.18        </p>19        <Drawer.Provider>20          <Drawer open={isOpen} onOpenChange={setIsOpen} swipeDirection="right">21            <div {...stylex.props(styles.stateCard)}>22              <p {...stylex.props(styles.status)}>23                Status:{" "}24                <span {...stylex.props(styles.statusValue)}>{isOpen ? "open" : "closed"}</span>25              </p>26              <div {...stylex.props(styles.actions)}>27                <Drawer.Trigger render={<Button size="sm" variant="secondary" />}>28                  Open Drawer29                </Drawer.Trigger>30                <Button size="sm" variant="tertiary" onClick={() => setIsOpen(!isOpen)}>31                  Toggle32                </Button>33              </div>34            </div>35            <Drawer.Portal>36              <Drawer.Backdrop />37              <Drawer.Viewport>38                <Drawer.Popup>39                  <Drawer.Content>40                    <Drawer.Close41                      aria-label="Close drawer"42                      render={43                        <Button44                          isIconOnly45                          size="sm"46                          variant="tertiary"47                          xstyle={styles.cornerClose}48                        />49                      }50                    >51                      <CloseIcon />52                    </Drawer.Close>53                    <Drawer.Header>54                      <Drawer.Title>Controlled with useState()</Drawer.Title>55                    </Drawer.Header>56                    <Drawer.Body>57                      <p>58                        This drawer is controlled by React's <code>useState</code> hook. Pass{" "}59                        <code>isOpen</code> and <code>onOpenChange</code> props to manage the drawer60                        state externally.61                      </p>62                    </Drawer.Body>63                    <Drawer.Footer>64                      <Drawer.Close render={<Button variant="secondary" />}>Close</Drawer.Close>65                    </Drawer.Footer>66                  </Drawer.Content>67                </Drawer.Popup>68              </Drawer.Viewport>69            </Drawer.Portal>70          </Drawer>71        </Drawer.Provider>72      </div>73      <div {...stylex.props(styles.section)}>74        <h3 {...stylex.props(styles.heading)}>With useOverlayState()</h3>75        <p {...stylex.props(styles.explanation)}>76          Use the <code>useOverlayState</code> hook for a cleaner API with convenient methods like{" "}77          <code>open()</code>, <code>close()</code>, and <code>toggle()</code>.78        </p>79        <Drawer.Provider>80          <Drawer open={state.isOpen} onOpenChange={state.setOpen} swipeDirection="right">81            <div {...stylex.props(styles.stateCard)}>82              <p {...stylex.props(styles.status)}>83                Status:{" "}84                <span {...stylex.props(styles.statusValue)}>85                  {state.isOpen ? "open" : "closed"}86                </span>87              </p>88              <div {...stylex.props(styles.actions)}>89                <Drawer.Trigger90                  render={<Button size="sm" variant="secondary" />}91                  onClick={state.open}92                >93                  Open Drawer94                </Drawer.Trigger>95                <Button size="sm" variant="tertiary" onClick={state.toggle}>96                  Toggle97                </Button>98              </div>99            </div>100            <Drawer.Portal>101              <Drawer.Backdrop />102              <Drawer.Viewport>103                <Drawer.Popup>104                  <Drawer.Content>105                    <Drawer.Close106                      aria-label="Close drawer"107                      render={108                        <Button109                          isIconOnly110                          size="sm"111                          variant="tertiary"112                          xstyle={styles.cornerClose}113                        />114                      }115                    >116                      <CloseIcon />117                    </Drawer.Close>118                    <Drawer.Header>119                      <Drawer.Title>Controlled with useOverlayState()</Drawer.Title>120                    </Drawer.Header>121                    <Drawer.Body>122                      <p>123                        The <code>useOverlayState</code> hook provides dedicated methods for common124                        operations. No need to manually create callbacks—just use{" "}125                        <code>state.open()</code>, <code>state.close()</code>, or{" "}126                        <code>state.toggle()</code>.127                      </p>128                    </Drawer.Body>129                    <Drawer.Footer>130                      <Drawer.Close render={<Button variant="secondary" />}>Close</Drawer.Close>131                    </Drawer.Footer>132                  </Drawer.Content>133                </Drawer.Popup>134              </Drawer.Viewport>135            </Drawer.Portal>136          </Drawer>137        </Drawer.Provider>138      </div>139    </div>140  );141}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

With Form

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-with-form (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer, Input, Label, TextField } from "@lenso/ui";6import { styles } from "./styles";7
8export function WithForm() {9  return (10    <Drawer.Provider>11      <Drawer swipeDirection="right">12        <Drawer.Trigger render={<Button variant="secondary" />}>Edit Profile</Drawer.Trigger>13        <Drawer.Portal>14          <Drawer.Backdrop />15          <Drawer.Viewport>16            <Drawer.Popup>17              <Drawer.Content>18                <Drawer.Close19                  aria-label="Close drawer"20                  render={21                    <Button isIconOnly size="sm" variant="tertiary" xstyle={styles.cornerClose} />22                  }23                >24                  <CloseIcon />25                </Drawer.Close>26                <Drawer.Header>27                  <Drawer.Title>Edit Profile</Drawer.Title>28                </Drawer.Header>29                <Drawer.Body>30                  <form {...stylex.props(styles.form)}>31                    <TextField fullWidth name="name">32                      <Label>Name</Label>33                      <Input type="text" placeholder="Enter your name" variant="secondary" />34                    </TextField>35                    <TextField fullWidth name="email">36                      <Label>Email</Label>37                      <Input type="email" placeholder="Enter your email" variant="secondary" />38                    </TextField>39                    <TextField fullWidth name="bio">40                      <Label>Bio</Label>41                      <Input placeholder="Tell us about yourself" variant="secondary" />42                    </TextField>43                  </form>44                </Drawer.Body>45                <Drawer.Footer>46                  <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>47                  <Drawer.Close render={<Button />}>Save Changes</Drawer.Close>48                </Drawer.Footer>49              </Drawer.Content>50            </Drawer.Popup>51          </Drawer.Viewport>52        </Drawer.Portal>53      </Drawer>54    </Drawer.Provider>55  );56}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-navigation (Apache-2.0).4import type { ComponentType, SVGProps } from "react";5import { Bars, Bell, Envelope, Gear, House, Magnifier, Person } from "@gravity-ui/icons";6import * as stylex from "@stylexjs/stylex";7import { Button, CloseIcon, Drawer } from "@lenso/ui";8import { styles } from "./styles";9
10export function Navigation() {11  const navItems: { icon: ComponentType<SVGProps<SVGSVGElement>>; label: string }[] = [12    { icon: House, label: "Home" },13    { icon: Magnifier, label: "Search" },14    { icon: Bell, label: "Notifications" },15    { icon: Envelope, label: "Messages" },16    { icon: Person, label: "Profile" },17    { icon: Gear, label: "Settings" },18  ];19  return (20    <Drawer.Provider>21      <Drawer swipeDirection="left">22        <Drawer.Trigger render={<Button variant="secondary" />}>23          <Button.Icon>24            <Bars />25          </Button.Icon>26          Menu27        </Drawer.Trigger>28        <Drawer.Portal>29          <Drawer.Backdrop />30          <Drawer.Viewport>31            <Drawer.Popup>32              <Drawer.Content>33                <Drawer.Close34                  aria-label="Close drawer"35                  render={36                    <Button isIconOnly size="sm" variant="tertiary" xstyle={styles.cornerClose} />37                  }38                >39                  <CloseIcon />40                </Drawer.Close>41                <Drawer.Header>42                  <Drawer.Title>Navigation</Drawer.Title>43                </Drawer.Header>44                <Drawer.Body>45                  <nav {...stylex.props(styles.navigation)}>46                    {navItems.map((item) => (47                      <button key={item.label} {...stylex.props(styles.navButton)} type="button">48                        <item.icon {...stylex.props(styles.icon)} />49                        {item.label}50                      </button>51                    ))}52                  </nav>53                </Drawer.Body>54              </Drawer.Content>55            </Drawer.Popup>56          </Drawer.Viewport>57        </Drawer.Portal>58      </Drawer>59    </Drawer.Provider>60  );61}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Backdrop Variants

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-backdrop-variants (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, CloseIcon, Drawer } from "@lenso/ui";6import { styles } from "./styles";7
8export function BackdropVariants() {9  const variants = ["opaque", "blur", "transparent"] as const;10  return (11    <div {...stylex.props(styles.row)}>12      {variants.map((variant) => (13        <Drawer.Provider key={variant}>14          <Drawer swipeDirection="down">15            <Drawer.Trigger render={<Button variant="secondary" />}>16              {variant.charAt(0).toUpperCase() + variant.slice(1)}17            </Drawer.Trigger>18            <Drawer.Portal>19              <Drawer.Backdrop variant={variant} />20              <Drawer.Viewport>21                <Drawer.Popup>22                  <Drawer.Content>23                    <Drawer.Handle />24                    <Drawer.Close25                      aria-label="Close drawer"26                      render={27                        <Button28                          isIconOnly29                          size="sm"30                          variant="tertiary"31                          xstyle={styles.cornerClose}32                        />33                      }34                    >35                      <CloseIcon />36                    </Drawer.Close>37                    <Drawer.Header>38                      <Drawer.Title>39                        Backdrop: {variant.charAt(0).toUpperCase() + variant.slice(1)}40                      </Drawer.Title>41                    </Drawer.Header>42                    <Drawer.Body>43                      <p>44                        This drawer uses the <code>{variant}</code> backdrop variant.45                      </p>46                    </Drawer.Body>47                    <Drawer.Footer>48                      <Drawer.Close render={<Button xstyle={styles.fullWidth} />}>49                        Close50                      </Drawer.Close>51                    </Drawer.Footer>52                  </Drawer.Content>53                </Drawer.Popup>54              </Drawer.Viewport>55            </Drawer.Portal>56          </Drawer>57        </Drawer.Provider>58      ))}59    </div>60  );61}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Customization

Tailwind CSS

1"use client";2
3// Adapted from HeroUI v3.2.6 drawer-custom-styles (Apache-2.0).4import * as stylex from "@stylexjs/stylex";5import { Button, Drawer } from "@lenso/ui";6import { styles } from "./styles";7
8export function CustomStyles() {9  return (10    <Drawer.Provider>11      <Drawer swipeDirection="right">12        <Drawer.Trigger render={<Button variant="secondary" />}>Open filters</Drawer.Trigger>13        <Drawer.Portal>14          <Drawer.Backdrop variant="blur" />15          <Drawer.Viewport>16            <Drawer.Popup xstyle={styles.filters}>17              <Drawer.Content>18                <Drawer.Header>19                  <Drawer.Title>Filters</Drawer.Title>20                </Drawer.Header>21                <Drawer.Body>22                  <p {...stylex.props(styles.muted)}>Narrow results by status, owner, or date.</p>23                </Drawer.Body>24                <Drawer.Footer>25                  <Drawer.Close render={<Button variant="secondary" />}>Cancel</Drawer.Close>26                  <Drawer.Close render={<Button />}>Apply</Drawer.Close>27                </Drawer.Footer>28              </Drawer.Content>29            </Drawer.Popup>30          </Drawer.Viewport>31        </Drawer.Portal>32      </Drawer>33    </Drawer.Provider>34  );35}

Local adaptation source above. Derived from HeroUI v3.2.6 source.

Global CSS

To customize the Drawer component classes, you can use the @layer components directive.

Learn more.

1@layer components {2  .drawer__backdrop {3    @apply bg-gradient-to-br from-black/50 to-black/70;4  }5
6  .drawer__dialog {7    @apply rounded-2xl border border-white/10 shadow-2xl;8  }9
10  .drawer__header {11    @apply text-center;12  }13
14  .drawer__close-trigger {15    @apply rounded-full bg-white/10 hover:bg-white/20;16  }17}

Styling Reference

HeroUI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The Drawer component uses these CSS classes (View source styles):

Base Classes [!toc]

.drawer__trigger - Trigger element that opens the drawer
.drawer__backdrop - Overlay backdrop behind the drawer
.drawer__content - Positioning wrapper for the drawer panel
.drawer__dialog - The drawer panel itself
.drawer__header - Header section for titles
.drawer__heading - Main title text
.drawer__body - Main scrollable content area
.drawer__footer - Footer section for actions
.drawer__handle - Visual drag handle indicator
.drawer__close-trigger - Close button element

Backdrop Variants [!toc]

.drawer__backdrop--opaque - Opaque colored backdrop (default)
.drawer__backdrop--blur - Blurred backdrop with glass effect
.drawer__backdrop--transparent - Transparent backdrop (no overlay)

Placement Variants [!toc]

.drawer__content--bottom - Slides up from the bottom edge (default)
.drawer__content--top - Slides down from the top edge
.drawer__content--left - Slides in from the left edge
.drawer__content--right - Slides in from the right edge

Dialog Variants [!toc]

.drawer__dialog--top - Slides down from the top edge
.drawer__dialog--bottom - Slides up from the bottom edge
.drawer__dialog--left - Slides in from the left edge
.drawer__dialog--right - Slides in from the right edge

Interactive States

The component supports these interactive states:

Focus: :focus-visible or [data-focus-visible="true"] - Applied to trigger and close button
Hover: :hover or [data-hovered="true"] - Applied to close button on hover
Active: :active or [data-pressed="true"] - Applied to trigger and close button when pressed
Entering: [data-entering] - Applied during drawer opening animation
Exiting: [data-exiting] - Applied during drawer closing animation
Placement: [data-placement="*"] - Applied based on drawer position (top, bottom, left, right)

API Reference

Drawer

Prop	Type	Default	Description
`children`	`ReactNode`	-	Trigger and backdrop elements
`state`	`UseOverlayStateReturn`	-	Controlled overlay state

Drawer.Trigger

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom trigger content
`className`	`string`	-	CSS classes

Drawer.Backdrop

Prop	Type	Default	Description
`variant`	`"opaque" \| "blur" \| "transparent"`	`"opaque"`	Backdrop overlay style
`isDismissable`	`boolean`	`true`	Close on backdrop click
`isKeyboardDismissDisabled`	`boolean`	`false`	Disable ESC key to close
`isOpen`	`boolean`	-	Controlled open state
`onOpenChange`	`(isOpen: boolean) => void`	-	Open state change handler
`className`	`string \| (values) => string`	-	Backdrop CSS classes

Drawer.Content

Prop	Type	Default	Description
`placement`	`"top" \| "bottom" \| "left" \| "right"`	`"bottom"`	Edge the drawer slides from
`className`	`string \| (values) => string`	-	Content CSS classes

Drawer.Dialog

Prop	Type	Default	Description
`children`	`ReactNode`	-	Dialog content
`className`	`string`	-	CSS classes
`role`	`string`	`"dialog"`	ARIA role
`aria-label`	`string`	-	Accessibility label
`aria-labelledby`	`string`	-	ID of label element

Drawer.Header

Prop	Type	Default	Description
`children`	`ReactNode`	-	Header content
`className`	`string`	-	CSS classes

Drawer.Heading

Prop	Type	Default	Description
`children`	`ReactNode`	-	Title text
`className`	`string`	-	CSS classes

Drawer.Body

Prop	Type	Default	Description
`children`	`ReactNode`	-	Body content
`className`	`string`	-	CSS classes

Drawer.Footer

Prop	Type	Default	Description
`children`	`ReactNode`	-	Footer content
`className`	`string`	-	CSS classes

Drawer.Handle

Prop	Type	Default	Description
`className`	`string`	-	CSS classes

Drawer.CloseTrigger

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom close button
`className`	`string \| (values) => string`	-	CSS classes

useOverlayState Hook

1import { useOverlayState } from "@lenso/ui";2
3const state = useOverlayState({4  defaultOpen: false,5  onOpenChange: (isOpen) => console.log(isOpen),6});7
8state.isOpen; // Current state9state.open(); // Open drawer10state.close(); // Close drawer11state.toggle(); // Toggle state12state.setOpen(); // Set state directly

Accessibility

Implements WAI-ARIA Dialog pattern:

Focus trap: Focus locked within drawer when open
Keyboard: ESC closes (when dismissable), Tab cycles elements
Screen readers: Proper ARIA attributes via React Aria
Scroll lock: Body scroll disabled when open
Drag to dismiss: Supports pointer-based drag gestures on handle, header, and footer areas

Modal

Dialog overlay for focused user interactions and important content

Button

A clickable button component with multiple variants and states

CloseButton

Button component for closing dialogs, modals, or dismissing content

Drawer

Usage

Anatomy

Examples

Placement

Non-Dismissable

Scrollable Content

Controlled State

With Form

Navigation Drawer

Backdrop Variants

Customization

Tailwind CSS

Global CSS

Styling Reference

CSS Classes

Base Classes [!toc]

Backdrop Variants [!toc]

Placement Variants [!toc]

Dialog Variants [!toc]

Interactive States

API Reference

Drawer

Drawer.Trigger

Drawer.Backdrop

Drawer.Content

Drawer.Dialog

Drawer.Header

Drawer.Heading

Drawer.Body

Drawer.Footer

Drawer.Handle

Drawer.CloseTrigger

useOverlayState Hook

Accessibility

Related Components