Skip to content

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

Free

Sheet with Sticky Header and Footer for Solid

A View Details button opens Product Information, with Description, Specifications, and Reviews between fixed footer actions.

UI library: Ark UI

The title is Product Information. Description, Specifications, and Reviews stack in the middle. Add to Wishlist and Add to Cart stay at the bottom.

Use it when the actions must stay reachable on a long note. A short note can sit in a Dialog with no scroll. In Solid, Ark UI does not write those product sections.

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={props => <Button {...props()}>View Details</Button>} />
    <SheetContent>
      <SheetHeader>
        <SheetTitle>Product Information</SheetTitle>
        <SheetDescription>
          Detailed product specifications and features
        </SheetDescription>
      </SheetHeader>
      <Separator />
      <div class="flex-1 overflow-y-auto p-4">
        <div class="flex flex-col gap-4">
          <section>
            <h4 class="mb-2 font-semibold text-sm">Description</h4>
            <p class="text-muted-foreground text-sm">
              This is a comprehensive product description that includes all the
              important details about the product. It can be quite long and will
              scroll if needed.
            </p>
          </section>
          <section>
            <h4 class="mb-2 font-semibold text-sm">Specifications</h4>
            <ul class="grid gap-1 text-muted-foreground text-sm">
              {SPECIFICATIONS.map(specification => <li>{specification}</li>)}
            </ul>
          </section>
          <section>
            <h4 class="mb-2 font-semibold text-sm">Reviews</h4>
            <p class="text-muted-foreground text-sm">
              Customer reviews and ratings would be displayed here.
            </p>
{/* The rest of the file is under Installation. */}

FAQ

How do the header and footer stay in place?

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

What are the lines above and below the body?

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

What's in the scrolling body?

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

How does View Details open the sheet?

The button labeled View Details is the trigger, and its text is the accessible name. asChild on SheetTrigger receives props: spread them onto the button.

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

API Reference

Sheet

Sets asChild and props. The rest is on the Sheet page.

Button

Sets props and variant="outline". The rest is on the Button page.

Separator

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

All 29 sheet examples