Skip to content
Mizen UI
Docs

IntroductionInstallationCLIStylingFoundationsThemingCompositionIntegrationsAccessibilityFor agents

useCopyToClipboard

AccordionAspect RatioCardCollapsibleFrameGridGroupInlineScroll AreaSectionSeparatorSpacerStack

BlockquoteCitationCodeHeadingKbdLabelLinkTextVisually Hidden

ButtonButton GroupToggleToggle groupToolbar

CalendarCheckboxCheckbox groupComboboxDate pickerDate range pickerDate-Time InputFieldFieldsetFile UploadFormInputInput groupNumber fieldOTP FieldRadio groupSelectSliderSwitchTextareaTime Input

BreadcrumbMenubarNavigation MenuPaginationSegmented ControlStepperTabs

Alert dialogCommandContext MenuDialogDrawerMenuPopoverPreview CardSheetTooltip

AlertBadgeEmptyError StateMeterProgressSkeletonSpinnerStatus dotToast

Activity FeedAvatarAvatar GroupData TableListMetricOverflow ListProperty ListTableTokenTree

Area ChartBar ListCalendar HeatmapCategory ComparisonChart FrameChart LegendChart TooltipDistributionFunnelHeatmapMetric TrendPart-to-WholeProgress RingsRadar ChartRadial BarsSankey ChartScatter ChartScore GaugeTime Series

Diagram

AttachmentCarouselCode BlockLightboxMarkdownThumbnailTimestamp

Agent ThinkingApproval CardComposerConversationInline CitationMessageMessage ScrollerQuestion CardSourcesStreaming TextSuggestionTask ListTerminalTool Call

On this page

  • Preview
  • Usage
  • Anatomy
  • Examples
  • Production workspace
  • Inset variant
  • Straight variant
  • Scrollable content
  • Nested drawers and menus
  • Snap points
  • Disabled
  • Recommendations
  • Usage boundaries
  • API reference

Overlays

Drawer

Presents an edge-anchored gesture-driven sheet with smooth touch dragging and snap points.

idle

Usage

import {
	Drawer,
	DrawerClose,
	DrawerDescription,
	DrawerFooter,
	DrawerHeader,
	DrawerPanel,
	DrawerPopup,
	DrawerTitle,
	DrawerTrigger,
} from "@mizen-labs/ui";

Anatomy

The parts and how they nest, taken from the preview above.

<Drawer>
	<DrawerTrigger />
	<DrawerPopup>
		<DrawerHeader>
			<DrawerTitle />
			<DrawerDescription />
		</DrawerHeader>
		<DrawerPanel />
		<DrawerFooter>
			<DrawerClose />
		</DrawerFooter>
	</DrawerPopup>
</Drawer>

Examples

Production workspace

Review the latest activity without leaving the workspace.

Inset variant

Panels from all four edges.

Straight variant

Square corners with a bare footer.

Scrollable content

A fixed header and footer around a scrolling panel.

Nested drawers and menus

Actions, disabled items, checkbox and radio selection, and nested navigation.

Snap points

Drag between three sequential bottom snap points.

Disabled

An unavailable drawer trigger.

Recommendations

GuidancePractice
Do

Use a clear title and an explicit close control. Keep scrolling content separate from the main action.

Usage boundaries

GuidanceBoundary
Scope

Dragging must not be the only dismissal path. Use a page for tasks that require sustained reference to other content.

API reference

Public props from @mizen-labs/ui. Use exported prop types for the complete TypeScript contract.

PropTypeDefaultDescription
DrawerDrawerProps—Root state, position, swipe direction, snap points, and native open callbacks.
DrawerCreateHandletypeof DrawerCreateHandle—Creates a handle for detached triggers.
DrawerTriggerDrawerTriggerProps—Opens the drawer; supports render composition.
DrawerPopupDrawerPopupProps—Portal, backdrop, viewport, and popup; supports position, variants, showBar, showCloseButton, and portalProps.
DrawerHeaderDrawerHeaderProps—Title and description layout; allowSelection defaults to false.
DrawerFooterDrawerFooterProps—Action area; variant defaults to default, allowSelection to true.
DrawerTitleDrawerTitleProps—Accessible drawer title.
DrawerDescriptionDrawerDescriptionProps—Muted accessible description.
DrawerPanelDrawerPanelProps—Body; scrollable, scrollFade, and allowSelection default to true.
DrawerMenuDrawerMenuProps—Container for drawer action items.
DrawerMenuItemDrawerMenuItemProps—Button action; supports disabled, render, and destructive variant. Wrap in DrawerClose to dismiss.
DrawerMenuSeparatorDrawerMenuSeparatorProps—Divider between action groups.
DrawerMenuGroupDrawerMenuGroupProps—Container for related actions.
DrawerMenuGroupLabelDrawerMenuGroupLabelProps—Muted group heading.
DrawerMenuTriggerDrawerMenuTriggerProps—Opens a nested drawer with a trailing chevron.
DrawerMenuCheckboxItemDrawerMenuCheckboxItemProps—Native checkbox row; supports controlled state, disabled, and switch variant.
DrawerMenuRadioGroupDrawerMenuRadioGroupProps—Native radio selection group.
DrawerMenuRadioItemDrawerMenuRadioItemProps—Native radio row; requires a string value.
DrawerCloseDrawerCloseProps—Dismisses the drawer and restores focus.
DrawerPortalDrawerPortalProps—Native Base UI portal.
DrawerBackdropDrawerBackdropProps—Styled backdrop.
DrawerViewportDrawerViewportProps—Styled positioning viewport; accepts position and variant.
DrawerSwipeAreaDrawerSwipeAreaProps—Edge gesture target; accepts position.
DrawerBarDrawerBarProps—Drag indicator; accepts position and render.
DrawerContentDrawerContentProps—Native swipe-protected content wrapper.
DrawerPrimitivetypeof DrawerPrimitive—Base UI Drawer namespace.
position"top" | "right" | "bottom" | "left""bottom"Anchors the drawer to the specified edge of the viewport.
swipeDirection"up" | "down" | "left" | "right"derived from positionDirection of pointer swipe gestures used to dismiss or reposition the drawer.
snapPoints(number | string)[]—Snap points defining intermediate heights or positions for drawer expansion.
variant"default" | "straight" | "inset""default"Visual presentation variant controlling border radius and inset spacing.
showBarbooleanfalseRenders an aria-hidden visual affordance grab handle bar on the drawer popup edge.
showCloseButtonbooleanfalseRenders an accessible close button inside the drawer popup.
scrollablebooleantrueWraps drawer panel content in a managed scroll area.
allowSelectionbooleantrueEnables text selection within the drawer panel while preserving swiping outside it.
PreviousDialogNextMenu