Sheet

Mobile-only panel that slides in from the right over a backdrop (hidden on lg+).

A mobile-only panel that slides in from the right over a backdrop (hidden on lg screens and up). It's a controlled YunUI overlay: drive it with open + onClose. It renders an optional header title and close button, locks body scroll, and closes on backdrop click or the Escape key.

Import

tsx

1import { Sheet } from "@yuhuanowo/yunui";

Basic

A Sheet is fully controlled: keep its open in state and pass onClose to dismiss it. Because it only shows below the lg breakpoint, narrow your viewport to see it slide in.

Slide-in sheet

tsx

1"use client";
2 
3import { useState } from "react";
4import { Sheet, Button } from "@yuhuanowo/yunui";
5 
6export function SheetDemo() {
7  const [open, setOpen] = useState(false);
8  return (
9    <>
10      <Button onClick={() => setOpen(true)}>Open sheet</Button>
11      <Sheet open={open} onClose={() => setOpen(false)} title="Menu">
12        <nav className="flex flex-col p-2">
13          <a className="px-3 py-2 rounded-lg hover:bg-muted text-sm" href="#">Dashboard</a>
14          <a className="px-3 py-2 rounded-lg hover:bg-muted text-sm" href="#">Projects</a>
15          <a className="px-3 py-2 rounded-lg hover:bg-muted text-sm" href="#">Settings</a>
16        </nav>
17      </Sheet>
18    </>
19  );
20}

Props

Prop	Type	Default	Description
closeLabel	string	—	Accessible name for the close button. The library ships no copy of its own; the English default only keeps it usable untranslated.
mobileOnly	boolean	false	Hide on large screens (`lg`+) — for mobile-only drawers (e.g. a sidebar that's permanent on desktop).
onClose*	() => void	—	Called when the sheet should close (backdrop click, escape, close button).
open*	boolean	—	Whether the sheet is open (controlled).
title	string	—	Optional header title.

Import

Basic

Props

On this page