This component automatically shows as a dialog on desktop and a drawer on mobile devices. Try resizing your browser or opening on different devices to see the responsive behavior.
A simple form with title and description.
Shows a cancel button on mobile drawer (not visible on desktop dialog).
Using a larger dialog size on desktop with custom className.
Sometimes you don't need a description, just a title.
Control the open/close state externally. Current state: Closed
You can use any element as a trigger, not just buttons.
Click to edit
Tap this card to open editor
• On desktop: All examples show as modal dialogs
• On mobile: All examples show as bottom drawers
• Try resizing your browser window to see the responsive behavior
• The component automatically handles the transition between desktop and mobile modes