Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Order Details Sheet for React

A right-side sheet for Order #12345, placed January 15, 2024, marked Shipped, totaling $94.97, with Track Shipment.

The title is Order #12345, placed on January 15, 2024. Status is a Shipped badge. Two line items lead to a subtotal of $89.97, shipping of $5.00, and a total of $94.97. Track Shipment is at the bottom.

Use it to inspect an order without leaving the list. A short summary can sit in a Dialog instead. In React, Base UI does not add up the total.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Sheet anatomy: content, close, title, description, footer

Usage

<Sheet>
  <SheetTrigger render={<Button variant="outline" />}>
    View Order
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Order #12345</SheetTitle>
      <SheetDescription>Placed on January 15, 2024</SheetDescription>
    </SheetHeader>
    <div className="flex flex-col gap-4 p-4">
      <div className="flex items-center justify-between">
        <span className="font-medium text-sm">Status</span>
        <Badge variant="secondary">Shipped</Badge>
      </div>
      <Separator />
      <div className="flex flex-col gap-3">
        <h4 className="font-semibold text-sm">Items</h4>
        {ITEMS.map((item) => (
          <div className="flex justify-between text-sm" key={item.name}>
            <span>{item.name}</span>
            <span>{item.price}</span>
          </div>
        ))}
      </div>
      <Separator />
      <div className="flex flex-col gap-2">
        <div className="flex justify-between text-sm">
          <span>Subtotal</span>
          <span>$89.97</span>
        </div>
        <div className="flex justify-between text-sm">
{/* The rest of the file is under 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.

How does View Order open the sheet?

The outline button labeled View Order is the trigger, and its text is the accessible name. The Button goes in the render prop of SheetTrigger, and the label stays its child.

What does the order sheet announce?

SheetTitle names the dialog for assistive tech, so every sheet renders one; hide it with sr-only when the design has no visible heading. It reads Order #12345, with Placed on January 15, 2024 as the description.

API Reference

Sheet

No extra props in this demo. The rest is on the Sheet page.

Button

Sets variant="outline". The rest is on the Button page.

Badge

Sets variant="secondary". The rest is on the Badge page.

Separator

No extra props in this demo. The rest is on the Separator page.

All 29 sheet examples