Skip to content

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

Free

Product Details Sheet for React

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

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 React, Base UI does not add the item to a cart.

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 Details
  </SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Premium Headphones</SheetTitle>
      <SheetDescription>
        High-quality wireless headphones with noise cancellation
      </SheetDescription>
    </SheetHeader>
    <div className="flex flex-col gap-4 p-4">
      <img
        alt="Premium Headphones"
        className="w-full rounded-md object-cover"
        height={300}
        src="https://placehold.co/400x300/6366f1/ffffff?text=Premium+Headphones"
        width={400}
      />
      <div className="flex items-center gap-2">
        <Badge>In Stock</Badge>
        <span className="font-bold text-2xl">$299.99</span>
      </div>
      <div className="flex flex-col gap-2">
        <h4 className="font-semibold text-sm">Features</h4>
        <ul className="grid list-inside list-disc gap-1 text-muted-foreground text-sm">
          {FEATURES.map((feature) => (
            <li key={feature}>{feature}</li>
          ))}
        </ul>
      </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; onOpenChange receives the next boolean.

How does View Details open the sheet?

The outline button labeled View Details 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 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

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

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

All 29 sheet examples