Skip to content
shadcn.io

shadcn.io is not affiliated with official shadcn/ui

CRUD blocks

Pro

View Details CRUD Block for React Aria

A Products list with a View button on each row and the sheet that opens one product's page: an Overview that turns into fields on Edit, an Activity list, Related records and Settings with an inline archive confirm, all updating the host row.

Framework
UI library

Preview

Preview width

Installation

Part of Pro
Pro unlocks the code and one-line install of every Pro button and text effect, plus the MCP for your AI editor.
Get ProSign in
Have Pro already? Sign in to open it.Opens here as soon as you're Pro.

Overview

Read a record before changing it, with this view-details sheet for React with React Aria. The host is a Products list of Detailmoor, a catalogue tool, with a View button on every row and a View details button in the header. The Sheet opens at the end of the layout on Overview, a list of facts, with Tabs for Overview, Activity, Related and Settings. Edit turns the Overview into fields (Input, Native Select) in the same space, Save changes is the only Shine Button, and a saved edit updates the host row and adds a line to Activity. Related lists three linked records. Settings archives the product after a confirm inside the tab, not a second dialog, marks the host row Archived, and offers Undo. Shown open in place on load, over the list under a soft scrim, and a real sheet when you press a View. The bands are ruled by Guides.

FAQ

Which part is only the preview's?

The sheet drawn open in place on load, with its scrim and Escape listener. Pressing View details or a row's View opens the real Sheet with a focus trap and Escape, and the in-place copy stays closed until a reload. In your app keep the Sheet and drop the in-place copy.

How do I fill it with my products?

Edit the PRODUCT_LINES, ENTRY_LINES and LINK_LINES strings: one pipe-separated line per product, activity entry or linked record. They are parsed once at module scope into typed records.

What does Edit refuse?

An empty name, one over 32 characters or one another product has, and a price that is not a whole number from 1 to 9999. The reasons show under the fields in reserved slots, and focus goes to the first one. SKU and stock are read-only here.

How does archiving work?

Archive this product asks in place, with Keep it and Archive product. Confirming marks the host row Archived and shows an Undo in Settings that restores the previous status. The tab keeps its height throughout.

What stays local?

Everything: products, activity and status live in React state in this tab, activity times come from a typed list and the date is fixed. Wire save, archive and restore to your API and read the saved record and the new activity line from the response.

How does it look on a phone?

The in-place sheet docks to the foot of the stage and the real one is the catalog's sheet; the tab strip stays one line and the panels keep the same height, so switching tabs or entering Edit never moves the buttons.

All 100 crud blocks