Componentes
Formularios
Calendar
Calendario propio: simple o rango, con navegación mes/año.Selección de fecha
Vista previa
Su
Mo
Tu
We
Th
Fr
Sa
const [date, setDate] = useState<Date | null>(new Date());
<Calendar value={date} onValueChange={setDate} />
// Clic en el caption ("Junio 2026") → grilla de meses.
// Clic en el año → grilla de años. Año → mes → días.Rango con dos meses
Vista previa
Su
Mo
Tu
We
Th
Fr
Sa
Su
Mo
Tu
We
Th
Fr
Sa
const [range, setRange] = useState<DateRange>({});
<Calendar mode="range" numberOfMonths={2} value={range} onValueChange={setRange} />Comparación de temas
El mismo componente bajo distintos modos y marcas. No cambia el componente — solo los tokens (CSS variables) del contenedor.Legacy · claro
Su
Mo
Tu
We
Th
Fr
Sa
Editorial · claro
Su
Mo
Tu
We
Th
Fr
Sa
Technical · oscuro
Su
Mo
Tu
We
Th
Fr
Sa
Warm · claro
Su
Mo
Tu
We
Th
Fr
Sa
Playful · claro
Su
Mo
Tu
We
Th
Fr
Sa