shadcn.io is not affiliated with official shadcn/ui
Bookmark Manager CRUD Block for Vue
A reading list where a pasted address becomes a bookmark: the URL is checked, a repeat says when it was saved, the title is built from the address and renames in place, the folder changes at once, and Remove offers Undo.
Installation
Overview
Turn a pasted link into a saved bookmark that people can tidy afterwards, with this reading list for Vue with Ark UI. A hairline frame with a plus mark on each corner holds a quick line, an Input where an address and Enter save a link, and one frame of fixed height that scrolls inside itself. The address is read with the browser's own URL parser: a line that is not a web address is refused with its reason under the field, a link that is already in the list says "Already saved on 3 Oct", and a good one lands at the head of the list marked New with a title built from the address, so docs.example.dev/guide/forms becomes "Forms, docs.example.dev". Each row shows the host in text, renames its title in place with an Editable (click or Enter edits, Enter saves, Escape cancels), moves to Reading, Reference or Later the moment a Native Select changes, and has a Remove that leaves "Removed Forms." in the foot beside an Undo. Add is the only Shine Button, the bands are ruled by Guides, and removing the last link shows an Empty state without the frame changing height. For reading lists, link boards, research folders and any collection of references.
FAQ
How do I fill it with my own links?
Edit BOOKMARKS. Each has an id, a key (the address without its scheme, www or trailing slash), a title, a folder of reading, reference or later, and a saved date as an ISO string. The host shown under a title is read from the key, and the saved date is formatted from the string, so nothing is typed twice. New ids come from a counter held in state, never from the clock.
How is a pasted address checked?
keyOf adds https:// when the text has no scheme, hands it to new URL, and accepts only http and https addresses whose host contains a dot and whose text holds no spaces. The key it keeps drops the scheme, a leading www and a trailing slash, so https://www.docs.example.dev/guide/forms/ and docs.example.dev/guide/forms count as the same link and the second paste says when the first was saved. The check is local: nothing is fetched, so the title comes from the address, not from the page.
What happens when I rename a title?
The title is an Editable: click it or press its pencil to edit, Enter or the check saves, Escape or the cross puts the old title back. An empty title is refused, with the reason in a slot under the row that is always there so the list never changes height, and Enter on a refused title keeps the saved one and says why in the polite line.
What does Undo restore?
The last removal only. Removing a bookmark stores the list as it was; Undo puts it back and focuses the restored row. Adding, renaming or moving a link to another folder replaces that Undo, so it never undoes something older than what you see. Nothing times out.
What stays local, and how do I wire a real save?
The bookmarks live in state in this tab and a reload brings the original six back; nothing is sent and no page is fetched. In your app call your API in add, rename, refile and remove, update the list from the response, and fetch the real page title on the server to replace the one built from the address. Keep Undo as an optimistic step that calls your restore endpoint.
How does it look on a phone?
Each row stacks: the title and its pencil on the first line, then the host and date on the left and the folder select on the right, wrapping under each other if they must. The quick line and its Add button stay on the first screen and the frame still scrolls inside itself, so the page stays short.