edbnedbn/ui
Get Started
WelcomeChoosing a VariantChangelogLicense
Components
OverviewButtonAlert DialogPopoverDropdown MenuPull Down MenuSheet
Motion Utilities
Motion ProviderSpring PresetsHooks
0installs
ComponentsBlocksMaps
HomeDocsComponentsStaticSheet

On this page

Sheet (Static)

A lightweight slide-in panel component with CSS animations. Perfect for navigation drawers, settings panels, and mobile menus.

Overview

The static Sheet uses CSS animations for smooth slide-in/slide-out transitions. Built on Radix UI Dialog for robust accessibility.

Looking for spring physics? Check out the Animated Sheet.

Usage

import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetFooter,
  SheetTitle,
  SheetDescription,
  SheetClose,
} from "@/components/ui/static/sheet"
<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
    Content here
  </SheetContent>
</Sheet>

Installation

Install via CLI

TypeScript
npx edbn-ui add sheet-static

Install dependencies

TypeScript
npm install @radix-ui/react-dialog @phosphor-icons/react

Import and use

TypeScript
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
} from "@/components/ui/static/sheet"

export default function MyComponent() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button>Open Settings</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Settings</SheetTitle>
        </SheetHeader>
        <p>Settings content here</p>
      </SheetContent>
    </Sheet>
  )
}
23 lines

Examples

Basic Usage

A simple sheet with header, content, and footer.

Sides

The sheet can slide in from any side of the screen.

With Form

Use sheets to display forms and collect user input.

TypeScript
<Sheet>
  <SheetTrigger asChild>
    <Button>Edit Profile</Button>
  </SheetTrigger>
  <SheetContent className="sm:max-w-lg">
    <SheetHeader>
      <SheetTitle>Edit Profile</SheetTitle>
      <SheetDescription>
        Update your profile information.
      </SheetDescription>
    </SheetHeader>
    <form className="space-y-4 py-6">
      <div className="space-y-2">
        <label htmlFor="name">Name</label>
        <input id="name" className="..." />
      </div>
      <div className="space-y-2">
        <label htmlFor="bio">Bio</label>
        <textarea id="bio" className="..." />
      </div>
    </form>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Cancel</Button>
      </SheetClose>
      <Button type="submit">Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>
29 lines

API Reference

SheetContent

PropTypeDefaultDescription
side"top" | "right" | "bottom" | "left""right"Which side the sheet slides in from
classNamestring—Additional CSS classes

Sheet

PropTypeDefaultDescription
openboolean—Controlled open state
defaultOpenbooleanfalseInitial open state (uncontrolled)
onOpenChange(open: boolean) => void—Callback when open state changes

Accessibility

Built on Radix UI Dialog with full keyboard and screen reader support.

EscapeClose the sheet
TabNavigate between focusable elements (trapped within sheet)