shadcn.io is not affiliated with official shadcn/ui
Brand Assets Kanban Block for Vue
A brand library of eleven assets in Draft, In review, Approved and Retired, each drawn as a type tile with a usage count and an Approved mark, where an asset still in use can't be retired.
Installation
Overview
Keep a brand's files under control with this brand assets kanban for Vue with Ark UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Draft, In review, Approved and Retired) and eleven assets. Each card draws its asset type as a small greyscale tile (Logo, Palette, Typeface, Icons or Template) beside the type's name in an outline Badge, says where it is used ("Used in 41 places") and carries an "Approved" mark once it stands in Approved. An asset that is still used somewhere can't be retired, and the refusal says in how many places it remains. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu with "Move to". The sentence under the heading counts the approved assets and where they are used, and a polite status line in the foot reports every move. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For brand teams, design systems and any asset library with a retirement step.
FAQ
How do I fill it with my own assets?
Edit COLUMNS and START. An asset has an id, a title, a kind (Icons, Logo, Palette, Template or Typeface), the number of places it is uses and the column it starts in. To add a type, add it to Kind and draw its shapes in AssetTile, which keeps one group of shapes per type.
How does the retirement rule work?
refusalOf refuses any move into Retired for an asset whose uses is above zero and names the number of places. The count is data in this demo; in a product it would come from where the asset is referenced, so the rule keeps a logo in use from disappearing before its replacements ship. Old wordmark, 2019 is the card to try.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the asset's title. Press Space or Enter to pick it up, then ArrowUp and ArrowDown to change its place, ArrowLeft and ArrowRight to go to the neighbouring column (the arrows swap in right-to-left languages), Home and End for the first and last place, Space or Enter to drop it and Escape to put it back. A step into Retired for an asset in use is refused in the status line and the asset stays where it was. Every step is announced in the status line in the foot.
Is there a way to move without dragging?
Yes: the menu at the end of each card lists every column under "Move to" with the current one ticked, so one choice moves the card, focus lands on it in its new place and the status line says so. This is the route for a single pointer and for touch.
What stays in the demo, and how do I save it?
Everything: The moves live in the component's state, nothing is saved or sent, and a reload or Reset brings back the starting board. To save for real, call your API from put, the one function every finished move goes through, and update the cards from the response. The product, the people and the cards are made up.
How does it look on a phone?
The board is a sideways scroll region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps when a card moves. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu is the other way to move a card.