shadcn.io is not affiliated with official shadcn/ui
No Bookmarks Empty State Block for React
A read-later tool's Bookmarks popover drawn open under an article page before a link is saved: a link field that shows the host and path it reads, a Save bookmark button, a Sample link button, and a list that keeps three.
Installation
Overview
Show the empty Bookmarks list of a read-later tool as the popover it lives in, with this no bookmarks empty state for React with Base UI. The host is Ribboncase, a read-later tool: its header holds the real Bookmarks button, a ribbon with the count, and under it a stage draws an article page, a top bar with an address pill and a twin of that button over a headline and lines of text. Drawn open in place under the twin is the Popover card: a Field with an Input for a link, a line that says the host and path read from what is pasted, the Shine Button, the only colored control, Save bookmark, a Sample link button that fills the field with the next typed link, and under them a list that is empty at first, with a ribbon hanging from a book drawn dashed. Saving adds the link to the top, the list keeps three, a link saved twice is refused, and Remove takes one off. Titles are not fetched: a row shows the host and the path. 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 host and the path of each link and nothing else, a reload empties it and Start over empties it without one. No page is fetched, so there is no title, no image and no check that the link works. To wire it for real, save the link with your API where the code says so and fetch the title on the server, never from the browser.
What does the card read from a pasted link?
Its host and its path, with the query and the fragment dropped: "https://notes.example.net/2026/ribbons?ref=feed" is saved as notes.example.net/2026/ribbons. A link without a scheme is read as https, and anything that has no dot in its host, or is not a web link, is refused in words and the field takes focus. Both parts are shown left to right in any language.
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 Bookmarks 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 saved in place is there in the real card.
Does the card change size when the first link is saved?
No. The empty message and the list share one box of a fixed height, and the line under the field keeps two lines of room, so the card and the stage keep their size. The twin of the button in the drawing gets a dot once a link is saved.
Is it usable with a keyboard and a screen reader?
The Bookmarks button is named with its count, such as "Bookmarks, 2 links". In the card Tab reaches the field, Save bookmark, Sample link and the Remove buttons, each named with the link it removes; Enter in the field saves. A polite status line says what was saved or removed and how many bookmarks there are, and after a save focus returns to the field. The drawings are hidden from assistive technology.