Sheet

Painel lateral/modal para detalhes ou formulários.

Sobreposições e menus

Carregando demonstração…

Código da demo

"use client";

import { Button } from "@/components/ui/button";
import {
  Sheet,
  SheetClose,
  SheetContent,
  SheetDescription,
  SheetFooter,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";

export function Demo() {
  return (
    <Sheet>
      <SheetTrigger asChild>
        <Button variant="outline">Abrir sheet</Button>
      </SheetTrigger>
      <SheetContent>
        <SheetHeader>
          <SheetTitle>Painel lateral</SheetTitle>
          <SheetDescription>
            Feche com Esc ou o botão Fechar.
          </SheetDescription>
        </SheetHeader>
        <div className="px-fe-4 fe-body text-muted-foreground">Conteúdo de exemplo.</div>
        <SheetFooter>
          <SheetClose asChild>
            <Button variant="outline">Fechar</Button>
          </SheetClose>
        </SheetFooter>
      </SheetContent>
    </Sheet>
  );
}

Use

Detalhe ou edição lateral sem perder o contexto da lista.
Menu de navegação no celular.

Não use

Não use para confirmação rápida: use AlertDialog.
Não esconda no Sheet a ação principal da página.

Acessibilidade: Title; Esc fecha; foco preso no sheet.
Importar: import { Sheet, SheetTrigger, SheetContent } from "@financeequity/ui/sheet"
Neste repositório:
import { Sheet, SheetTrigger, SheetContent } from "@/components/ui/sheet"
Dependências: radix-ui