Components
Loading preview...
Displays a calendar from which users can select a date or range of dates.
@shugar
npx shadcn@latest add https://21st.dev/r/shugar/calendarimport { useState } from "react";
import { Calendar, RangeValue } from "@/components/ui/calendar";
export default function HorizontalLayoutDemo() {
const [date2, setDate2] = useState<RangeValue | null>(null);
return (
<div className="self-start pt-30">
<Calendar
allowClear
isDocsPage
onChange={setDate2}
value={date2}
horizontalLayout
showTimeInput={false}
popoverAlignment="center"
/>
</div>
);
}