shadcn.io is not affiliated with official shadcn/ui
No Orders Empty State Block for Vue
A full-height orders screen for a shop builder: a drawn shop front with an awning whose sign flips from Closed to Open when you turn on the storefront switch, and a View storefront link that stays off until then.
Installation
Overview
Explain why a shop has no orders, and what to do about it, with this no orders empty state for Vue with Ark UI. It's the orders page of Shopwren, an online shop builder: 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. In the band a greyscale drawing of a shop front stands where a product's mark would: an awning, a window and a door with a sign that says Closed, all dashed. Under it come "No orders yet", one sentence, a Switch named Storefront is live and the Shine Button, the only colored control, View storefront, which is a link and stays off until the switch is on. Turning the switch on flips the sign to Open, turns the window and the door solid and changes the sentence; below sits one dashed row that shows what the first order will look like. The band is ruled by Guides, and everything moves with CSS only. For the orders page of any store, booking or checkout tool.
FAQ
What stays in the page, and how do I make it real?
Nothing is published and no link is followed. The switch is local state, the sign and the doors are a drawing that follows it, and the sample order, "Order #1001, 2 items, $48.00", is typed in the file. To wire it for real, publish the storefront from the switch's handler where the code says so, give View storefront your shop's address, and replace the dashed row with your latest order once one exists.
Why is View storefront a link, and why does it look off at first?
It goes to a page, so it is an anchor, styled as the Shine Button. While the storefront is closed it stays in the tab order with aria-disabled and says "Turn the storefront on first." when pressed, instead of being removed with no explanation. With the switch on, pressing it only says that opening the storefront is not connected in this demo; give it your real address and it navigates.
How does the sign change without moving anything?
The drawing is one svg with two layers for the window and the door: a dashed one fades out while a solid one fades in. The sign is a small HTML box over the drawing, because words are never svg text, and it keeps its size while its word and its border change. The heading and the sentence are held at the taller of their two versions, so the button and the rest of the band stay where they are.
Is it usable with a keyboard and a screen reader?
Tab goes to the switch, named Storefront is live, then to View storefront; Space flips the switch. One polite status message says "The storefront is live in this demo. Nothing was published." or that it is closed again. The drawing and its sign are hidden from assistive technology, because the switch and the sentence say the same things.