Resizable modals that feel effortless
A corner grip, a minimum size, and nothing else. Tune the panel live, copy the CSS, and drop it into any Vue or React project.
Tune it, then take the code
Every control updates the panel and the stylesheet at the same time.
Drag the corner grip to resize this panel. It respects the minimum size you set on the left, and the readout updates live.
.vue-modal-resizer {
display: block;
overflow: hidden;
position: absolute;
width: 24px;
height: 24px;
right: 0;
bottom: 0;
z-index: 9999999;
background: transparent;
cursor: se-resize;
}
.vue-modal-resizer::after {
display: block;
position: absolute;
content: '';
background: transparent;
left: 0;
top: 0;
width: 0;
height: 0;
border-bottom: 12px solid #6366f1;
border-left: 12px solid transparent;
}
.vue-modal-resizer.clicked::after {
border-bottom: 12px solid #6366f1;
opacity: 1;
}
/* panel */
.modal {
width: 560px;
height: 380px;
min-width: 320px;
min-height: 240px;
}A shared library of panel sizes
Save whatever you tuned above, then load it back into the playground with one click.
Four steps to a draggable panel
The whole primitive is a handful of CSS rules and one pointer handler.
Wrap your modal
Give the panel position: relative so the grip anchors to its bottom-right corner.
Drop in the grip
A single element with the resizer class. The triangle is drawn with borders — no images.
Set your limits
min-width and min-height on the panel keep it usable no matter how far you drag.
Wire the drag
On pointer down, track movement and apply the delta to width and height.