FreeComponent · Modals & overlays
Modal Dialog
Accessible Vue 3 modal dialog with v-model:open, focus trap, Escape and backdrop close, scroll lock and footer slot. Tailwind CSS, dark mode.
by Vueplay
Vue modal and dialog components
Modals interrupt the page, so they need to be careful about focus, scrolling and how they close. These Vue 3 modal, drawer and popover components handle those details and are styled with Tailwind CSS 4 and class-based dark mode.
Open state is bound with v-model, content goes in slots, and there are no dependencies besides vue. Install them with npm or copy the single-file component into your project.
Free
FreeComponent · Modals & overlays
Slide-over Panel
Vue 3 slide-over drawer that opens from the left or right, with v-model:open, focus trap, Escape close, header and footer slots. Tailwind CSS, dark mode.
by Vueplay
FreeComponent · Modals & overlays
Tool
A lightweight and customizable tooltip component with dynamic dark/light themes, responsive positioning (top, bottom, left, right), and smooth hover effects with adaptive colors.
Good to know
Building modals & overlays that hold up
- Consider the native dialog element
- The <dialog> element with showModal() gives you a top layer, an inert background and Escape handling for free. Style its backdrop with the backdrop: variant in Tailwind.
- Manage focus on open and close
- Move focus into the dialog when it opens and return it to the triggering element when it closes. Label the dialog with aria-labelledby pointing at its heading.
- Teleport to the body
- If you are not using <dialog>, render the overlay with <Teleport to="body"> so parent overflow and z-index rules do not clip it.
- Lock scroll without layout shift
- Locking body scroll removes the scrollbar and shifts content. Setting scrollbar-gutter: stable on the html element prevents that jump.
FAQ
Questions
Do these modals trap focus?
Yes. They keep focus inside while open, close on Escape and return focus to the trigger, either through the native dialog element or a small built-in focus handler.
Can I open a modal programmatically?
Yes. Bind the open state with v-model to a ref and set it to true from any function, such as after a failed request or a keyboard shortcut.