Wensity

Sheet

Side panels for navigation, inspectors, banners, and mobile actions.

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