shadcn.io is not affiliated with official shadcn/ui
Linked Records Popover CRUD Block for Ark UI
A CRM deal page with its facts in a side cell and two bands, People and Documents, where a popover searches the unlinked records, asks a person's role in the deal, and each link can be relabelled, unlinked and undone.
Installation
Overview
Link people and documents to a record and say what each person is to it, with these linked records for React with Ark UI. It is the deal page of Joinhurst, a CRM, for "Marlinspike renewal": a hairline frame with a plus mark on each corner that holds the deal's facts in a side cell (stage, value, owner, the close date counted from the as-of day, and who the decision maker is, worked out from the links) and two bands at the start, People and Documents, each a list of linked records in a frame of fixed height. "Link a person" opens a Popover with a search Input over the people not linked yet and a Listbox ("5 match"); choosing one asks what they are to the deal in the same popover, a Native Select with Decision maker, Billing and Technical, and Link, the only Shine Button, adds the row with an Avatar. Each link's role is a select that changes at once, and documents link without a role. Unlink leaves "Unlinked Rohan Ashdene." in the foot beside an Undo. Emptying a band shows an Empty state without the frame changing height. For CRMs, project records and any thing that points at other things.
FAQ
What stops a person being linked twice?
The popover only lists people who are not linked, so a linked person is not offered. Unlinking puts them back in the list, and when everyone is linked the list says so instead of showing nothing. The same holds for documents. The counts in the band headings, the side cell and the foot's idle sentence are worked out from the links, so nothing is typed twice.
How do I change what a person is to the deal?
Each linked person has a select named for them, "Role of Teodora Brandvik", and choosing another role applies at once and says so in the foot ("Teodora Brandvik is now Billing."). Link a second decision maker and the side cell names the first one in the list. Changing a role is undoable like any other change.
What does Undo restore?
Both lists as they were before the last change: a link, an unlink or a role change. It undoes one change only; any new change replaces it, and nothing times out. Focus goes to the changed row after a link, and to the neighbouring row after an unlink, or to the frame when it is empty.
Why does the popover hold two steps in one place?
So it never changes size. The search and the list are one step and the role question is the other, drawn in the same cell with the inactive step hidden and inert, which keeps the popover the same height and keeps focus on a real control: the search field first, then the role select after you choose someone. Back returns to the search.
What stays local, and how do I wire a real link?
Eight people and six documents are typed in PEOPLE and DOCS, and the links live in this tab; a reload brings the originals back and nothing is sent. In your app load the unlinked records from a search endpoint, post the link in linkPerson with its role, and make Undo call the unlink or restore endpoint.
Is it accessible from the keyboard?
Yes. The popover opens from a named button, focus starts in the search field, the arrow keys move through the list and Enter picks, and Escape closes it and returns focus to the button. Every unlink button and role select is named for its record, the two list frames scroll and are reachable by keyboard, and the foot is the one polite status.