Wensity

Sheet

Edge-mounted panels that slide in from any side, with an optional persistent mode for inspectors and navigation.

sheetpaneldrawersidebaroverlaymobile
Loading preview

Examples

Practical examples and common states for the same installable component.

Left

Navigation rails and file-tree panels.

examples/sheet-left.tsx
import { Sheet, SheetContent, SheetTrigger } from "@/components/wensity/sheet";


export function LeftSheet() {
  return (
    <Sheet>
      <SheetTrigger>Menu</SheetTrigger>
      <SheetContent side="left" />
    </Sheet>
  );
}

Right

Inspector and detail panels anchored to the right edge.

examples/sheet-right.tsx
import { Sheet, SheetContent, SheetTrigger } from "@/components/wensity/sheet";


export function RightSheet() {
  return (
    <Sheet>
      <SheetTrigger>Inspect</SheetTrigger>
      <SheetContent side="right" />
    </Sheet>
  );
}

Top

Announcements and compact top banners.

examples/sheet-top.tsx
import { Sheet, SheetContent, SheetTrigger } from "@/components/wensity/sheet";


export function TopSheet() {
  return (
    <Sheet>
      <SheetTrigger>What's new</SheetTrigger>
      <SheetContent side="top" />
    </Sheet>
  );
}

Bottom

Mobile action sheets from the bottom edge.

examples/sheet-bottom.tsx
import { Sheet, SheetContent, SheetTrigger } from "@/components/wensity/sheet";


export function BottomSheet() {
  return (
    <Sheet>
      <SheetTrigger>Actions</SheetTrigger>
      <SheetContent side="bottom" />
    </Sheet>
  );
}

Persistent

Ignores overlay clicks - requires explicit dismiss.

examples/sheet-persistent.tsx
import { Sheet, SheetContent, SheetTrigger } from "@/components/wensity/sheet";


export function PersistentSheet() {
  return (
    <Sheet>
      <SheetTrigger>Pin panel</SheetTrigger>
      <SheetContent side="right" persistent />
    </Sheet>
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add sheet

Usage

Import Sheet from @/components/wensity/sheet and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import {
  Sheet,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/wensity/sheet";


export function SheetDemo() {
  return (
    <Sheet>
      <SheetTrigger>Open</SheetTrigger>
      <SheetContent side="right">
        <SheetHeader>
          <SheetTitle>Filters</SheetTitle>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  );
}

Props

PropTypeDefaultDescription
openboolean-Controlled open state.
defaultOpenboolean-Initial open state when uncontrolled.
onOpenChange(open: boolean) => void-Called when the sheet opens or closes.
modalbooleantrueTraps focus and blocks interaction with the page behind.
persistentbooleanfalsePrevents an outside click from dismissing the sheet.

Featured in React navbar components.