Sheet

Sheet is similar to Drawer but built on Dialog primitive, making it modal (blocks interaction). Use Sheet for important supplementary content requiring focus, Drawer for non-blocking sidebars, Dialog for focused tasks needing full attention.

Left for navigation menus, right for details/settings (common in mobile apps), bottom for actions/filters (good for mobile), top for notifications. Follow platform conventions—users expect patterns they've learned from other apps.

On mobile, often yes—maximizes space. On desktop, partial width (30-50%) works better, keeping main content visible for context. Adjust based on Sheet content amount and screen size for optimal experience.

Technically yes, but avoid if possible—nested overlays confuse users about navigation depth. If you need nested content, consider using sections within one Sheet or alternative patterns like tabs or progressive disclosure.

Make Sheet content scrollable when it exceeds screen height. Keep header/footer fixed for consistent Close button access. Users should always be able to dismiss Sheet without scrolling to find the close button.

Yes, this Figma Sheet component matches the shadcn/ui implementation exactly, ensuring your slide-out panels work consistently from design to production with proper modal behavior and animations.