shadcn.io is not affiliated with official shadcn/ui
No Recent Items Empty State Block for Radix UI
A workspace's Recent popover drawn open under a top bar before anything has been opened: a clock face with a dashed hand, and a button that opens typed pages in turn, each pushed to the top of a list that keeps three.
Installation
Overview
Show the empty Recent list of a workspace as the popover it lives in, with this no recent items empty state for React with Radix UI. The host is Revisitly, a workspace: its header holds the real Recent button, a clock with the count, and under it a stage draws the workspace, a top bar with a twin of that button, a rail of four pages and a page of lines. Drawn open in place under the twin is the Popover card: a clock face with no hands, only a dashed one where the first will point, "Nothing opened yet" and the Shine Button, the only colored control, Open a sample page. Each press opens the next typed page and pushes it to the top of the list; the list keeps three, and a page opened again moves up instead of repeating. The clock gets solid hands set to the time of the latest open, and the rail outlines the page. The frame is ruled by Guides, and everything moves with CSS only. Shown open in place for the preview; in your app keep the Popover and drop the in-place copy.
FAQ
What stays in the page, and how do I make it real?
The list lives in the page's state: it holds the page, the time it was opened and nothing else, a reload empties it and Start over empties it without one. No page is opened and nothing is stored. To wire it for real, call your own history where the code says so (or read the visits your router already keeps), and render the list from that.
Which pages does the button open, and why only three?
The sample button walks a typed script: Q4 roadmap, Hiring plan, Launch checklist, then the roadmap again, then Standup notes, and round again. The list keeps the last three, newest first, so the fifth press pushes the oldest off. The roadmap opened a second time moves to the top rather than appearing twice, which is how a recent list should behave. Pressing a row in the list opens that page again and moves it up.
What is the in-place card, and what is the real Popover?
Shown open in place for the preview, so the block shows its content without a click: on load the card is drawn as a plain non-modal panel under the twin of the button. Pressing Recent opens the real non-modal Popover, where Escape closes it and focus goes back to the button, and the in-place copy stays closed until a reload. Both share one body and the page's state, so what was opened in place is there in the real card.
Does the card change size when the first page arrives?
No. The empty message and the list share one box of a fixed height, so the card, the button under it and the stage keep their size. The clock is part of the empty message, so it gives way to the list; it is also drawn solid, with hands, the moment a page exists.
Is it usable with a keyboard and a screen reader?
The Recent button is named with its count, such as Recent, 2 items. In the card Tab reaches the rows and the Open a sample page button; each row is named with its page and the time it was opened. A polite status line says what was opened and how many recent items there are, and pressing a row hands focus back to that row after it moves to the top. The drawings are hidden from assistive technology.