Dialog

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

🚀 saastro/ui (Astro)

⚛️ shadcn/ui (React)

Installation

pnpm dlx saastro add dialog

Usage

---
import {
  Dialog,
  DialogTrigger,
  DialogContent,
  DialogHeader,
  DialogTitle,
  DialogDescription,
} from "@/components/ui-saastro/dialog"
---

<Dialog>
  <DialogTrigger>Open</DialogTrigger>
  <DialogContent>
    <DialogHeader>
      <DialogTitle>Title</DialogTitle>
      <DialogDescription>Description</DialogDescription>
    </DialogHeader>
  </DialogContent>
</Dialog>

Props

DialogContent

Prop	Type	Default	Description
`showCloseButton`	`boolean`	`true`	Whether to show the close button
`class`	`string`	-	Additional CSS classes

Accessibility

Uses role="dialog" and aria-modal="true"
Focus is trapped within the dialog 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.

Edit profile