shadcn.io is not affiliated with official shadcn/ui
Sheet examples · Details
Order Details Sheet for React
A right-side sheet with an order's status, items and totals, split by separators, and a Track Shipment button.
An order summary that slides in from the right: the order number and date in the header, a status Badge, the items, then the subtotal, shipping and total. Separator lines split the three parts, and Track Shipment sits at the bottom.
Preview
Installation
FAQ
How is the order laid out?
Status with a Shipped badge, a separator, the Items heading with two lines, another separator, then Subtotal, Shipping and a bold Total. Track Shipment closes the column.
How do I show other statuses?
Change the badge's text and variant: secondary for Shipped here, outline for Pending, destructive for Cancelled. Keep the word in the badge so the status isn't color alone.
Are the totals calculated?
No, they're written out: $89.97, $5.00 and $94.97. Compute them from your order data, and format them with Intl.NumberFormat for the shopper's currency.
Where does Track Shipment go?
Nowhere yet: it's an outline Button with no handler. Render it as a link to the carrier's tracking page, opening in a new tab.
Related
- Product Details SheetA right-side sheet with a product image
- User Profile View SheetA right-side sheet showing a user's
- Badge with Text (Standard)A default badge with a short label for a
- Standard CardA basic card with a title, a description
- Standard DialogA share dialog with a read-only link, a
- Article Preview SheetA right-side sheet previewing an article