shadcn.io is not affiliated with official shadcn/ui
Order History Storefront Block for Svelte
A shopper's past orders as a Buy again list: a status filter with counts, a search over order numbers and items, orders that open in place to drawn lines, and Buy again on each line or the whole order.
Installation
Overview
Let shoppers buy what they liked again, with this order history for Svelte with Ark UI. A header names the page and the shop, Upland Provisions, a country grocer. In a hairline frame with a plus mark on each corner, a toolbar band holds a Segment Group that filters to All, Delivered, Shipped or Processing, each with its count, and an Input Group that searches order numbers and item names. The stage under it is a fixed-height band whose list scrolls inside it: each order is a row with its number, a typed date, an outline Badge for its status, its total and a chevron, and a Collapsible opens it in place to its lines, each with a drawn thumbnail, the price and a Buy again button, plus Buy all again for the order. The foot says "Showing 3 of 8 orders", or what the last button did, and keeps a bag count that only exists on the page. A filter or search with no match shows an Empty state in the same stage. It's built from Segment Group, Input Group, Collapsible, Badge, Button, Empty and Guides, with a CSS entrance only. For an account area, a grocery or repeat-purchase shop.
FAQ
How do I fill it with my own orders?
Edit ORDERS: each has an id, an ISO placed date, a status (delivered, shipped or processing), an updated date for when it shipped or arrived, a delivery charge in cents and its lines. A line has a name, a variant, a qty and a unit price in whole cents. Totals and the item counts are worked out from the lines, never typed. Dates are formatted from the ISO string without Intl, so the server and the browser agree.
What stays local, and how do I make Buy again real?
The bag is a number held in the block: Buy again adds the line's quantity and Buy all again adds every line of the order, and the status line says "in this demo". To make it real, replace buy and buyAll with a call that adds the product ids to the visitor's cart and returns the new count. No name, address or card is shown anywhere, and nothing is ordered.
How do the filter and the search combine?
Both apply at once: the filter keeps the orders with a status, and the search keeps those whose number or any item name contains what you typed, ignoring case. The counts on the segments are the whole history's, so they do not move as you type. The list scrolls inside a stage of fixed height, so filtering never changes the size of the panel.
How do the rows open?
Each row is one button that names the order, its date, status and total, and opens a region with its lines. Several can be open at once, and the first order opens on load. Closed lines are inert, so Tab skips them.
Is it accessible?
The filter is a named group of radio-style buttons, the search has a label, the stage is a focusable scroll region, and each Buy again button names its item for a screen reader since many rows share the same words. Status is written out as well as drawn, and the foot is a polite live region present from the start.