Comparison between Astro (Saastro) and React (shadcn/ui) versions
🚀 saastro/ui (Astro)
⚛️ shadcn/ui (React)
Installation
npx saastro add date-pickerUsage
---
import { DatePicker } from "@/components/ui-saastro/date-picker";
---
<DatePicker name="birthdate" placeholder="Select your birthdate" />Props
| Prop | Type | Default | Description |
|---|---|---|---|
| name | string | - | Name for form submission |
| placeholder | string | "Pick a date" | Placeholder text |
| defaultValue | string | - | Default selected date (ISO format) |
| minDate | string | - | Minimum selectable date |
| maxDate | string | - | Maximum selectable date |
| disabled | boolean | false | Disable the date picker |
Examples
With Default Value
---
import { DatePicker } from "@/components/ui-saastro/date-picker";
---
<DatePicker
name="event-date"
defaultValue="2024-12-25"
placeholder="Event date"
/>With Date Constraints
---
import { DatePicker } from "@/components/ui-saastro/date-picker";
const today = new Date().toISOString().split('T')[0];
---
<DatePicker
name="future-date"
minDate={today}
placeholder="Select a future date"
/>Events
| Event | Detail | Description |
|---|---|---|
change | { date: string } | Fired when a date is selected |
Performance
Performance Benchmark
Bundle Size
~5KB vs ~210KB
98% 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.