shadcn.io is not affiliated with official shadcn/ui
No Collections Empty State Block for Vue
A store collections list before its first collection: a name, a Manual or Automatic choice, a Price under slider with a live match count over eight products, and six preview slots that fill with product silhouettes.
Installation
Overview
Turn a blank collections list into the first collection, with this no collections empty state for Vue with Ark UI. It's the collections page of Shelfside, a store collections tool: a header over one framed panel with two cells. At the start sit a Field with an Input for the name, a Segment Group that chooses Manual or Automatic and, for Automatic, a Price under Slider with a live count over eight typed products: "4 of 8 products match". At the end a preview draws six dashed slots that fill with product silhouettes as the rule lets products in, with "+ 2 more" past six. The action foot holds the Shine Button, the only colored control, Create collection, and a Start over. The frame is ruled by Guides, and everything moves with CSS only. For the first-run screen of any catalog, library or playlist tool.
FAQ
What stays in the page, and how do I make it real?
Nothing is created and no product is moved. The eight products are typed in the file with a price each, the match count is worked out from them as the slider moves, and Create collection only shows a result line. To wire it for real, save the name and the rule with your API where the code says so, and run the rule on your catalog on the server, so a product that changes price joins or leaves the collection by itself.
How does the rule work?
Automatic keeps the products whose price is under the slider's value, in catalog order; the slider goes from $10 to $100 in steps of $5 and starts at $50. The count under it and the preview update as you drag, and the status line speaks the result when you let go, not on every step. Manual has no rule: the slots stay dashed and a sentence says the products are added one by one later.
What are the six slots?
A drawn preview of the collection's shelf. Each filled slot shows a one-outline silhouette of the product (a bag, a box or a cup) and its name; empty ones are dashed. If more than six products match, the heading of the preview says how many more. The list is named "Products in the collection" for a screen reader, and an empty slot reads "Empty slot".
Does the panel change height when I switch mode or move the slider?
No. The rule cell holds the Automatic and the Manual versions in one place, the inactive one unseen and inert, the slots are the same size filled or empty, and the foot keeps its place. On a phone the preview stacks under the form and the foot is pinned to the bottom of the screen.
Is it usable with a keyboard and a screen reader?
Tab runs through the name, the Manual and Automatic choice (arrow keys move between them), the slider (arrow keys change the value by $5), Create collection and Start over. A name is required, and without one the field says so and takes focus. One polite status message in the foot says what changed.