Vue dialog blocks.

150 dialog sections, each a whole situation rather than a bare modal: a destructive confirmation, an error with a retry, a session timeout, an edit form, a picker, a command palette, a side sheet or a bottom drawer. The gallery sorts them into 18 groups, from Destructive confirms to Drawers and popovers.

For deleting something use Confirm Delete Dialog, which asks for the name to be typed, and for leaving a draft Unsaved Changes Dialog. For a failed request use API Error Dialog, for an idle timer Session Timeout Dialog, and for a form Edit Profile Dialog. For a search over actions use Command Palette Dialog, and for a panel that stays beside the page a side sheet such as Assign Task Dialog.

Use an alert dialog when the user must answer before anything else, as in the Destructive confirms group: it has no outside-click close and the safer button takes first focus. Use a dialog for a form or a picker, a sheet or drawer for a longer task beside the page, and a popover when the page should stay usable around it. The Destructive confirms, Side sheets and Drawers and popovers groups show each kind.

Each file is one page-in-miniature: a drawn page behind the dialog, the dialog itself, and the state that links them, with typed sample data at the top. A comment at the head of the file lists what the dialog does and what nothing does: no request is sent and nothing is stored outside the page.

In a block the dialog is open state you control: a shown value of closed, open or in-place, and the dialog's open prop is true only when it reads open. Replace that with your own boolean in a useState, or lift it to a parent, and pass it to the Dialog or AlertDialog's open and onOpenChange. The trigger button keeps opening it, and focus returns to that button on close.

The blocks draw the dialog open in place on load, as a non-modal copy over a drawing of the page, so a preview or poster shows it without a click. It is for display only. In your app keep the real Dialog or AlertDialog and delete the in-place copy: the in-place state, the scrim with its dialog element and the Escape effect, as the comment at the top of the file says.

The form blocks keep their fields in component state and check them in a submit handler, such as the save function in Edit Profile Dialog. Put your request in that handler after the checks pass, close the dialog only when it succeeds, and show a failure in the status line the block already keeps. Keep the form element, so Enter submits.

In Confirm Delete Dialog the Delete button stays off until the typed text equals the project name, and the confirm function then marks the project gone and says so in a polite line. Call your delete endpoint in confirm, and only set the gone state after it answers. Keep Cancel as the first focus and the dialog free of outside-click close.

Session Timeout Dialog counts down from a minute with the catalog Timer and speaks only at 30 and 10 seconds, so a screen reader is not read every second. Tie it to your real session expiry, reset it on activity, and call your sign-out at zero. The block only veils the page, since nothing signs anyone out.

Command Palette Dialog opens on Command or Control and K while focus is in the block. To make it global, attach the key listener to the document in your layout and toggle the same open state, and replace the typed list of pages, people and actions with your own data, or with results from a search request, in the same groups.

This page lists 150 of the category's 150 dialog blocks for Vue. The category comes in React (Base UI, React Aria, Ark UI and Radix UI), Vue, Svelte and Solid; the framework and UI library pickers at the top of any block's page switch between them.

The Vue dialog blocks are the React ones ported to Vue, on Ark UI's Vue primitives. They keep the layout, the copy and the theme tokens, and install with shadcn-vue (/r/vue/dialog-achievement-unlock.json).

Each block is TypeScript and Tailwind CSS v4, styled with your theme's tokens. Vue needs vue @ark-ui/vue lucide-vue-next installed once, and the CLI fetches the components a block imports.

Open a block and copy its command: `shadcn-vue@latest add` with the block's registry URL, such as /r/vue/dialog-achievement-unlock.json for Achievement Unlock Dialog. Run the project setup once first, and the code is yours to edit.

The block's file and the components it imports, installed before it, each as its own registry item. Nothing else changes in your project.

Use the filters above the grid: 18 kinds of dialog block, led by payments and plans (17), account and security (14), drawers and popovers (12) and time and scheduling (11), and sort by popular or name. A good first look: Achievement Unlock Dialog, Add Card Dialog and Add Comment Dialog. Each card opens the block's live page.

Every block draws the same page column and side rails with a top rule only (the Guides component), so a dialog block lines up with the one above and below it. Stack one per section and the rails read as a single drawing; pick across the alerts, forms and tools kinds.

Open its page and use the full-screen viewer (/view/dialog/vue/achievement-unlock) or the device-width previews. Every preview is free for everyone; only the code needs Pro.

Each dialog block uses semantic HTML: one heading level, real lists and labelled controls. Interactive parts sit on Ark UI, a headless library that follows the WAI-ARIA patterns, and the layouts use logical properties so they hold in right-to-left languages.

Yes. They use semantic tokens only (bg-card, text-muted-foreground), never palette colors, so they follow your preset, radius and dark mode. The primary color marks one action per block and is never a background.

No animation library: the dialog blocks' motion is CSS (transitions, entrance animations and SVG), and it stands still under prefers-reduced-motion.

The previews are free for everyone. The code of all 150 dialog blocks is Pro, as is every block: Pro unlocks the code, the install command and the MCP.

Only with a Team or Organization license: client work, SaaS products and anything your users pay for. The Individual license is for personal, non-commercial projects. See the license page for the full terms.

You keep using what you installed in your existing projects, but get no new downloads or updates, and the MCP stops answering. A Lifetime license includes all future updates.

No. You can use them in your own End Products, but not redistribute the code or designs on their own, or in a UI library, kit, template or website builder.

With Pro, yes: the MCP server (22 tools, one personal URL from /dashboard/mcp) lets your agent search_blocks for a dialog block, read it with get_block and install it on your Vue stack.

Pass `category: "dialog"` to search_blocks to search only the 150 dialog blocks, or to list_blocks for the 18 groups with their blocks. get_block then returns one with its install command.

plan_page plans a page as a stack of blocks for a brief. Pass `sections` with category ids, such as ["hero", "dialog", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.