shadcn.io is not affiliated with official shadcn/ui
No Archived Items Empty State Block for Svelte
A storage list with two panes, Active and Archive: three sample rows each with an Archive button that moves the row across, a Restore that moves it back, live counts, and a drawn archive box with its lid ajar.
Installation
Overview
Show where archived things go before anything is archived, with this no archived items empty state for Svelte with Ark UI. It's the storage list of Boxroom, a storage app: a header over one framed panel with two panes side by side. Active lists three sample items, each with an outline Button named Archive; Archive starts empty, with a greyscale drawing of an archive box whose lid is ajar and the words "Nothing archived". Pressing Archive moves the row across and gives it a Badge reading Archived, Restore moves it back, and the counts in both headings change. The header holds the Shine Button, the only colored control, Archive the first item, which moves the first Active row. The frame is ruled by Guides, and everything moves with CSS only. For the archive or trash view of any list.
FAQ
What stays in the page, and how do I make it real?
Nothing is saved. The three items are typed in the file, the archive is a list of ids kept in the page's state, and a reload puts everything back in Active. To wire it for real, archive and restore with your API where the code says so, and fetch the two lists from your own data.
How does a row cross, and where does focus go?
The row leaves one list and joins the other, and the counts in both headings update. Focus goes to the next row's button in the pane it left, or to that pane's heading when it was the last one, so the keyboard never falls back to the top of the page. Rows stay in the order they were archived; Active keeps the original order.
Does the panel change height when a row moves?
No. Both panes have a fixed height with room for three rows, and an empty pane shows its message in the same box. The panes sit side by side from 768 px and stack on a phone.
What if every item is archived?
Active shows "Nothing active. Every item is archived. Restore one to see it here." and Archive the first item stays in the tab order, looks off, and says so when pressed.
Is it usable with a keyboard and a screen reader?
Every row button is named with its action and item, such as "Archive Spare cables", the two lists are named by their headings, and one polite status message says what moved and how many items each pane holds. The drawing is hidden from assistive technology.