Drawer

Component preview

import * as UI from "@iyk/ui"

export default () => (
  <div className="flex justify-center">
    <UI.Drawer.Root>
      <UI.Drawer.Trigger asChild>
        <UI.Button type="button" kind="outline" size="sm">
          Open Drawer
        </UI.Button>
      </UI.Drawer.Trigger>
      <UI.Drawer.Content>
        <div className="mx-auto w-full max-w-sm">
          <UI.Drawer.Header>
            <UI.Drawer.Title>Drawer Example</UI.Drawer.Title>
            <UI.Drawer.Description>This is a drawer component.</UI.Drawer.Description>
          </UI.Drawer.Header>
          <UI.Drawer.Footer>
            <UI.Drawer.Close asChild>
              <UI.Button type="button" kind="ghost" size="md">
                Cancel
              </UI.Button>
            </UI.Drawer.Close>
            <UI.Button type="button" kind="solid" size="md">
              Confirm
            </UI.Button>
          </UI.Drawer.Footer>
        </div>
      </UI.Drawer.Content>
    </UI.Drawer.Root>
  </div>
)

Usage

The Drawer is a modal component that provides a mobile-friendly way to display additional content or actions. It slides in from the bottom of the screen, providing a drawer-like experience for showing content or navigation.

The drawer can be customized with a header, description, and footer section. The footer is commonly used for action buttons like confirm or cancel.

API