Vue dashboard blocks.

200 dashboard sections for the screens inside a product: KPI figures, charts, ranked tables, incident timelines, pipelines, permission grids, feeds and order queues. The gallery sorts them into 21 groups by subject, from Compute and capacity to Overview and activity.

For an app shell with a sidebar and KPI figures use Overview Dashboard, or Platform Overview Dashboard for regions and environments. For a chart use Revenue Chart Dashboard, and for a ranked table API Latency Dashboard. Use Uptime Monitor Dashboard for response times, Activity Feed Dashboard for a feed with read state, Recent Orders Dashboard for bulk order actions and Permission Matrix Dashboard for roles.

Each block is one panel of a dashboard, not a whole app. Only a couple, such as the overview and the platform overview, carry their own sidebar inside a fixed-height window. The rest are cells you place in your own layout, so you keep your router, your shell and your navigation.

The charts are drawn by hand in markup and SVG from typed numbers, so there is no chart library dependency in these files. The numbers come from arrays at the top or from a seeded generator in the file, so every load is identical and nothing is measured.

Replace the typed arrays or the seeded series at the top of the block with data from your API, passed in as props from a server component or a query hook. In Revenue Chart Dashboard the MONTHS array holds revenue by plan, and the periods, the change against the previous period and the plan split are all worked out from it, so you supply the raw rows and the rest follows.

A block works its figures out from the same data its chart draws, so changing the data changes both. To use a chart library instead, keep the block's cell, header and polite status line, and put Recharts, visx or Chart.js inside the cell in place of the hand-built columns. The catalog's chart component, which is built on Recharts, can also draw the series if you prefer the shadcn chart look.

The blocks fix a clock in the file, such as an AS_OF timestamp in Overview Dashboard, so the preview never changes between visits. Replace it with the current time, or the end of your reporting period, and format the days in your own time zone so they line up with your data.

Nothing in these blocks fetches or subscribes to data. Fetch on the server, or with a query hook that refetches on an interval, and pass the result in as the data. Keep the polite status line in the block, because it is what tells a screen reader that a figure has changed.

The period select, view toggles and sort controls in the blocks change local state only. To link them to the URL, read the selection from the search params on the server, fetch for that range and pass the rows in. Then the filter survives a reload and can be shared as a link.

The charts are real elements you can focus, and in Revenue Chart Dashboard the pinned column is also read out as a polite line of text, so the figure does not rely on colour alone. States are shown as a word and a shape, as in Permission Matrix Dashboard, where each cell is a button with an arrow-key grid. Check these in your own data, since long labels are the usual thing to overflow.

This page lists 200 of the category's 200 dashboard 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 dashboard 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/dashboard-ab-testing.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/dashboard-ab-testing.json for A/B Testing Dashboard. 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: 21 kinds of dashboard block, led by users and adoption (15), compute and capacity (14), api performance (14) and revenue and billing (13), and sort by popular or name. A good first look: A/B Testing Dashboard, Access Logs Dashboard and Activity Feed Dashboard. 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 dashboard 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 infrastructure, reliability and security kinds.

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

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

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