Drawer

Use Drawer for supplementary content, navigation, or mobile-optimized interfaces. Use Dialog for focused tasks requiring full attention. Drawers are less disruptive and allow users to see the main content while accessing additional options or information.

Yes! Drawers support swipe gestures on touch devices. Users can drag the drawer down (or in the direction it came from) to dismiss it, providing a natural, intuitive interaction that feels native to mobile platforms.

Snap points allow drawers to rest at specific heights, like half-open or three-quarters open. This is useful for bottom sheets that show previews at partial height, then expand to full height when users need more detail, like map applications do.

Absolutely! Drawers are commonly used for mobile navigation menus that slide in from the left. They can contain navigation links, user profile info, settings, and more, keeping the main screen uncluttered until needed.

Yes, drawers include proper focus management, ARIA attributes, and keyboard support. They trap focus when open and return it appropriately when closed, ensuring keyboard and screen reader users can interact effectively.

Yes, this Figma Drawer component matches the shadcn/ui implementation, ensuring your slide-out panels work consistently from design to production with smooth animations and gesture support.