TuMarca

Drawer

A drawer component that slides in from the edge of the screen.

stable
Tipo: ui
Versión: 1.0.0
overlay interactive interactive modal mobile vanilla-js
Documentación API Reference

Comparación entre la versión Astro (Saastro) y React (shadcn/ui)

🚀 saastro/ui (Astro)
⚛️ shadcn/ui (React)

Installation

Usage

---
import {
  Drawer,
  DrawerTrigger,
  DrawerContent,
  DrawerHeader,
  DrawerFooter,
  DrawerTitle,
  DrawerDescription,
  DrawerClose,
} from "@/components/ui-saastro/drawer";
import { Button } from "@/components/ui-saastro/button";
---

<Drawer direction="bottom">
  <DrawerTrigger>
    <Button>Open</Button>
  </DrawerTrigger>
  <DrawerContent direction="bottom">
    <DrawerHeader>
      <DrawerTitle>Title</DrawerTitle>
      <DrawerDescription>Description</DrawerDescription>
    </DrawerHeader>
    <!-- Content -->
    <DrawerFooter>
      <DrawerClose>
        <Button variant="outline">Close</Button>
      </DrawerClose>
    </DrawerFooter>
  </DrawerContent>
</Drawer>

Props

Drawer

PropTypeDefaultDescription
direction"top" | "bottom" | "left" | "right""bottom"Direction from which the drawer slides in

DrawerContent

PropTypeDefaultDescription
direction"top" | "bottom" | "left" | "right""bottom"Direction for content positioning

Accessibility

  • Uses role="dialog" and aria-modal="true"
  • Focus is trapped within the drawer when open
  • Closes on Escape key press
  • Closes on overlay click

Performance

Performance Benchmark

Bundle Size

~2KB vs ~180KB

99% menos

Hydration

0ms vs --

Sin hydration

Open Response

-- vs --

Interactúa para medir

Saastro (Vanilla JS)
shadcn (React)

Haz click en "Ejecutar Test" o interactúa con los componentes (click) para medir el rendimiento.