Docs

Molecules

Sheet

Slide-over side drawer panel for secondary tasks and filters.

5 examplesOverlay ComponentReact 19 & Next.js 16Tailwind CSS v4
Install
pnpm add @quinkit/ui
Import
import { Sheet } from "@quinkit/ui";

Interactive Examples

Live previews · code · themes · viewport · dark mode

Mobile Navigation Sheet

A left-side sheet used as a mobile navigation drawer.

Mobile Navigation Sheet rendered preview

Form in a Sheet

Edit record details without leaving the page context.

Form in a Sheet rendered preview

All Placement Sides

Slide in from the top, right, bottom, or left.

All Placement Sides rendered preview

Shopping Cart Slide-Over

E-commerce order summary drawer with item breakdown.

Shopping Cart Slide-Over rendered preview

Overview

Sheet is an accessible slide-over drawer panel powered by Radix Dialog. It slides in from any screen edge (right, left, top, bottom) to surface detail views, mobile navigation menus, e-commerce cart summaries, or configuration forms without displacing the parent page context.

Usage Examples

### Slide-Over Panel

tsx
import { Button, Sheet, SheetContent, SheetHeader, SheetTitle, SheetDescription } from "@quinkit/ui";

export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open Sheet</Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Edit Profile Details</SheetTitle>
          <SheetDescription>Make changes to your user account profile here.</SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  );
}

Props

### SheetContent Props

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""right"Edge of the viewport the panel slides from.
showClosebooleantrueShow top-right dismiss button with Lucide icon.
classNamestringundefinedAdditional class names.

Accessibility Details

  • Focus trapped inside sheet panel while open.
  • Trapped focus restored to trigger element on close.
  • Escape key closes active sheet panel.

Accessibility & Keyboard

Sheet adheres to WAI-ARIA design patterns for accessible web components.

Keyboard Navigation

  • Tab / Shift + Tab — Focuses control and moves between interactive elements.
  • Space / Enter — Triggers action or toggles selection.
  • Escape — Closes open popovers, overlays, or dropdown menus.

ARIA Standards

  • Built with semantic HTML tags and explicit aria-* attributes.
  • Uses high-contrast focus rings (ring-ring) visible in both light & dark mode.
  • Supports screen readers with non-visual label fallbacks.

Registry Install

Add a shadcn-compatible bridge file to your project that re-exports from @quinkit/ui.

Registry
npx shadcn@latest add https://quinkit-ui.vercel.app/r/sheet.json