Drawer

Wraps DialogPrimitive.Root so focus is restored on close even when the drawer is opened in a controlled way, without its own DrawerTrigger.

Import

import { Drawer } from "@jcsoftdev/ui/overlays";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/overlays/drawer.

Usage

export const Default: Story = {
  render: (args) => (
    <Drawer>
      <DrawerTrigger asChild>
        <Button variant="secondary">Ver cita</Button>
      </DrawerTrigger>
      <DrawerContent {...args}>
        <AppointmentDetail />
      </DrawerContent>
    </Drawer>
  ),
};

Source of the Storybook story.

Props

This component declares no props of its own.

It also accepts the native props of the element or primitive it renders (for example className, id, aria-* and event handlers).

Storybook stories

• Default
• Open By Default
• With Trigger Open
• Blocking
• Controlled

Source

packages/ui/src/overlays/drawer/drawer.tsx