Product Details Sheet for React

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.

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.

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.

No, it's a plain Button. To close after adding, control the open state: Pass open to Sheet; onOpenChange receives the next boolean.

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.

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.