shadcn.io is not affiliated with official shadcn/ui
Patent Tracker Kanban Block for React Aria
A four-column patent docket (Invention, Filing, Examination, Granted) of nine matters with a jurisdiction chip and a deadline word from a fixed date, where a patent is granted only out of Examination.
Installation
Overview
Watch every filing deadline with this patent docket for React with React Aria. A hairline frame with a plus mark on each corner holds four columns that share their lines (Invention, Filing, Examination and Granted) and nine matters. Each card shows the title, a jurisdiction chip in an outline Badge (US, EP or JP, spelled out for a screen reader), the docket number in mono, always read left to right, and a deadline word worked out from a fixed date: overdue by so many days, due in so many days, or a date. Every column head counts its matters and those due within thirty days, and the sentence under the heading is worked out from the cards. One rule guards the board: a patent is granted only out of Examination, and the refusal says which stage the matter is in. 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 docket. The frame is ruled by Guides. On a phone the columns scroll sideways in one named region. For IP teams, inventors and any docket that runs on dates.
FAQ
How do I fill it with my own matters?
Edit COLUMNS and START. A matter has an id, the column it starts in, a title, a docket number, a region (US, EP or JP) and the next deadline as an ISO date. The deadline words and counts are calculated from them.
Where does
From the constant AS_OF, a fixed date, never the clock, so the board reads the same on the server and in the browser. For a real docket, pass today's date in as a prop.
How does the Granted rule work?
refusalOf returns a reason when a matter going to Granted is not coming from Examination. All routes ask it, and the status line names the stage the matter is in. Add rules for the other stages in the same function.
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. React Aria's menu is a group of selectable items, so the column is chosen by selection rather than by a radio item.
What stays in the demo, and how do I save the moves?
Everything: moves live in the component's state, no fee or filing is recorded and nothing is sent to an office, and a reload or Reset restores the docket. To save for real, call your API from put. The inventions are made up; the deadlines are examples, not legal advice.
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 deadline word stays on one row under the chip. 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.