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>
  );
}

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.