shadcn.io is not affiliated with official shadcn/ui
Outlet Storefront Block for React Aria
A clearance table for a shoe shop: twelve drawn pairs with struck and clearance prices, the saving, the sizes still in stock as chips, a your-size filter, a sort and a final-sale rules popover.
Installation
Overview
Sell off last season's stock and make broken size runs easy to read, with this outlet table for React with React Aria. A header names Skylark Lane, a shop for last season's shoes, and holds a sort Native Select: Biggest saving, Lowest price or Fewest sizes left. A hairline frame with a plus mark on each corner opens with a toolbar: a Toggle Group of your size (All, then 37 to 44) and a Final sale rules Popover. Below it is a table of twelve drawn pairs with the old price struck, the clearance price, what you save in dollars and percent and the sizes still left as small Badge chips, the one you chose turning solid. Choosing a size keeps only the pairs that have it and counts them in the status line ("7 of 12 in size 41"); a size nobody has shows an Empty state with a way back. Pairs that cannot be returned carry a Final sale badge. The table keeps its height under every filter, and on a phone each pair becomes a short card. It's built from Native Select, Toggle Group, Popover, Badge, Empty, Button and Guides, with a CSS entrance only. For an outlet page, an end-of-season sale or a clearance rail.
FAQ
How do I fill it with my own stock?
Edit SHOES. Each has an id, a name, a short type, the clearance price (now) and the old price (was) in cents, the sizes still in stock, whether it is final sale and the kind of drawing. The saving, the percentage, the sort orders and the counts are worked out from those, and SIZES is the list of sizes in the toggle.
How does the size filter work?
It keeps the pairs whose sizes include the one you chose and says "7 of 12 in size 41". The size 37 has no pairs on purpose, so you can reach the empty state; its button shows all sizes again and puts focus back on the filter.
What does Final sale mean here?
It is the rule in the popover: those pairs cannot be returned or exchanged, and the rest can come back within 30 days. Change the wording to your own policy, and set final on the rows it covers.
Why does the table not jump when I filter?
An unseen copy of the full table sits in the same cell, so the frame always has the height of all twelve rows. The sort changes order only, and the live table starts at the top of the cell.
How does it look on a phone?
The table is replaced by a list of cards: the drawing and name, the prices and saving on one line and the size chips under them. The toolbar wraps and the size toggles wrap with it.
Is it accessible?
The table has a hidden caption, column headers and the shoe's name as each row's header; struck prices are announced as "Was" and the clearance price as "Now". The sort has a visible label, the size toggles are a named group and each chip list is named after its pair. Stock is shown by the chips and words, not colour. The status line is a polite live region present from load.