MiHCM
overlay/@mihcm/ui·v0.21.0·stable

Sheet

Slide-out panel from a screen edge. Composable: Sheet, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, SheetClose. Dismisses on backdrop click and Escape.

ConfiguratorExamplesUsageAccessibilityApi

Right-side settings panel

The most common pattern: a right-side panel for editing details without leaving the page.

Account Settings

Update your account preferences.

<Sheet open={open} onOpenChange={setOpen}>
  <SheetContent side="right" size="md">
    <SheetClose onClose={() => setOpen(false)} />
    <SheetHeader>
      <SheetTitle>Account Settings</SheetTitle>
      <SheetDescription>Update your account preferences.</SheetDescription>
    </SheetHeader>
    <div className="flex-1 overflow-y-auto p-6">
      <Input placeholder="Display name" />
    </div>
    <SheetFooter>
      <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
      <Button onClick={handleSave}>Save</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Left navigation drawer

Use side="left" for a mobile navigation drawer. Pair with a hamburger trigger in the TopBar.

Navigation

<SheetContent side="left" size="sm">
  <SheetHeader>
    <SheetTitle>Navigation</SheetTitle>
  </SheetHeader>
  <nav className="flex-1 p-6">
    <ul className="space-y-2">
      <li><a href="/dashboard">Dashboard</a></li>
      <li><a href="/settings">Settings</a></li>
    </ul>
  </nav>
</SheetContent>

Bottom action sheet

side="bottom" works for mobile share dialogs and quick actions. Keep content minimal.

Share document

<SheetContent side="bottom" size="sm">
  <SheetHeader>
    <SheetTitle>Share document</SheetTitle>
  </SheetHeader>
  <div className="p-6">
    <Button className="w-full">Copy link</Button>
  </div>
</SheetContent>