shadcn.io is not affiliated with official shadcn/ui
Asset Inventory Kanban Block for React
A four-column IT asset register (In stock, Assigned, In repair, Retired) of ten tagged assets with a per-column count and value, where assigning hands an asset to the next person and retired assets can't return.
Installation
Overview
Keep every laptop and monitor accounted for with this asset register for React with Base UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (In stock, Assigned, In repair and Retired) and ten tagged assets. Each card shows the asset's name, its value, its tag code in mono, always read left to right, and either the holder, with their initials in an Avatar, or where the asset is. Every column head counts its assets and totals their value, and the sentence under the heading is worked out from the cards. Dropping an asset into Assigned hands it to the next person on a fixed rota; moving it out clears the holder. One rule guards the board: a retired asset is written off and can't come back, and the refusal says to register a new tag. A card moves by dragging its grip, by Space, the arrow keys and Space again (Escape cancels), or from its Dropdown Menu under "Move to". A polite status line reports each change and Reset restores the register. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For IT teams, equipment rooms and any register that tracks things by tag.
FAQ
How do I fill it with my own assets?
Edit COLUMNS, ROTA and START. An asset has an id, the column it starts in, a name, its tag, a price in integer cents and a holder (empty unless it starts in Assigned). Counts, values and sentences are calculated from the cards.
How is the holder chosen?
settleCards runs after every move: an asset that lands in Assigned without a holder gets the next name on ROTA, and an asset anywhere else has none. The demo has no picker so that a drag stays one gesture; for a real register, open a dialog or a select from put when the target is Assigned and set the holder from the answer.
How does the retired rule work?
refusalOf returns a reason when the asset comes from Retired, whichever way it is moved, and the status line says what to do instead. Replace it with your own policy, such as asking for a reason before Retired.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with the card'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. Each step is announced in the status line. The card's "More actions" menu offers a "Move to" choice for every column too, which is the route for a single pointer and for touch.
What stays in the demo, and how do I save the moves?
Everything: assets, holders and moves live in the component's state and a reload or Reset restores the register. 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 assets and people are made up.
How does it look on a phone?
The columns scroll sideways in one named region with the next column showing, and each column scrolls up and down inside the board's fixed height, so the page never jumps. The holder line stays on one row. Touch drags from the grip only, so the rest of a card still scrolls the board; the menu moves a card with a single tap.