Sheet with Sticky Header and Footer for React

They don't need position: sticky. SheetContent is a flex column, and only the body between them scrolls, with flex-1 overflow-y-auto.

Two Separators, one after SheetHeader and one before SheetFooter. They show where the scrolling part starts and ends.

Three sections, Description, Specifications and Reviews, each with an h4 heading. Specifications is a list of four lines.

Nothing yet: Add to Wishlist (outline) and Add to Cart are plain Buttons. Wire them to your cart, and close the sheet by controlling its open state if adding should dismiss it: Pass open to Sheet; onOpenChange receives the next boolean.

The 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. It reads Product Information, with Detailed product specifications and features as the description.