Skip to content

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

Free

Product Details Sheet for Vue

A View Details button opens Premium Headphones at $299.99, marked In Stock, with four features and Add to Cart.

UI library: Ark UI

The sheet shows a headphones image, an In Stock badge, and $299.99. Four features are listed under that, and Add to Cart sits at the bottom.

Use it so shoppers can check a product without leaving the grid. A longer spec belongs on its own page, or in a Dialog if it must stay centered. In Vue, Ark UI does not add the item to a cart.

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 Details</Button>
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Premium Headphones</SheetTitle>
      <SheetDescription>
        High-quality wireless headphones with noise cancellation
      </SheetDescription>
    </SheetHeader>
    <div class="flex flex-col gap-4 p-4">
      <img
        alt="Premium Headphones"
        class="w-full rounded-md object-cover"
        :height="300"
        src="https://placehold.co/400x300/6366f1/ffffff?text=Premium+Headphones"
        :width="400"
      />
      <div class="flex items-center gap-2">
        <Badge>In Stock</Badge>
        <span class="font-bold text-2xl">$299.99</span>
      </div>
      <div class="flex flex-col gap-2">
        <h4 class="font-semibold text-sm">Features</h4>
        <ul class="grid list-inside list-disc gap-1 text-muted-foreground text-sm">
          <li v-for="feature in FEATURES" :key="feature">{{ feature }}</li>
        </ul>
      </div>
      <Button class="w-full">Add to Cart</Button>
    </div>
<!-- The rest of the file is under Installation. -->

FAQ

What does the product sheet show?

Premium Headphones as the title, a one-line description, a 400 by 300 placeholder image, the In Stock badge, the price $299.99, four features and a full-width Add to Cart button.

How do I use a real product photo?

Swap the src for your image and keep alt, width and height so the panel doesn't jump when it loads. The image is w-full rounded-md object-cover, so it fills the panel's width.

How do I show out of stock?

Change the badge to Out of Stock with variant="secondary" or outline, and disable Add to Cart. The word carries the state, so it doesn't rely on color.

Does Add to Cart close the sheet?

No, it's a plain Button. To close after adding, control the open state: Pass open to Sheet and listen to @open-change, which receives details.open.

How does View Details open the sheet?

The outline button labeled View Details is the trigger, and its text is the accessible name. SheetTrigger takes asChild and merges onto the one Button inside it.

What does the product 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. The product name is the title, and High-quality wireless headphones with noise cancellation is 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

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

All 29 sheet examples