shadcn.io is not affiliated with official shadcn/ui
No Pinned Items Empty State Block for Ark UI
A team workspace in a framed window with nothing pinned: the catalog sidebar with a dashed Pinned group above All items, a pin toggle on every row, a limit of three, and a pinboard of three dashed slots that fill in the order pinned.
Installation
Overview
Show where pinned things will live before anything is pinned, with this no pinned items empty state for React with Ark UI. A hairline frame with a plus mark on each corner holds a window of fixed height for Corkley, a team workspace: the catalog Sidebar with a dashed "Nothing pinned yet" in a Pinned group above the All items group, which collapses to an icon rail with tooltips and is a sheet on a phone, and a page with a top bar and the Shine Button, the only colored control, Pin the first item. Each item has a pin Toggle. Pinning moves an item up into Pinned, in the order pinned, and the page draws a pinboard of three dashed slots that fill with the pinned names, over the chosen item's details. The limit is three; a fourth is refused in words, "Pin limit is 3. Unpin one first." The frame is ruled by Guides, and everything moves with CSS only. For the pinned section of any workspace, mail or notes app.
FAQ
What stays in the page, and how do I make it real?
Nothing is saved. The six items are typed in the file, the pins are a list of ids kept in the page's state, and a reload clears them. To wire it for real, save each pin with your API where the code says so, load the saved ids when the workspace opens, and enforce the limit on the server too.
What happens at the limit?
With three pinned, pressing a fourth pin leaves its toggle off and the status line says "Pin limit is 3. Unpin one first."; the pinboard caption says the same. Pin the first item does the same, and with every item pinned it says so instead. Unpinning one frees a slot.
Where does focus go when a row moves?
A pinned row leaves All items and joins Pinned, so its toggle is a new element; focus is handed to it in its new place, so a keyboard user can press it again to undo. The Pin the first item button keeps focus where it is.
Does the window change size when something is pinned?
No. The window is fixed in height and only the rail and the page area scroll. The dashed placeholder in the Pinned group gives way to the first row, and the pinboard has three fixed slots, empty or filled.
Is it usable with a keyboard and a screen reader?
Tab runs through the rail, where each row is a link with a pin toggle named "Pin Q4 roadmap", then the top bar and the page. A pinned link is named "Q4 roadmap, pinned", the current one has aria-current, and one polite status foot says what changed and "2 of 3 pinned". On a phone the rail is a sheet opened from the top bar.