shadcn.io is an independent project built on shadcn/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 Svelte, Ark UI does not add the item to a cart.
Installation
Anatomy
Usage
<Sheet><SheetTrigger>{#snippet asChild(props)}<Button {...props()} variant="outline">View Details</Button>{/snippet}</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">{#each FEATURES as feature (feature)}<li>{feature}</li>{/each}</ul></div><Button class="w-full">Add to Cart</Button></div></SheetContent></Sheet>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 read details.open in onOpenChange.
API Reference
Sheet
No extra props in this demo. The rest is on the Sheet page.
Button
Sets props and variant="outline". The rest is on the Button page.
Badge
No extra props in this demo. The rest is on the Badge page.
