Components
Loading preview...
Composable date picker built on React Aria DatePicker with DateField and Calendar composition.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-date-picker"use client";
import * as React from "react";
import { Button, DatePicker } from "@/components/ui/heroui-date-picker";
const today = { month: "6", day: "1", year: "2026", iso: "2026-06-01" };
export default function ControlledDemo() {
const [value, setValue] = React.useState(today);
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<div className="flex w-64 flex-col gap-4">
<DatePicker label="Date" value={value} onChange={(next) => setValue(next || today)} />
<p className="text-sm text-muted-foreground">
{value.iso === "2026-06-01" ? "Current value: 2026-06-01" : `Current value: ${value.iso}`}
</p>
<div className="flex gap-2">
<Button onClick={() => setValue(today)}>Set today</Button>
<Button variant="secondary" onClick={() => setValue({ month: "mm", day: "dd", year: "yyyy", iso: "" })}>Clear</Button>
</div>
</div>
</div>
);
}
export { ControlledDemo };