shadcn.io is not affiliated with official shadcn/ui
No Products Empty State Block for Solid
A full-height first-product screen for a product catalog: a name, a price in dollars and a Track inventory switch, with a drawn isometric shipping box whose label reads the name as you type and turns solid when the product is added.
Installation
Overview
Turn a blank catalog into the first product, with this no products empty state for Solid with Ark UI. It's the first-product page of Merchwick, a product catalog: the page's two side rails run its full height and one band crosses the screen between two rules with a plus mark where each meets a rail. At the start of the band sit the heading, a Field with an Input for the name, a Number Input for the price in whole dollars, and a Switch named Track inventory. The Shine Button, the only colored control, adds the product. At the end a greyscale drawing of an isometric shipping box stands where a product's mark would: its right face carries a label that reads the name as you type, and the whole box is dashed because nothing is added. Adding the product turns the box solid and taped, puts the price on the label, draws a barcode on the left face when inventory is tracked, and swaps the form for the result in the same space. The band is ruled by Guides, and everything moves with CSS only. For a first-run screen in any store, marketplace or inventory tool.
FAQ
What stays in the page, and how do I make it real?
Nothing leaves the page. The product is a name and a number kept in the page's state, and the result says "Added in this demo, so nothing was saved." To wire it for real, send the name, the price and the inventory flag to your API where the code says so, and take prices in the smallest currency unit if your store needs cents.
How does the box take the name?
The label is an HTML box laid over the right face of the drawing, skewed to match it, because words are never svg text. It shows the name as you type it, "Product name" while the field is empty, and the price once the product is added. It is drawn for the eye only and hidden from assistive technology; the field and the status message carry the same words.
What does the price field accept?
Whole dollars from 1 to 9999. A value outside the range is set to the nearest end when you leave the field, and the status message says so. Digits typed in another numbering system, for instance Arabic-Indic, are read as ordinary digits. Pressing Add product with an empty name or a price out of range marks that field, says why, and moves focus to it.
Why does Add product look quiet while the name is empty?
A button that is simply disabled can't explain itself, so this one stays in the tab order and the hint under the name says "Type a name to see it on the box." Pressing it anyway gives the problem in words and focus goes to the field. Once there is a name the button looks and works as usual.