Drawer

Basic drawer example demonstrating core behavior.

Package: @solidiom/drawer
Version: 0.0.1-next.0
Status: stable

Examples

import * as Drawer from "@solidiom/drawer"

;<Drawer.Root side="right" onOpenChange={(open) => console.log(open)}>
  <Drawer.Trigger>Open Drawer</Drawer.Trigger>

  <Drawer.Backdrop />

  <Drawer.Content>
    <Drawer.Close aria-label="Close drawer">✕</Drawer.Close>

    <Drawer.Title>Edit Profile</Drawer.Title>
    <Drawer.Description>Make changes to your profile here.</Drawer.Description>

    <div style={{ padding: 16 }}>
      <p>Drawer content goes here.</p>
    </div>
  </Drawer.Content>
</Drawer.Root>

The drawer slides in from the edge specified by side (“top”, “right”, “bottom”, “left”). In modal mode (default), it includes a backdrop, focus trap, and scroll lock. Set modal={false} for a non-modal drawer.

View source

        /**
 * @solidiom/drawer — Headless slide-in drawer primitive.
 *
 * Parts: Root, Trigger, Backdrop, Content, Close, Title, Description.
 */

export {
  Root,
  Trigger,
  Backdrop,
  Content,
  Close,
  Title,
  Description,
  type DrawerRootProps,
  type DrawerTriggerProps,
  type DrawerBackdropProps,
  type DrawerContentProps,
  type DrawerCloseProps,
  type DrawerTitleProps,
  type DrawerDescriptionProps,
} from "./drawer"

export { type DrawerSide, type DrawerContextValue } from "./drawer-context"