Vue success blocks.

They are 99 React confirmation screens for the moment after something worked, in 19 groups: payments and refunds, plans and limits, account lifecycle, security and access, people and approvals, builds and deploys, integrations and syncs, domains and network, servers and storage, backups and exports, saves and updates, orders and shipping, learning and setup, referrals and leads, documents and contracts, campaigns and ads, posts and reviews, support and feedback, goals and levels. Each says what happened, shows the details that matter and offers the next step.

Payment Receipt Success shows the amount, the receipt table and a copy and download for the receipt number, Account Setup Checklist Success follows sign-up with a setup checklist, and Export Ready Success offers a download that expires. Two-Factor Recovery Codes Success and Data Import Success cover security and imports.

Most are whole screens with the page's rails and one band, so they work as a route after a checkout, a form or a job. Settings Version Sheet Success is a sheet over a page, and Data Import Success is a panel inside an app.

The amounts, counts, codes and names are typed sample data and nothing was charged, created or sent. The buttons only change the page, except a few that do real browser work: copy to the clipboard, and downloads of a sample file made in the tab.

Render the block on your success route and pass it what your backend returns, such as the amount, the plan and the receipt number. In Payment Receipt Success the lines, the tax at 10% in whole cents and the total are worked out from typed items, so replace the items and keep the computation or show the totals your payment provider reports.

The primary action is a link in the block, such as Open the dashboard, with `#` as its target in the demo: point it at your route and keep one primary on the page. Email Verified Redirect Success counts down from five seconds with a pause toggle and, at zero, only says the redirect stops there; call your router's navigation at that moment.

Goal Exceeded Success uses the catalog Confetti Button: a Celebrate button throws a short burst when pressed, and none under reduced motion. Keep the burst tied to a deliberate press rather than the page load.

Export Ready Success builds a real zip in the tab and Data Import Success a real CSV of the failed rows, both from typed sample data. Replace the sample with a signed link to your generated file or build the file from your own result, and keep the expiry shown beside the link.

This page lists 99 of the category's 100 success 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 success 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/success-2fa-enabled.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/success-2fa-enabled.json for Two-Factor Recovery Codes Success. 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: 19 kinds of success block, led by plans and limits (9), payments and refunds (8), people and approvals (8) and account lifecycle (7), and sort by popular or name. A good first look: Two-Factor Recovery Codes Success, A/B Test Started Success and Abandoned Cart Recovered Success. 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 success 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 money and plans, accounts and people and engineering kinds.

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

Each success 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 success 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 100 success 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 success block, read it with get_block and install it on your Vue stack.

Pass `category: "success"` to search_blocks to search only the 100 success blocks, or to list_blocks for the 19 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", "success", "footer"], to force the order; each section gets a pick and two alternatives, and get_block installs the stack.