Skip to content

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

Free

Sheet with Sticky Header and Footer for React

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

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 React, Base UI does not write those product sections.

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 />}>View Details</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Product Information</SheetTitle>
      <SheetDescription>
        Detailed product specifications and features
      </SheetDescription>
    </SheetHeader>
    <Separator />
    <div className="flex-1 overflow-y-auto p-4">
      <div className="flex flex-col gap-4">
        <section>
          <h4 className="mb-2 font-semibold text-sm">Description</h4>
          <p className="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 className="mb-2 font-semibold text-sm">Specifications</h4>
          <ul className="grid gap-1 text-muted-foreground text-sm">
            {SPECIFICATIONS.map((specification) => (
              <li key={specification}>{specification}</li>
            ))}
          </ul>
        </section>
        <section>
          <h4 className="mb-2 font-semibold text-sm">Reviews</h4>
          <p className="text-muted-foreground text-sm">
{/* 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. The Button goes in the render prop of SheetTrigger, and the label stays its child.

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

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

Button

Sets 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