Experience the future of user interfaces with fully draggable, resizable, and interactive windows. Perfect for complex applications that need flexible layouts.
Enhance user experience with intuitive, flexible interfaces
Keep multiple windows open simultaneously and position them exactly where you need them. Perfect for comparing data or multi-tasking.
Natural drag-and-drop interactions that users understand immediately. No learning curve required.
Reduce context switching and improve workflow efficiency with customizable window layouts.
Built with modern web technologies for smooth performance
Works perfectly on desktop, tablet, and mobile devices
Native touch events for mobile and tablet interactions
Automatically constrains windows to viewport boundaries
Smooth 60fps dragging with optimized event handling
Configurable initial positions, sizes, and constraints
Optional resize handles with min/max size constraints
Minimize, maximize, and close buttons built-in
Simple hooks and components for existing React apps
Add draggable functionality to your existing components in minutes
import { DraggableDialog } from '@/components/ui/draggable-dialog';
<DraggableDialog
open={isOpen}
onOpenChange={setIsOpen}
title="My Draggable Modal"
initialPosition={{ x: 100, y: 100 }}
defaultSize={{ width: 600, height: 400 }}
>
<YourModalContent />
</DraggableDialog>Click the buttons below to open draggable windows that you can move around the screen
Click and drag the title bar to move windows around the screen. Perfect for multi-tasking.
Drag the bottom-right corner to resize windows. Includes min/max constraints.
Configure initial position, size constraints, and enable/disable features.
Start building more intuitive and flexible user experiences today