shadcn.io is not affiliated with official shadcn/ui
Client Directory CRUD Block for React Aria
A consultancy's client book in three bands, Prospects, Active and Past, with a quick line that adds a client on Enter, status segments that move it between bands, click-to-edit contact fields and a Remove that leaves an Undo.
Installation
Overview
Keep a book of clients that people can change without leaving it, with this client directory for React with React Aria. A hairline frame with a plus mark on each corner holds a quick line, an Input where a company name and Enter add a client at the head of Prospects with its card open, and one frame of fixed height that scrolls inside itself. In the frame, eight clients sit in three bands with their counts, each a Collapsible row: open it and a card shows a Segment Group that moves the client to Prospects, Active or Past (the counts and the polite line follow, and focus stays on the card), and company, contact and notes as Editable fields. Click or press Enter to edit, Enter saves and Escape cancels; an empty or duplicate company name is refused with its reason under the field. Remove takes the card out and the foot says "Removed Harrow and Finch" beside an Undo. Add is the only Shine Button, the bands are ruled by Guides, and emptying the book shows an Empty state without the frame changing height. For CRMs, client books, partner lists and any record that moves through stages.
FAQ
How do I fill it with my clients?
Edit CLIENTS. Each has an id, a company, a contact, notes and a status of prospect, active or past. The bands, their counts and the idle sentence are all derived from that list, so nothing is typed twice. New clients get their id from a counter held in state, never from the clock.
How does editing a field work, and what is refused?
Each value is an Editable: click it or press its pencil to edit, Enter or the check saves, Escape or the cross puts the old value back. The company name can't be empty and can't match another client's, ignoring case; the reason appears under the field in a slot that is always there, so the card never changes height, and Enter on a refused value keeps the saved one and says why in the polite line. Contact and notes are optional, and notes stop at 80 characters.
What happens when I change a client's status?
The client leaves its band and appears in the new one, in the same order as the list, the counts of both bands update and the polite line names the move. The card stays open and focus returns to the client's row, so a keyboard user does not lose their place. Prospects added with the quick line start in the first band.
What does Undo restore?
The last removal only. Removing a client stores the book as it was; Undo puts it back, opens no card, and focuses the restored row. Any other change, such as adding, moving or editing, 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 clients live in React state in this tab and a reload brings the original eight back; nothing is sent. In your app call your API in add, move, commit and remove, update the list from the response, and show a refusal from the server in the same reason slot the block already has. Keep the Undo as an optimistic step that calls your restore endpoint.
How does it look on a phone?
The bands stack as they do on a desktop and the frame still scrolls inside itself, so the page stays short. The segment group sits in a row that scrolls sideways if it must, and the card's fields stack their label over the value. The quick line and its Add button stay on the first screen.