Comparación entre la versión Astro (Saastro) y React (shadcn/ui)
🚀 saastro/ui (Astro)
⚛️ shadcn/ui (React)
Installation
npx saastro add calendarUsage
---
import { Calendar } from "@/components/ui-saastro/calendar";
---
<Calendar class="rounded-md border" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| mode | "single" | "multiple" | "range" | "single" | Selection mode |
| selected | string | string[] | - | Selected date(s) in ISO format |
| minDate | string | - | Minimum selectable date |
| maxDate | string | - | Maximum selectable date |
| weekStartsOn | 0 | 1 | 0 | Week starts on Sunday (0) or Monday (1) |
Examples
Range Selection
---
import { Calendar } from "@/components/ui-saastro/calendar";
---
<Calendar mode="range" class="rounded-md border" />With Min/Max Dates
---
import { Calendar } from "@/components/ui-saastro/calendar";
const today = new Date().toISOString().split('T')[0];
const maxDate = new Date(Date.now() + 30 * 24 * 60 * 60 * 1000).toISOString().split('T')[0];
---
<Calendar minDate={today} maxDate={maxDate} class="rounded-md border" />Events
| Event | Detail | Description |
|---|---|---|
change | { date: string, dates?: string[], range?: { start: string, end: string } } | Fired when selection changes |
Performance
Este componente Saastro usa vanilla JavaScript en lugar de React. Prueba el benchmark interactivo para comparar el rendimiento en tiempo real:
Performance Benchmark
Bundle Size
~3KB vs ~200KB
98% menos
Hydration
0ms vs --
Sin hydration
Click 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.