Components
Loading preview...
Composable date range picker built on React Aria DateRangePicker with DateField and RangeCalendar composition.
npx shadcn@latest add https://21st.dev/r/hero_ui/heroui-date-range-picker"use client";
import { Button, DateRangePicker } from "@/components/ui/heroui-date-range-picker";
export default function FormExampleDemo() {
return (
<div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-8">
<form className="form-demo">
<style>{`
.form-demo{display:flex;width:20rem;flex-direction:column;gap:12px;color:inherit}
`}</style>
<DateRangePicker label="Trip dates" required description="Select your check-in and check-out dates." />
<Button>Submit</Button>
</form>
</div>
);
}
export { FormExampleDemo };