Sheet

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

🚀 saastro/ui (Astro)

⚛️ shadcn/ui (React)

Installation

pnpm dlx saastro add sheet

Usage

---
import {
  Sheet,
  SheetTrigger,
  SheetContent,
  SheetHeader,
  SheetTitle,
  SheetDescription,
} from "@/components/ui-saastro/sheet"
---

<Sheet>
  <SheetTrigger>Open</SheetTrigger>
  <SheetContent>
    <SheetHeader>
      <SheetTitle>Title</SheetTitle>
      <SheetDescription>Description</SheetDescription>
    </SheetHeader>
  </SheetContent>
</Sheet>

Examples

Side

Use the side prop to control the side of the screen where the sheet appears.

<SheetContent side="left">
  <!-- Content -->
</SheetContent>

Available sides: top, right, bottom, left

Props

SheetContent

Prop	Type	Default	Description
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"right"`	The side the sheet appears from
`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 sheet 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