Component · 8+ variants

React Sheet Component

Modal drawer that slides from any edge. Built on Radix Dialog: focus trap, escape-to-close, scroll lock all handled. Pick the visual that matches your product.

Install (any variant)

npx shadcn@latest add https://better-design.com/registry/apple/sheet.json

Replace apple with any design system slug. Every variant ships from the same registry.

Design system variants

Apple

SF Pro, soft #f5f5f7 surface: premium iOS feel

Read full guide

Linear

Sharp dark, 8px radius, purple accent

View design system

Vercel

Pure black, Geist, minimal

View design system

Notion

Light minimal, system-ui

View design system

Stripe

Sohne, indigo accent

View design system

Supabase

Dark with green accent

View design system

Airbnb

Warm light, coral accent

View design system

Figma

Electric violet

View design system

Browse all 73 design systems

Why this sheet

•Radix Dialog under the hood: full a11y baked in
•Edge variants: top / right / bottom / left
•73 design-system variants: Apple soft premium, Linear sharp dark, Notion light minimal
•Ships as shadcn-compatible registry: `npx shadcn@latest add`

Usage

import {
  Sheet, SheetContent, SheetTrigger,
  SheetHeader, SheetTitle, SheetDescription,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";

export function SettingsSheet() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Open settings</Button>
      </SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Settings</SheetTitle>
          <SheetDescription>Manage your preferences.</SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  );
}

FAQ

What's this built on?

@radix-ui/react-dialog for accessibility, lucide-react for the close icon. Identical primitive stack to shadcn/ui's sheet: Better Design re-skins per design system.

Can I change the slide direction?

Yes. Pass `side="top" | "right" | "bottom" | "left"` on SheetContent. Bottom is common on iOS, right on macOS.

Is it free?

Yes. MIT-licensed shadcn-compatible registry items. Install via `npx shadcn@latest add`.

Related component pages

React Command Palette

/components/command-palette

React Sidebar Component

/components/sidebar

Apple-style Sheet

/components/apple-sheet