Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

Dashboard blocks

Pro

Plugin Marketplace Dashboard Block for Vue

Eight extensions in category tabs with a search, each row showing author, version, installs, a star rating and compatibility, an Install, Installed or Update button, a changelog, and one Update all.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Browse, install and update extensions for an app, with this plugin marketplace panel for Vue with Ark UI. A hairline frame with a plus mark on each corner opens with Tabs for the categories (All, Analytics, Security, Productivity and Developer), then a search over names and authors and an "Installed 4" count worked out from the rows. Each Addonhall extension shows its author, version, installs in compact form, a read-only Rating and a compatibility word, and its button is Install, then Installed with Uninstall in a Dropdown Menu, or Update when a newer version exists. A row's changelog opens in a Collapsible, and "Update all (2)" in the header is the one primary Shine Button. For app stores and settings pages.

FAQ

How do I fill it with my own extensions?

Edit PLUGINS: a name, author, category, the latest version, the start version installed at first (empty for none), installs, a rating, a two-letter mark, whether it is compatible and its release notes. HOST names the app version they run on. Counts, the update count and every button state are worked out from those and what has been installed.

What do the buttons do?

Install adds the extension at its latest version, Update brings an installed one to the latest, and Uninstall in the menu removes it. An extension that needs a newer host says so, and its Install button answers "Not installed" in the status line instead of installing. Update all (N) updates every installed extension that is behind.

How do I use it with the keyboard?

Tab through the tabs, the search and each row. After a button changes, focus lands on the row's new button. The menu opens with Enter or Space and closes with Escape. The changelog button opens and closes with Enter or Space.

What stays local, and how do I wire it for real?

Everything: nothing is downloaded or installed, and reloading the page puts the starting state back. To make it real, call your install, update and uninstall endpoints from install, update and uninstall and keep the button disabled until they answer.

How does it look on a phone?

The tabs scroll sideways, each row takes two or three lines with its button under the details, and an empty search shows one message with a Clear search button.

All 200 dashboard blocks