Drawer

Installation

Copy editable source into an initialized application:

pnpm dlx @simurgh-ui/cli add drawer

For package consumption, import from the component subpath and load its optional recipe CSS:

React

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
} from '@simurgh-ui/react/drawer';
import '@simurgh-ui/styles/drawer.css';

Vue

import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
} from '@simurgh-ui/vue/drawer';
import '@simurgh-ui/styles/drawer.css';

Angular

import { DrawerComponent } from '@simurgh-ui/angular/drawer';
import '@simurgh-ui/styles/drawer.css';

Omit the component stylesheet for fully headless styling. CLI-copied components use the local path written to simurgh.json and the copied application styles instead of these package imports.

Purpose

Drawer presents focused tasks from the bottom edge while retaining the library’s modal dialog contract: accessible naming, focus containment, Escape and overlay dismissal, and trigger-focus restoration. Use the optional top side for interfaces anchored to the upper viewport edge.

Default presentation: styled

The optional component stylesheet provides a complete default recipe, including visual hierarchy and interaction states. Consumers can override semantic tokens or omit the recipe.

Basic usage

Live component Drawer

Anatomy

The public component parts are listed in API surface below. Use only the parts needed by the example; compound components depend on their documented parent/child nesting.

State model

Controlled state remains the application’s source of truth and must be updated from every change event. Uncontrolled state reads its default only when the component mounts. Do not pass both forms of the same state at once.

Framework	Exact state contract and reset behavior
React	Controlled: `open` + `onOpenChange`. Uncontrolled: `defaultOpen`. Reset controlled state by assigning the initial value; reset uncontrolled state by changing a React `key`.
Vue	Controlled: `v-model:open` (`open` + `update:open`). Uncontrolled: `defaultOpen`. Reset the model ref to its initial value; reset uncontrolled state with a changed Vue `:key`.
Angular	No public two-way state binding is exposed.

React

const initialOpen = false;
const [open, setOpen] = useState(initialOpen);
const [resetKey, setResetKey] = useState(0);

<Drawer open={open} onOpenChange={setOpen}>…</Drawer>
<button onClick={() => setOpen(initialOpen)}>Reset controlled</button>
<Drawer key={resetKey} defaultOpen={initialOpen}>…</Drawer>
<button onClick={() => setResetKey((key) => key + 1)}>Reset uncontrolled</button>

Vue

<script setup lang="ts">
import { ref } from 'vue';
const initial = false;
const state = ref(initial);
const resetKey = ref(0);
</script>

<Drawer v-model:open="state">…</Drawer>
<button @click="state = initial">Reset controlled</button>
<Drawer :key="resetKey" :defaultOpen="initial">…</Drawer>
<button @click="resetKey++">Reset uncontrolled</button>

Prefer Drawer for compact, touch-friendly tasks that fit within a partial viewport. Use Dialog for centered decisions and Sheet for full-height side panels. Drawer does not impose gesture handling, so applications can add drag behavior without changing its accessibility contract.

Examples

<Drawer>
  <DrawerTrigger>Edit profile</DrawerTrigger>
  <DrawerContent>
    <DrawerTitle>Edit profile</DrawerTitle>
    <DrawerDescription>Update your public account details.</DrawerDescription>
    <DrawerClose>Done</DrawerClose>
  </DrawerContent>
</Drawer>

<Drawer>
  <DrawerTrigger>Edit profile</DrawerTrigger>
  <DrawerContent>
    <DrawerTitle>Edit profile</DrawerTitle>
    <DrawerDescription>Update your public account details.</DrawerDescription>
    <DrawerClose>Done</DrawerClose>
  </DrawerContent>
</Drawer>

<simurgh-drawer #drawer labelledBy="drawer-title" describedBy="drawer-description">
  <button trigger (click)="drawer.show()">Edit profile</button>
  <h2 id="drawer-title">Edit profile</h2>
  <p id="drawer-description">Update your public account details.</p>
  <button (click)="drawer.close()">Done</button>
</simurgh-drawer>

Accessibility

Preserve the documented composition and accessible names when wrapping or restyling this component. See accessibility and RTL guidance for keyboard, focus, labeling, and directionality requirements.

API surface

React exports: Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose
Vue exports: Drawer, DrawerTrigger, DrawerContent, DrawerTitle, DrawerDescription, DrawerClose
Angular exports: DrawerComponent

Import these public symbols from the component subpath shown in Installation. Framework-specific props, events, slots, directives, methods, defaults, and native-attribute behavior belong in the API tables on this page; use the linked source only to verify the current implementation.

React API reference

React

An inherited-attributes entry means the component accepts the complete named React native interface, including its event handlers and ARIA and data attributes. Remaining attributes are forwarded to the rendered element unless the component behavior described on this page overrides them.

`Drawer`

Complete props type: PropsWithChildren<OpenProps>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`defaultOpen`	`boolean`	`undefined`
`onOpenChange`	`(open: boolean) => void`	`undefined`
`open`	`boolean`	`undefined`

`DrawerTrigger`

Inherited attributes: ButtonHTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLButtonElement> \| undefined`	`undefined`

`DrawerContent`

Inherited attributes: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLDivElement> \| undefined`	`undefined`
`side`	`"top" \| "bottom"`	`'bottom'`

`DrawerTitle`

Inherited attributes: HTMLAttributes<HTMLHeadingElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`

`DrawerDescription`

Inherited attributes: HTMLAttributes<HTMLParagraphElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`

`DrawerClose`

Inherited attributes: ButtonHTMLAttributes<HTMLButtonElement> & RefAttributes<HTMLButtonElement>.

Prop	Type	Default / requirement
`children`	`ReactNode`	`undefined`
`ref`	`Ref<HTMLButtonElement> \| undefined`	`undefined`

Vue API reference

Vue

Boolean props without explicit defaults use Vue’s false default. Undeclared attributes follow the fallthrough behavior stated for each component.