shadcn.io is not affiliated with official shadcn/ui
Investment Tracker Kanban Block for Vue
A three-column sample portfolio (Planned, Holding, Sold) of nine entries with typed dollar amounts and an allocation share on each holding that adds up to exactly 100 percent, labelled as sample figures, not advice.
Installation
Overview
See how a sample portfolio is split with this investment tracker for Vue with Ark UI. A hairline frame with a plus mark on each corner holds three columns, Planned, Holding and Sold, and nine entries. Each card shows the entry, its type in an outline Badge (Stock index, Bond fund or Savings) and its amount in whole dollars; entries in Holding also show their allocation share, each amount over the Holding total. The shares are rounded by largest remainder, so they always add up to exactly 100. A strip above the board gives the Holding total, the largest share and the Planned total, and a line says the figures are samples, not advice, and nothing is bought or sold. One rule guards the board: an entry can't be Sold without being held first. Cards move by dragging the grip, by Space, the arrow keys and Space again (Escape cancels), or from the Dropdown Menu with "Move to"; a polite status line reports each change and Reset restores the board. On a phone the columns scroll sideways in one named region. For personal finance tools and any board that turns amounts into shares.
FAQ
How do I fill it with my own entries?
Edit COLUMNS and START. An entry has an id, the column it starts in, a title, a kind and amount, a whole number of dollars. Totals, shares and the header sentence are calculated from the cards. The names here are generic samples, not real funds.
How is the allocation share worked out?
sharesOf takes each Holding entry's amount over the Holding total, rounds every share down, and hands the missing points to the entries with the largest remainders, so the shares add up to exactly 100 and move as you move entries in and out of Holding.
How does the Sold rule work?
refusalOf refuses a move from Planned straight to Sold, because there is nothing to sell. Drag, keys and menu all ask it. Replace the body with your own rule.
How do I move a card without a mouse?
Tab to the grip at the start of a card, named "Move" with its title. Press Space or Enter to pick it up, the arrow keys to move it (left and right change column, and swap in right-to-left languages), Space or Enter to drop it and Escape to put it back. Every step is announced in the status line.
Why is there a menu as well as the grip?
Dragging needs a held pointer and a path, which not everyone has, so each card also has a "More actions" menu with a "Move to" choice for every column. Choosing one moves the card, puts focus on it in its new place and says so in the status line, and it obeys the same rule as a drag.
What stays in the demo, and is this advice?
It is not advice: every name and amount is made up, the block says so, and nothing is bought, sold or saved. Moves live in the component's state, and a reload or Reset restores the board. To use real holdings, load them from your own data and call your API from put.