fn_registry/frontend/functions/ui/sheet.md

name, kind, lang, domain, version, purity, signature, description, tags, uses_functions, uses_types, returns, returns_optional, error_type, imports, output, tested, tests, test_file_path, file_path, props, emits, has_state, framework, variant

name	kind	lang	domain	version	purity	signature	description	tags	uses_functions	uses_types	returns	returns_optional	error_type	imports	output	tested	tests	test_file_path	file_path	props	emits	has_state	framework	variant
sheet	component	ts	ui	1.0.0	impure	Sheet(props: SheetProps): JSX.Element	Panel lateral deslizante (drawer) accesible con variantes de lado y animaciones. Base-UI Dialog con posicionamiento lateral via CVA.	sheet drawer panel component ui interactive overlay base-ui cva	cn_ts_core			false		@base-ui/react/dialog class-variance-authority lucide-react	Componente Sheet que renderiza panel deslizante lateral accesible con animaciones	false			frontend/functions/ui/sheet.tsx	name type required description side 'top' | 'bottom' | 'left' | 'right' false Lado desde el que aparece el panel (default: right) name type required description showCloseButton boolean false Muestra el boton de cierre (default: true) name type required description open boolean false Estado controlado de apertura name type required description onOpenChange (open: boolean) => void false Callback cuando cambia el estado	onOpenChange	false	react	top bottom left right

Ejemplo

<Sheet>
  <SheetTrigger asChild>
    <Button variant="outline">Abrir panel</Button>
  </SheetTrigger>
  <SheetContent side="right">
    <SheetHeader>
      <SheetTitle>Editar perfil</SheetTitle>
      <SheetDescription>Realiza cambios en tu perfil.</SheetDescription>
    </SheetHeader>
    <div className="py-4">
      {/* contenido del panel */}
    </div>
    <SheetFooter>
      <SheetClose asChild>
        <Button variant="outline">Cancelar</Button>
      </SheetClose>
      <Button>Guardar</Button>
    </SheetFooter>
  </SheetContent>
</Sheet>

Notas

Reutiliza Base-UI Dialog para el comportamiento modal. Las animaciones de deslizamiento usan slide-in-from-* de Tailwind. CVA gestiona las variantes de lado. Exports: Sheet, SheetTrigger, SheetContent, SheetClose, SheetPortal, SheetOverlay, SheetHeader, SheetFooter, SheetTitle, SheetDescription.