Apple · Sheet

React Sheet: Apple-style

Part of Better Design's React component library. The soft, premium, slide-from-edge sheet pattern Apple uses across iOS and macOS modals: built on Radix Dialog, ships as a shadcn-compatible registry item.

Install

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

Lands in components/ui/sheet.tsx. Fully editable source, no SDK lock-in.

Live preview

Open the full Apple showcase

Why this sheet

•SF Pro typography, #f5f5f7 surface, pill-rounded controls: Apple visual signature
•Radix Dialog under the hood: focus trap, escape-to-close, scroll lock all handled
•Edge variants: top / right / bottom / left: pick per use case
•Drops into any shadcn/ui project unchanged: 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: Better Design re-skins it for the Apple aesthetic.

Is it free?

Yes. MIT-licensed shadcn-compatible registry item. Install via npx shadcn@latest add: source lands in your components/ui folder.

Can I change the slide direction?

Pass side="top" | "right" | "bottom" | "left" on SheetContent. Apple modals usually slide from the bottom on iOS and right on macOS: pick per platform-feel.

How is this different from Apple's actual UIKit/SwiftUI sheets?

Inspired-by, not lifted. Better Design ships the web-equivalent visual signature on Radix Dialog. Apple's real sheets are native iOS/macOS components with system-level animations and gesture handling that don't exist in browsers.

Related component pages

Linear-style Command Palette

/components/linear-command

Airbnb-style Date Picker

/components/airbnb-date-picker

Linear-style Sidebar

/components/linear-sidebar