shadcn.io is not affiliated with official shadcn/ui
Asset Manager CRUD Block for React Aria
A brand team's asset library as drawn greyscale tiles with a type and where each is used, a dashed tile that adds an asset in place, a side sheet for the name, tags and description, and a Remove that leaves the tile in place with an Undo.
Installation
Overview
Keep a brand team's logos, icons and documents in one place, with this asset manager for React with React Aria. A hairline frame with a plus mark on each corner holds one frame of fixed height that scrolls inside itself, with eight assets as tiles in a hairline grid, two across and four from the large breakpoint. Each tile has a drawn greyscale plate (a logo, an icon, a pattern, a document or a grey ramp), the name, the type and "Used in 9 pages", a Details button and a Delete. The last cell is a dashed "Add an asset" tile that turns, in place, into a name Field and a type Native Select; nothing is uploaded, since an asset is a name and a type here. Add asset is the only Shine Button on the page; in the sheet, Save details waits until something changed. Details opens a Sheet from the end edge, in either direction, with the name, the tags in a Tags Input and a description in a Textarea. Delete leaves the tile in place as "Removed Wordmark" with its own Undo, so nothing shifts, and the foot offers the same Undo. The frame is ruled by Guides and an empty library shows an Empty state. For brand portals, design systems and any library you tag and keep tidy.
FAQ
How do I fill it with my assets?
Edit ASSETS. Each has an id, a name, a kind of logo, icon, pattern, document or greyscale, tags, a note and how many pages it is used in. The tiles, the counts and the last row's width are all derived from that list; a tile's plate comes from its kind, so add a new kind by adding a Plate drawing.
Are the plates images?
No. They are small SVG drawings in the foreground colour at different strengths, hidden from screen readers; the name and type are in text. They follow light and dark and need no files. In your app, replace Plate with the asset's preview image and keep its alt text.
How does the details sheet behave?
It opens from the end edge in either text direction, takes focus in the name field and returns it to the tile's Details button when it closes. Save details is aria-disabled while nothing changed, a name that is empty, over 28 characters or already used is refused with its reason, and tags stop at five with no repeats. Closing the sheet without saving discards the edits; the description says so.
Why does a deleted tile stay in place?
So the grid never shifts under your pointer. The tile becomes a dashed box that says "Removed Wordmark" with an Undo, the count drops, and the foot offers the same Undo. The asset is only hidden in this demo; in your app delete it on the server and drop the tile when the call succeeds.