shadcn.io is not affiliated with official shadcn/ui
API Endpoint Tracker Kanban Block for React
A four-column registry of twelve API endpoints showing each method and path as code, who owns it and whether its docs are written, where nothing reaches Beta or Stable without docs.
Installation
Overview
Track an API from sketch to stable with this endpoint registry for React with Base UI. A hairline frame with a plus mark on each corner holds four columns that share their lines (Design, Development, Beta and Stable) and twelve endpoints. Each card names what the endpoint does, shows its method and path as code in a left-to-right box so a path reads the same in any language, names the owning team in an outline Badge, and says whether its docs are written; an endpoint without docs has a "Needs docs" Button that marks them written. Every column head counts its endpoints and how many need docs, and the sentence under the heading is worked out from the cards. A card moves three ways: drag it by its grip, press Space on the grip and use the arrow keys, or open its Dropdown Menu and choose a column under "Move to". One rule guards the board: nothing enters Beta or Stable without docs, and the refusal names the endpoint and says what to do. A polite status line in the foot reports each change, and Reset puts the registry back. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region with the next column showing. For API platforms, developer-relations teams and release planning.
FAQ
How do I fill it with my own endpoints?
Edit COLUMNS and START. A card has an id, the column it starts in, a title for what it does, a code such as POST /v2/charges, the owning team and docs, true when the reference is written. Nothing else needs editing: the counts, the head notes and the header sentence are calculated from the cards.
Why is the path in a left-to-right box?
Methods and paths are written the same way in every language, so each code carries dir="ltr" and wraps with break-all instead of overflowing a narrow column. The words around it still follow the page direction, and the counts in the column heads stay together.
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, 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. 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 and the current one ticked. Choosing one moves the card, puts focus on the card in its new place and says so in the status line.
How does the docs rule work, and how do I change it?
The rule is the function refusalOf, which gets the cards, the endpoint, the column it comes from and the column it is going to, and returns a reason or an empty string. The grip's drop, the keyboard steps and the menu all ask it, so no route gets around it. A refused move leaves the endpoint where it was and the status line says it needs docs; the button on the card is the way out. Replace the body with your own gate, such as a passing contract test.
What stays in the demo, and how do I save the changes?
Everything: the moves and the docs flags live in the component's state, nothing is sent anywhere, and a reload or Reset brings back the starting registry. To save for real, call your API from put (every finished move goes through it) and from act (the docs button), and update the cards from the response. The endpoints and teams are made up.
How does it work 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. 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. The status line is still read out to screen readers.