shadcn.io is not affiliated with official shadcn/ui
No Plugins Empty State Block for Vue
An extensions store with nothing installed: tabs over a list of five plugins, the chosen one's detail with a drawn isometric shelf where a dashed cube hovers over its bay and turns solid when it is installed, and its permissions.
Installation
Overview
Show what an app can be extended with before anything is installed, with this no plugins empty state for Vue with Ark UI. A hairline frame with a plus mark on each corner holds the extensions store of Plugwick. Tabs switch between All plugins and Installed, each with its count, over a list of five plugins as a group of real radio buttons, every row one height. At the end of the frame the chosen plugin's detail shows a greyscale drawing of an isometric shelf with five bays and a dashed cube hovering over the plugin's own bay, then its name, one sentence and what it reads, writes and reaches over the network. The Shine Button, the only colored control, installs it: the dashed cube turns solid, the plugin joins the Installed tab and its count, and the button reads Installed, while a quiet Remove takes it off again. The frame's bands are ruled by Guides, and the whole block uses CSS transitions only. For the plugins, extensions or add-ons page of any app.
FAQ
What happens when I press Install, and what stays in the page?
Nothing is installed. The plugin goes into the page's state, its cube turns solid on the shelf, the Installed tab and the count in the heading row update and a polite status message says "Word counter installed in this demo." Remove and Start over take plugins off again. To wire it for real, install through your own extension service where the code says so, keep the button busy until it answers, and show a failure in the status line.
Where do the permissions come from?
They are typed with each plugin: what it reads, what it writes and what it reaches over the network, in plain words, so a reader can decide before installing. The demo's plugins are made up. In your store, show what the plugin's manifest really asks for and nothing the plugin could not do.
How does the drawing react without moving anything?
It is one inline SVG that never swaps: the five bays are always there, each with a dashed cube and a solid cube in it, and only the chosen plugin's dashed cube and the installed plugins' solid cubes are visible, fading in with opacity transitions that are switched off under reduced motion. The drawing is decorative and hidden from screen readers; the heading, the permissions and the status message say the same.
How does the Installed tab behave when it is empty?
It keeps the list's height and says what to do: "Nothing is installed yet. Choose a plugin in All plugins and install it; it will be listed here." The detail on the right keeps showing the plugin you chose, whichever tab is open, so installing from the Installed tab is not possible until something is there.
Is it usable with a keyboard and a screen reader?
Tab reaches the tab list (arrow keys switch tabs) and then the plugin list as one radio group, where the arrow keys change the plugin. The detail follows: Install, then Remove, which stays quiet (and says so if pressed) until the plugin is installed. Each count is spoken with its tab and the status message announces every change. The shelf is hidden from assistive technology.
How does it look on a phone?
The detail stacks under the list, the shelf shrinks to 112 px tall and the tab list scrolls sideways if it must. Every row keeps one height and the plugin's sentence reserves two lines, so changing the plugin never moves the buttons. From the medium breakpoint the detail sits at the end of the frame beside the list, divided by a rule that meets the band's rules at plus marks.