shadcn.io is not affiliated with official shadcn/ui
Gaming Platform Sidebar Block for Vue
A game launcher in a fixed-height window: a library of six games filtered by All, Installed and Updates, each with an install-state glyph and a button that cycles it, plus three friends online and the chosen game's details.
Installation
Overview
Show what is installed at a glance with this gaming platform sidebar for Vue with Ark UI. A window framed by a hairline with a plus mark on each corner holds the Sidebar on a muted rail: a Toggle Group of All, Installed and Updates, each with its count, over a library of six games. Every game row carries its state as a glyph and a word (Installed, Not installed or Update available) and a button at its end that moves it on: install, update or uninstall, locally. Under the library three friends are listed by name with what they are playing. The page is the chosen game: its tile drawn in greyscale from plain shapes, its genre, size and last-played day, and the same action as a button, under a line that counts what the filter shows. It is built from Sidebar, Toggle Group, Button, Avatar and Guides, with a CSS entrance only. Folded to icons the rail keeps one state glyph per game with tooltips; below the medium breakpoint it is a sheet. For game launchers, app stores, plugin managers and any library with an install state.
FAQ
How does a game change state?
Each game is in one of three states, worked out from two lists in the block's state: the installed games and the ones among them with an update waiting. Install adds a game to the first list, Update removes it from the second and Uninstall removes it from the first. The row's glyph (a dashed ring, a check or an arrow in a ring), its word, the button's name ("Install Moth Kingdom"), the filter counts and the details on the page all follow from those two lists. The state is told by glyph shape and word, never by colour.
What does the filter do?
All, Installed and Updates narrow the library in the rail, and each shows its count. Installed counts every installed game, including those with an update waiting; Updates counts only those. Update every game and the Updates filter shows "No games match Updates" with a Show all button, in the same space, so the rail never changes size. The chosen game stays on the page even if the filter hides it.
Are the friends live?
No. The three friends are typed in FRIENDS with what each is playing, and they are plain text: nothing is shown as online by a coloured dot, only by the words. They are hidden while the rail is folded.
What stays in the page, and how do I connect it?
Everything: the games, the friends and the two state lists are typed or kept in the block, and nothing is downloaded, installed or run (the status line says so after each action). Replace the act handler with calls to your launcher and the typed lists with its library. The rows are pressed buttons, not links. The provider is set with persist={false} and shortcut={false}, so the block writes no cookie and leaves Ctrl and Command with B to the page it sits on.
How does it work on a phone?
Below the medium breakpoint the sidebar is a sheet that the menu button opens from the start edge, the right in a right-to-left layout; the filter and the buttons work inside it. The page repeats what the filter shows ("Installed: 4 of 6 games shown, 2 updates waiting") and has its own action button for the chosen game, so the first screen shows the result and nothing needs the sheet.
Is it accessible?
The sidebar is a navigation landmark named after the product. The filter is a group of three toggle buttons, each game's row is a pressed button whose action button names the game and the action, and the details are a list of terms and values. One polite status line reports each change, and the names, sizes and dates are isolated so they read right in a right-to-left layout.