DrawerContent

Right-anchored side panel for secondary flows.

Import

import { DrawerContent } 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

Prop	Type	Default	Description
blocking	boolean	false	Same semantics as DialogContentProps.blocking.
closeLabel	string	"Close"	Accessible label of the close button.

* marks a required prop.

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