Skip to content

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

Free

Order Details Sheet for Vue

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

UI library: Ark UI

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 Vue, Ark UI does not add up the total.

Preview

Preview width

Installation

MCP · Pro
Make your AI a shadcn expert
Your agent installs components, builds pages and restyles your app from one prompt, in Claude Code, Cursor or VS Code.
Get MCPSee plans
Part of Pro

Anatomy

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

Usage

<Sheet>
  <SheetTrigger :asChild="true">
    <Button variant="outline">View Order</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Order #12345</SheetTitle>
      <SheetDescription>Placed on January 15, 2024</SheetDescription>
    </SheetHeader>
    <div class="flex flex-col gap-4 p-4">
      <div class="flex items-center justify-between">
        <span class="font-medium text-sm">Status</span>
        <Badge variant="secondary">Shipped</Badge>
      </div>
      <Separator />
      <div class="flex flex-col gap-3">
        <h4 class="font-semibold text-sm">Items</h4>
        <div v-for="item in ITEMS" class="flex justify-between text-sm" :key="item.name">
          <span>{{ item.name }}</span>
          <span>{{ item.price }}</span>
        </div>
      </div>
      <Separator />
      <div class="flex flex-col gap-2">
        <div class="flex justify-between text-sm">
          <span>Subtotal</span>
          <span>$89.97</span>
        </div>
        <div class="flex justify-between text-sm">
          <span>Shipping</span>
          <span>$5.00</span>
<!-- 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. SheetTrigger takes asChild and merges onto the one Button inside it.

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

Sets asChild. 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