shadcn.io is not affiliated with official shadcn/ui
Address Book CRUD Block for React Aria
A contacts window with a search, contacts under letter headings, a card that reads first and edits on purpose, a favourite star, and a Remove that offers Undo; on a phone it shows one pane at a time.
Installation
Overview
Let people look a contact up before they change it, with this address book window for React with React Aria. It is a framed window of fixed height inside a hairline frame with a plus mark on each corner: a top bar with the title and the one Shine Button, New contact; at the start a search Input and the contacts under sticky letter headings, a start bar marking the chosen one; at the end that contact's card. The card reads first, a list of phone, email, address and note beside a favourite star that takes effect at once, an Edit Button and Remove. Edit turns the same card into a form with Field labels, an Input per value and a Textarea: Save is a secondary button that waits until something changed, Cancel or Escape puts the card back, and New contact opens the same form blank. A name is required, an email must look like one and a phone is optional. Remove asks nothing; the foot says "Removed Ines Okafor." and offers Undo. The window never grows, and below the medium breakpoint it shows the list or the card with a Back button. For contact managers, member directories and any list where one record is read before it is edited.
FAQ
How do I fill it with my contacts?
Edit CONTACTS: each has an id, a name, a phone, an email, an address, a note and a favourite flag. The list is sorted by name and grouped by the first letter of each name, so the headings come from the data; there is no jump rail, which belongs to the tables blocks. New ids come from a counter in state.
Why does a contact open in read mode first?
Most visits only look something up, so the card is plain text until you choose Edit. Edit puts focus in the Name field; Save is quiet and refuses with "No changes to save" until a value differs from the saved one; Cancel and Escape return to the card and focus Edit. Choosing another contact or going Back while a form has unsaved changes is refused with a polite message instead of discarding them.
What is checked when I save?
The name can't be empty, an email, when given, needs a name, an at sign and a dot-separated domain, and a phone, when given, needs digits, spaces or a leading plus. A failed save shows the reason under each field in a slot that is always there, focuses the first one and says how many fields need fixing. The note stops at 120 characters, with a count.
Why does Remove ask nothing?
Because it can be undone. Removing a contact stores the list as it was; the foot of the window says what went and Undo puts it back and selects it. The list then moves to the next contact, or the empty state appears when it was the last. Any other change replaces that Undo.
What stays local, and how do I wire a real save?
Contacts live in state in this tab and a reload restores the ten shown; nothing is stored or sent. In your app post the form in save, show server refusals in the same reason slots, and call your delete endpoint in remove before keeping the Undo as a restore request. The star is a toggle that should be sent as it is pressed.
How does the window behave on a phone?
It keeps its height and shows one pane at a time: the list first, then the card when you choose a contact, with a Back to contacts button that returns focus to the row you left. The top bar keeps the title and New contact, and the card's heading takes focus when the list hides.