Search for a command...
Clean, modern building blocks. Copy and paste into your apps. Works with all React frameworks. Open Source. Free forever.
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar01() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="single"
defaultMonth={date}
selected={date}
onSelect={setDate}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar02() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="single"
defaultMonth={date}
numberOfMonths={2}
selected={date}
onSelect={setDate}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar03() {
const [dates, setDates] = React.useState<Date[]>([new Date(2025, 5, 12), new Date(2025, 6, 24)]);
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="multiple"
numberOfMonths={2}
defaultMonth={dates[0]}
required
selected={dates}
onSelect={setDates}
max={5}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar04() {
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 9),
to: new Date(2025, 5, 26),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
xl: { pt: "28" },
}}
>
<Calendar
mode="range"
defaultMonth={dateRange?.from}
selected={dateRange}
onSelect={setDateRange}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar05() {
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 12),
to: new Date(2025, 6, 15),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "6",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
xl: { py: "24" },
}}
>
<Calendar
mode="range"
defaultMonth={dateRange?.from}
selected={dateRange}
onSelect={setDateRange}
numberOfMonths={2}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar06() {
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 12),
to: new Date(2025, 5, 26),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", minW: "0", flexDir: "column", gap: "2" }}>
<Calendar
mode="range"
defaultMonth={dateRange?.from}
selected={dateRange}
onSelect={setDateRange}
numberOfMonths={1}
min={5}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
<styled.div css={{ color: "muted.fg", textAlign: "center", textStyle: "xs" }}>
A minimum of 5 days is required
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar07() {
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 18),
to: new Date(2025, 6, 7),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", minW: "0", flexDir: "column", gap: "2" }}>
<Calendar
mode="range"
defaultMonth={dateRange?.from}
selected={dateRange}
onSelect={setDateRange}
numberOfMonths={2}
min={2}
max={20}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
<styled.div css={{ color: "muted.fg", textAlign: "center", textStyle: "xs" }}>
Your stay must be between 2 and 20 nights
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar08() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="single"
defaultMonth={date}
selected={date}
onSelect={setDate}
disabled={{
before: new Date(2025, 5, 12),
}}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar09() {
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 17),
to: new Date(2025, 5, 20),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="range"
defaultMonth={dateRange?.from}
selected={dateRange}
onSelect={setDateRange}
numberOfMonths={2}
disabled={{ dayOfWeek: [0, 6] }}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
excludeDisabled
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
export default function Calendar10() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
const [month, setMonth] = React.useState<Date | undefined>(new Date());
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Card>
<CardHeader>
<CardTitle>Appointment</CardTitle>
<CardDescription>Find a date</CardDescription>
<CardAction>
<Button
size="sm"
variant="outline"
onClick={() => {
setMonth(new Date());
setDate(new Date());
}}
>
Today
</Button>
</CardAction>
</CardHeader>
<CardContent>
<Calendar
mode="single"
month={month}
onMonthChange={setMonth}
selected={date}
onSelect={setDate}
css={{ bg: "transparent", p: "0" }}
/>
</CardContent>
</Card>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar11() {
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 17),
to: new Date(2025, 5, 20),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", minW: "0", flexDir: "column", gap: "2" }}>
<Calendar
mode="range"
selected={dateRange}
onSelect={setDateRange}
numberOfMonths={2}
startMonth={new Date(2025, 5, 1)}
endMonth={new Date(2025, 6, 31)}
disableNavigation
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
<styled.div css={{ color: "muted.fg", textAlign: "center", textStyle: "xs" }}>
We are open in June and July only.
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { enUS, es } from "react-day-picker/locale";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
import {
Card,
CardAction,
CardContent,
CardDescription,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
const localizedStrings = {
en: {
title: "Book an appointment",
description: "Select the dates for your appointment",
},
es: {
title: "Reserva una cita",
description: "Selecciona las fechas para tu cita",
},
} as const;
export default function Calendar12() {
const [locale, setLocale] = React.useState<keyof typeof localizedStrings>("es");
const [dateRange, setDateRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 8, 9),
to: new Date(2025, 8, 17),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Card>
<CardHeader css={{ borderBottomWidth: "1px" }}>
<CardTitle>{localizedStrings[locale].title}</CardTitle>
<CardDescription>{localizedStrings[locale].description}</CardDescription>
<CardAction>
<Select
value={locale}
onValueChange={(value) => setLocale(value as keyof typeof localizedStrings)}
>
<SelectTrigger css={{ w: "100px" }}>
<SelectValue placeholder="Language" />
</SelectTrigger>
<SelectContent align="end">
<SelectItem value="es">Español</SelectItem>
<SelectItem value="en">English</SelectItem>
</SelectContent>
</Select>
</CardAction>
</CardHeader>
<CardContent>
<Calendar
mode="range"
selected={dateRange}
onSelect={setDateRange}
defaultMonth={dateRange?.from}
numberOfMonths={2}
locale={locale === "es" ? es : enUS}
css={{ bg: "transparent", p: "0" }}
buttonVariant="outline"
/>
</CardContent>
</Card>
</styled.div>
);
}
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
SelectValue,
} from "@/components/ui/select";
export default function Calendar13() {
const [dropdown, setDropdown] =
React.useState<React.ComponentProps<typeof Calendar>["captionLayout"]>("dropdown");
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", flexDir: "column", gap: "4" }}>
<Calendar
mode="single"
defaultMonth={date}
selected={date}
onSelect={setDate}
captionLayout={dropdown}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="dropdown" css={{ px: "1" }}>
Dropdown
</Label>
<Select
value={dropdown}
onValueChange={(value) =>
setDropdown(value as React.ComponentProps<typeof Calendar>["captionLayout"])
}
>
<SelectTrigger id="dropdown" size="sm" css={{ bg: "bg", w: "full" }}>
<SelectValue placeholder="Dropdown" />
</SelectTrigger>
<SelectContent align="center">
<SelectItem value="dropdown">Month and Year</SelectItem>
<SelectItem value="dropdown-months">Month Only</SelectItem>
<SelectItem value="dropdown-years">Year Only</SelectItem>
</SelectContent>
</Select>
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar14() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
const bookedDates = Array.from({ length: 12 }, (_, i) => new Date(2025, 5, 15 + i));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="single"
defaultMonth={date}
selected={date}
onSelect={setDate}
disabled={bookedDates}
modifiers={{
booked: bookedDates,
}}
modifiersClassNames={{
booked: css({
"& > button": {
textDecoration: "line-through",
opacity: 1,
},
}),
}}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar15() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="single"
defaultMonth={date}
selected={date}
onSelect={setDate}
css={{ rounded: "lg", borderWidth: "1px", shadow: "sm" }}
showWeekNumber
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuClock2 } from "react-icons/lu";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function Calendar16() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "6",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
}}
>
<Card css={{ w: "fit", py: "4" }}>
<CardContent css={{ px: "4" }}>
<Calendar
mode="single"
selected={date}
onSelect={setDate}
css={{ bg: "transparent", p: "0" }}
/>
</CardContent>
<CardFooter
css={{
display: "flex",
flexDir: "column",
gap: "6",
borderTopWidth: "1px",
px: "4",
pt: "4!",
}}
>
<styled.div css={{ display: "flex", w: "full", flexDir: "column", gap: "3" }}>
<Label htmlFor="time-from">Start Time</Label>
<styled.div
css={{ pos: "relative", display: "flex", w: "full", alignItems: "center", gap: "2" }}
>
<LuClock2
className={css({
color: "muted.fg",
pointerEvents: "none",
pos: "absolute",
left: "2.5",
w: "4",
h: "4",
userSelect: "none",
})}
/>
<Input
id="time-from"
type="time"
step="1"
defaultValue="10:30:00"
css={{
appearance: "none",
pl: "8",
"&::-webkit-calendar-picker-indicator": { appearance: "none", display: "none" },
}}
/>
</styled.div>
</styled.div>
<styled.div css={{ display: "flex", w: "full", flexDir: "column", gap: "3" }}>
<Label htmlFor="time-to">End Time</Label>
<styled.div
css={{ pos: "relative", display: "flex", w: "full", alignItems: "center", gap: "2" }}
>
<LuClock2
className={css({
color: "muted.fg",
pointerEvents: "none",
pos: "absolute",
left: "2.5",
w: "4",
h: "4",
userSelect: "none",
})}
/>
<Input
id="time-to"
type="time"
step="1"
defaultValue="12:30:00"
css={{
appearance: "none",
pl: "8",
"&::-webkit-calendar-picker-indicator": { appearance: "none", display: "none" },
}}
/>
</styled.div>
</styled.div>
</CardFooter>
</Card>
</styled.div>
);
}
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
export default function Calendar17() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Card css={{ w: "fit", py: "4" }}>
<CardContent css={{ px: "4" }}>
<Calendar
mode="single"
selected={date}
onSelect={setDate}
css={{ bg: "transparent", p: "0", "--cell-size": "2.625rem" }}
/>
</CardContent>
<CardFooter
css={{
display: "flex",
gap: "2",
borderTopWidth: "1px",
px: "4",
pt: "4!",
"& > div": { w: "full" },
}}
>
<div>
<Label htmlFor="time-from" css={{ srOnly: true }}>
Start Time
</Label>
<Input
id="time-from"
type="time"
step="1"
defaultValue="10:30:00"
css={{
appearance: "none",
pl: "8",
"&::-webkit-calendar-picker-indicator": { appearance: "none", display: "none" },
}}
/>
</div>
<span>-</span>
<div>
<Label htmlFor="time-to" css={{ srOnly: true }}>
End Time
</Label>
<Input
id="time-to"
type="time"
step="1"
defaultValue="12:30:00"
css={{
appearance: "none",
pl: "8",
"&::-webkit-calendar-picker-indicator": { appearance: "none", display: "none" },
}}
/>
</div>
</CardFooter>
</Card>
</styled.div>
);
}
"use client";
import * as React from "react";
import { styled } from "styled-system/jsx";
import { Calendar } from "@/components/ui/calendar";
export default function Calendar18() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="single"
selected={date}
onSelect={setDate}
css={{
rounded: "lg",
borderWidth: "1px",
"--cell-size": "2.75rem",
md: {
"--cell-size": "3rem",
},
}}
buttonVariant="ghost"
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import dayjs from "dayjs";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
export default function Calendar19() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Card css={{ maxW: "325px", py: "4" }}>
<CardContent css={{ px: "4" }}>
<Calendar
mode="single"
selected={date}
onSelect={setDate}
defaultMonth={date}
css={{ bg: "transparent", p: "0", "--cell-size": "2.375rem" }}
/>
</CardContent>
<CardFooter
css={{
display: "flex",
flexWrap: "wrap",
gap: "2",
borderTopWidth: "1px",
px: "4",
pt: "4!",
}}
>
{[
{ label: "Today", value: 0 },
{ label: "Tomorrow", value: 1 },
{ label: "In 3 days", value: 3 },
{ label: "In a week", value: 7 },
{ label: "In 2 weeks", value: 14 },
].map((preset) => (
<Button
key={preset.value}
variant="outline"
size="sm"
css={{ flex: "1" }}
onClick={() => {
const newDate = dayjs().add(preset.value, "days").toDate();
setDate(newDate);
}}
>
{preset.label}
</Button>
))}
</CardFooter>
</Card>
</styled.div>
);
}
"use client";
import * as React from "react";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
export default function Calendar20() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
const [selectedTime, setSelectedTime] = React.useState<string | null>("10:00");
const timeSlots = Array.from({ length: 37 }, (_, i) => {
const totalMinutes = i * 15;
const hour = Math.floor(totalMinutes / 60) + 9;
const minute = totalMinutes % 60;
return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
});
const bookedDates = Array.from({ length: 3 }, (_, i) => new Date(2025, 5, 17 + i));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Card css={{ gap: "0", p: "0" }}>
<CardContent css={{ pos: "relative", p: "0", md: { pr: "48" } }}>
<styled.div css={{ p: "6" }}>
<Calendar
mode="single"
selected={date}
onSelect={setDate}
defaultMonth={date}
disabled={bookedDates}
showOutsideDays={false}
modifiers={{
booked: bookedDates,
}}
modifiersClassNames={{
booked: css({ "& > button": { textDecoration: "line-through", opacity: 1 } }),
}}
css={{
bg: "transparent",
p: "0",
"--cell-size": "2.5rem",
md: {
"--cell-size": "3rem",
},
}}
formatters={{
formatWeekdayName: (date) => {
return date.toLocaleString("en-US", { weekday: "short" });
},
}}
/>
</styled.div>
<styled.div
css={{
scrollbar: "hidden",
insetY: "0",
right: "0",
display: "flex",
maxH: "72",
w: "full",
scrollPaddingBottom: "6",
flexDir: "column",
gap: "4",
overflowY: "auto",
borderTopWidth: "1px",
p: "6",
md: {
pos: "absolute",
maxH: "none",
w: "48",
borderTopWidth: "0",
borderLeftWidth: "1px",
},
}}
>
<styled.div css={{ display: "grid", gap: "2" }}>
{timeSlots.map((time) => (
<Button
key={time}
variant={selectedTime === time ? "primary" : "outline"}
onClick={() => setSelectedTime(time)}
css={{ w: "full", shadow: "none" }}
>
{time}
</Button>
))}
</styled.div>
</styled.div>
</CardContent>
<CardFooter
css={{
display: "flex",
flexDir: "column",
gap: "4",
borderTopWidth: "1px",
px: "6",
py: "5!",
md: { flexDir: "row" },
}}
>
<styled.div css={{ textStyle: "sm" }}>
{date && selectedTime ? (
<>
Your meeting is booked for{" "}
<styled.span css={{ fontWeight: "medium" }}>
{" "}
{date?.toLocaleDateString("en-US", {
weekday: "long",
day: "numeric",
month: "long",
})}{" "}
</styled.span>
at <styled.span css={{ fontWeight: "medium" }}>{selectedTime}</styled.span>.
</>
) : (
<>Select a date and time for your meeting.</>
)}
</styled.div>
<Button
disabled={!date || !selectedTime}
css={{ w: "full", md: { ml: "auto", w: "auto" } }}
variant="outline"
>
Continue
</Button>
</CardFooter>
</Card>
</styled.div>
);
}
"use client";
import * as React from "react";
import { DateRange } from "react-day-picker";
import { styled } from "styled-system/jsx";
import { Calendar, CalendarDayButton } from "@/components/ui/calendar";
export default function Calendar21() {
const [range, setRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 12),
to: new Date(2025, 5, 17),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Calendar
mode="range"
defaultMonth={range?.from}
selected={range}
onSelect={setRange}
numberOfMonths={1}
captionLayout="dropdown"
css={{
rounded: "lg",
borderWidth: "1px",
shadow: "sm",
"--cell-size": "2.75rem",
md: {
"--cell-size": "3.25rem",
},
}}
formatters={{
formatMonthDropdown: (date) => {
return date.toLocaleString("default", { month: "long" });
},
}}
components={{
DayButton: ({ children, modifiers, day, ...props }) => {
const isWeekend = day.date.getDay() === 0 || day.date.getDay() === 6;
return (
<CalendarDayButton day={day} modifiers={modifiers} {...props}>
{children}
{!modifiers.outside && <span>{isWeekend ? "$220" : "$100"}</span>}
</CalendarDayButton>
);
},
}}
/>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuChevronDown } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
export default function Calendar22() {
const [open, setOpen] = React.useState(false);
const [date, setDate] = React.useState<Date | undefined>(undefined);
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="date" css={{ px: "1" }}>
Date of birth
</Label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
id="date"
css={{ w: "48", justifyContent: "space-between", fontWeight: "normal" }}
>
{date ? date.toLocaleDateString() : "Select date"}
<LuChevronDown />
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="start">
<Calendar
mode="single"
selected={date}
captionLayout="dropdown"
onSelect={(date) => {
setDate(date);
setOpen(false);
}}
/>
</PopoverContent>
</Popover>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { LuChevronDown } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
export default function Calendar23() {
const [range, setRange] = React.useState<DateRange | undefined>(undefined);
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="dates" css={{ px: "1" }}>
Select your stay
</Label>
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
id="dates"
css={{ w: "56", justifyContent: "space-between", fontWeight: "normal" }}
>
{range?.from && range?.to
? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
: "Select date"}
<LuChevronDown />
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="start">
<Calendar
mode="range"
selected={range}
captionLayout="dropdown"
onSelect={(range) => {
setRange(range);
}}
/>
</PopoverContent>
</Popover>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuChevronDown } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
export default function Calendar24() {
const [open, setOpen] = React.useState(false);
const [date, setDate] = React.useState<Date | undefined>(undefined);
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", gap: "4" }}>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="date-picker" css={{ px: "1" }}>
Date
</Label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
id="date-picker"
css={{ w: "32", justifyContent: "between", fontWeight: "normal" }}
>
{date ? date.toLocaleDateString() : "Select date"}
<LuChevronDown />
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="start">
<Calendar
mode="single"
selected={date}
captionLayout="dropdown"
onSelect={(date) => {
setDate(date);
setOpen(false);
}}
/>
</PopoverContent>
</Popover>
</styled.div>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="time-picker" css={{ px: "1" }}>
Time
</Label>
<Input
type="time"
id="time-picker"
step="1"
defaultValue="10:30:00"
css={{
appearance: "none",
"&::-webkit-calendar-picker-indicator": { display: "none", appearance: "none" },
}}
/>
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuChevronDown } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
export default function Calendar25() {
const [open, setOpen] = React.useState(false);
const [date, setDate] = React.useState<Date | undefined>(undefined);
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", flexDir: "column", gap: "6" }}>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="date" css={{ px: "1" }}>
Date
</Label>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
variant="outline"
id="date"
css={{ w: "full", justifyContent: "space-between", fontWeight: "normal" }}
>
{date ? date.toLocaleDateString() : "Select date"}
<LuChevronDown />
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="start">
<Calendar
mode="single"
selected={date}
captionLayout="dropdown"
onSelect={(date) => {
setDate(date);
setOpen(false);
}}
/>
</PopoverContent>
</Popover>
</styled.div>
<styled.div css={{ display: "flex", gap: "4" }}>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="time-from" css={{ px: "1" }}>
From
</Label>
<Input
type="time"
id="time-from"
step="1"
defaultValue="10:30:00"
css={{
appearance: "none",
"&::-webkit-calendar-picker-indicator": { appearance: "none", display: "none" },
}}
/>
</styled.div>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="time-to" css={{ px: "1" }}>
To
</Label>
<Input
type="time"
id="time-to"
step="1"
defaultValue="12:30:00"
css={{
appearance: "none",
"&::-webkit-calendar-picker-indicator": { appearance: "none", display: "none" },
}}
/>
</styled.div>
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuChevronDown } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
export default function Calendar26() {
const [openFrom, setOpenFrom] = React.useState(false);
const [openTo, setOpenTo] = React.useState(false);
const [dateFrom, setDateFrom] = React.useState<Date | undefined>(new Date("2025-06-01"));
const [dateTo, setDateTo] = React.useState<Date | undefined>(new Date("2025-06-03"));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div
css={{ display: "flex", w: "full", maxW: "64", minW: "0", flexDir: "column", gap: "6" }}
>
<styled.div css={{ display: "flex", gap: "4" }}>
<styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "3" }}>
<Label htmlFor="date-from" css={{ px: "1" }}>
Check-in
</Label>
<Popover open={openFrom} onOpenChange={setOpenFrom}>
<PopoverTrigger asChild>
<Button
variant="outline"
id="date-from"
css={{ w: "full", justifyContent: "space-between", fontWeight: "normal" }}
>
{dateFrom
? dateFrom.toLocaleDateString("en-US", {
day: "2-digit",
month: "short",
year: "numeric",
})
: "Select date"}
<LuChevronDown />
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="start">
<Calendar
mode="single"
selected={dateFrom}
captionLayout="dropdown"
onSelect={(date) => {
setDateFrom(date);
setOpenFrom(false);
}}
/>
</PopoverContent>
</Popover>
</styled.div>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="time-from" css={{ visibility: "hidden", px: "1" }}>
From
</Label>
<Input
type="time"
id="time-from"
step="1"
defaultValue="10:30:00"
css={{
appearance: "none",
"&::-webkit-calendar-picker-indicator": { display: "none", appearance: "none" },
}}
/>
</styled.div>
</styled.div>
<styled.div css={{ display: "flex", gap: "4" }}>
<styled.div css={{ display: "flex", flex: "1", flexDir: "column", gap: "3" }}>
<Label htmlFor="date-to" css={{ px: "1" }}>
Check-out
</Label>
<Popover open={openTo} onOpenChange={setOpenTo}>
<PopoverTrigger asChild>
<Button
variant="outline"
id="date-to"
css={{ w: "full", justifyContent: "space-between", fontWeight: "normal" }}
>
{dateTo
? dateTo.toLocaleDateString("en-US", {
day: "2-digit",
month: "short",
year: "numeric",
})
: "Select date"}
<LuChevronDown />
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="start">
<Calendar
mode="single"
selected={dateTo}
captionLayout="dropdown"
onSelect={(date) => {
setDateTo(date);
setOpenTo(false);
}}
disabled={dateFrom && { before: dateFrom }}
/>
</PopoverContent>
</Popover>
</styled.div>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="time-to" css={{ visibility: "hidden", px: "1" }}>
To
</Label>
<Input
type="time"
id="time-to"
step="1"
defaultValue="12:30:00"
css={{
appearance: "none",
"&::-webkit-calendar-picker-indicator": { display: "none", appearance: "none" },
}}
/>
</styled.div>
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { DateRange } from "react-day-picker";
import { LuCalendar } from "react-icons/lu";
import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
Card,
CardAction,
CardContent,
CardDescription,
CardFooter,
CardHeader,
CardTitle,
} from "@/components/ui/card";
import {
ChartConfig,
ChartContainer,
ChartTooltip,
ChartTooltipContent,
} from "@/components/ui/chart";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
const chartData = [
{ date: "2025-06-01", visitors: 178 },
{ date: "2025-06-02", visitors: 470 },
{ date: "2025-06-03", visitors: 103 },
{ date: "2025-06-04", visitors: 439 },
{ date: "2025-06-05", visitors: 88 },
{ date: "2025-06-06", visitors: 294 },
{ date: "2025-06-07", visitors: 323 },
{ date: "2025-06-08", visitors: 385 },
{ date: "2025-06-09", visitors: 438 },
{ date: "2025-06-10", visitors: 155 },
{ date: "2025-06-11", visitors: 92 },
{ date: "2025-06-12", visitors: 492 },
{ date: "2025-06-13", visitors: 81 },
{ date: "2025-06-14", visitors: 426 },
{ date: "2025-06-15", visitors: 307 },
{ date: "2025-06-16", visitors: 371 },
{ date: "2025-06-17", visitors: 475 },
{ date: "2025-06-18", visitors: 107 },
{ date: "2025-06-19", visitors: 341 },
{ date: "2025-06-20", visitors: 408 },
{ date: "2025-06-21", visitors: 169 },
{ date: "2025-06-22", visitors: 317 },
{ date: "2025-06-23", visitors: 480 },
{ date: "2025-06-24", visitors: 132 },
{ date: "2025-06-25", visitors: 141 },
{ date: "2025-06-26", visitors: 434 },
{ date: "2025-06-27", visitors: 448 },
{ date: "2025-06-28", visitors: 149 },
{ date: "2025-06-29", visitors: 103 },
{ date: "2025-06-30", visitors: 446 },
];
const total = chartData.reduce((acc, curr) => acc + curr.visitors, 0);
const chartConfig = {
visitors: {
label: "Visitors",
color: "var(--colors-primary)",
},
} satisfies ChartConfig;
export default function Calendar27() {
const [range, setRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 5),
to: new Date(2025, 5, 20),
});
const filteredData = React.useMemo(() => {
if (!range?.from && !range?.to) {
return chartData;
}
return chartData.filter((item) => {
const date = new Date(item.date);
return date >= range.from! && date <= range.to!;
});
}, [range]);
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Card css={{ containerName: "card", containerType: "inline-size", w: "full", maxW: "xl" }}>
<CardHeader
css={{
display: "flex",
flexDir: "column",
pb: "6",
borderBottomWidth: "1px",
"@container card (min-width: 28rem)": {
display: "grid",
},
}}
>
<CardTitle>Web Analytics</CardTitle>
<CardDescription>Showing total visitors for this month.</CardDescription>
<CardAction
css={{
mt: "2",
"@container card (min-width: 28rem)": {
mt: "0",
},
}}
>
<Popover>
<PopoverTrigger asChild>
<Button variant="outline">
<LuCalendar />
{range?.from && range?.to
? `${range.from.toLocaleDateString()} - ${range.to.toLocaleDateString()}`
: "June 2025"}
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="end">
<Calendar
css={{ w: "full" }}
mode="range"
defaultMonth={range?.from}
selected={range}
onSelect={setRange}
disableNavigation
startMonth={range?.from}
fixedWeeks
showOutsideDays
disabled={{
after: new Date(2025, 5, 31),
}}
/>
</PopoverContent>
</Popover>
</CardAction>
</CardHeader>
<CardContent css={{ px: "4" }}>
<ChartContainer config={chartConfig} css={{ aspectRatio: "auto", h: "250px", w: "full" }}>
<BarChart
accessibilityLayer
data={filteredData}
margin={{
left: 12,
right: 12,
}}
>
<CartesianGrid vertical={false} />
<XAxis
dataKey="date"
tickLine={false}
axisLine={false}
tickMargin={8}
minTickGap={20}
tickFormatter={(value) => {
const date = new Date(value);
return date.toLocaleDateString("en-US", {
day: "numeric",
});
}}
/>
<ChartTooltip
content={
<ChartTooltipContent
className={css({ w: "150px" })}
nameKey="visitors"
labelFormatter={(value) => {
return new Date(value).toLocaleDateString("en-US", {
month: "short",
day: "numeric",
year: "numeric",
});
}}
/>
}
/>
<Bar dataKey="visitors" fill={`var(--color-visitors)`} radius={4} />
</BarChart>
</ChartContainer>
</CardContent>
<CardFooter css={{ pt: "6", borderTopWidth: "1px" }}>
<styled.div css={{ textStyle: "sm" }}>
You had{" "}
<styled.span css={{ fontWeight: "semibold" }}>{total.toLocaleString()}</styled.span>{" "}
visitors for the month of June.
</styled.div>
</CardFooter>
</Card>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuCalendar } from "react-icons/lu";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
function formatDate(date: Date | undefined) {
if (!date) {
return "";
}
return date.toLocaleDateString("en-US", {
day: "2-digit",
month: "long",
year: "numeric",
});
}
function isValidDate(date: Date | undefined) {
if (!date) {
return false;
}
return !isNaN(date.getTime());
}
export default function Calendar28() {
const [open, setOpen] = React.useState(false);
const [date, setDate] = React.useState<Date | undefined>(new Date("2025-06-01"));
const [month, setMonth] = React.useState<Date | undefined>(date);
const [value, setValue] = React.useState(formatDate(date));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="date" css={{ px: "1" }}>
Subscription Date
</Label>
<styled.div css={{ pos: "relative", display: "flex", gap: "2" }}>
<Input
id="date"
value={value}
placeholder="June 01, 2025"
css={{ pr: "10" }}
onChange={(e) => {
const date = new Date(e.target.value);
setValue(e.target.value);
if (isValidDate(date)) {
setDate(date);
setMonth(date);
}
}}
onKeyDown={(e) => {
if (e.key === "ArrowDown") {
e.preventDefault();
setOpen(true);
}
}}
/>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
id="date-picker"
variant="ghost"
css={{
pos: "absolute",
top: "50%",
right: "2",
w: "6",
h: "6",
transform: "translateY(-50%)",
}}
>
<LuCalendar className={css({ w: "3.5", h: "3.5" })} />
<styled.span css={{ srOnly: true }}>Select date</styled.span>
</Button>
</PopoverTrigger>
<PopoverContent
css={{ w: "auto", overflow: "hidden", p: "0" }}
align="end"
alignOffset={-8}
sideOffset={10}
>
<Calendar
mode="single"
selected={date}
captionLayout="dropdown"
month={month}
onMonthChange={setMonth}
onSelect={(date) => {
setDate(date);
setValue(formatDate(date));
setOpen(false);
}}
/>
</PopoverContent>
</Popover>
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuCalendar } from "react-icons/lu";
import { parseDate } from "chrono-node";
import { css } from "styled-system/css";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
function formatDate(date: Date | undefined) {
if (!date) {
return "";
}
return date.toLocaleDateString("en-US", {
day: "2-digit",
month: "long",
year: "numeric",
});
}
export default function Calendar29() {
const [open, setOpen] = React.useState(false);
const [value, setValue] = React.useState("In 2 days");
const [date, setDate] = React.useState<Date | undefined>(parseDate(value) || undefined);
const [month, setMonth] = React.useState<Date | undefined>(date);
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="date" css={{ px: "1" }}>
Schedule Date
</Label>
<styled.div css={{ position: "relative", display: "flex", gap: "2" }}>
<Input
id="date"
value={value}
placeholder="Tomorrow or next week"
css={{ pr: "10" }}
onChange={(e) => {
setValue(e.target.value);
const date = parseDate(e.target.value);
if (date) {
setDate(date);
setMonth(date);
}
}}
onKeyDown={(e) => {
if (e.key === "ArrowDown") {
e.preventDefault();
setOpen(true);
}
}}
/>
<Popover open={open} onOpenChange={setOpen}>
<PopoverTrigger asChild>
<Button
id="date-picker"
variant="ghost"
css={{
pos: "absolute",
top: "50%",
right: "2",
w: "6",
h: "6",
transform: "translateY(-50%)",
}}
>
<LuCalendar className={css({ w: "3.5", h: "3.5" })} />
<styled.span css={{ srOnly: true }}>Select date</styled.span>
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="end">
<Calendar
mode="single"
selected={date}
captionLayout="dropdown"
month={month}
onMonthChange={setMonth}
onSelect={(date) => {
setDate(date);
setValue(formatDate(date));
setOpen(false);
}}
/>
</PopoverContent>
</Popover>
</styled.div>
<styled.div css={{ color: "muted.fg", px: "1", textStyle: "sm" }}>
Your post will be published on{" "}
<styled.span css={{ fontWeight: "medium" }}>{formatDate(date)}</styled.span>.
</styled.div>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { type DateRange } from "react-day-picker";
import { LuChevronDown } from "react-icons/lu";
import { formatDateRange } from "little-date";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Label } from "@/components/ui/label";
import { Popover, PopoverContent, PopoverTrigger } from "@/components/ui/popover";
export default function Calendar30() {
const [range, setRange] = React.useState<DateRange | undefined>({
from: new Date(2025, 5, 4),
to: new Date(2025, 5, 10),
});
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="dates" css={{ px: "1" }}>
Select your stay
</Label>
<Popover>
<PopoverTrigger asChild>
<Button
variant="outline"
id="dates"
css={{ w: "56", justifyContent: "space-between", fontWeight: "normal" }}
>
{range?.from && range?.to
? formatDateRange(range.from, range.to, {
includeTime: false,
})
: "Select date"}
<LuChevronDown />
</Button>
</PopoverTrigger>
<PopoverContent css={{ w: "auto", overflow: "hidden", p: "0" }} align="start">
<Calendar
mode="range"
selected={range}
captionLayout="dropdown"
onSelect={(range) => {
setRange(range);
}}
/>
</PopoverContent>
</Popover>
</styled.div>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuPlus } from "react-icons/lu";
import { formatDateRange } from "little-date";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import { Card, CardContent, CardFooter } from "@/components/ui/card";
const events = [
{
title: "Team Sync Meeting",
from: "2025-06-12T09:00:00",
to: "2025-06-12T10:00:00",
},
{
title: "Design Review",
from: "2025-06-12T11:30:00",
to: "2025-06-12T12:30:00",
},
{
title: "Client Presentation",
from: "2025-06-12T14:00:00",
to: "2025-06-12T15:00:00",
},
];
export default function Calendar31() {
const [date, setDate] = React.useState<Date | undefined>(new Date(2025, 5, 12));
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<Card css={{ w: "fit", py: "4" }}>
<CardContent css={{ px: "4" }}>
<Calendar
mode="single"
selected={date}
onSelect={setDate}
css={{ bg: "transparent", p: "0" }}
required
/>
</CardContent>
<CardFooter
css={{
display: "flex",
flexDir: "column",
alignItems: "flex-start",
gap: "3",
borderTopWidth: "1px",
px: "4",
pt: "4!",
}}
>
<styled.div
css={{
display: "flex",
w: "full",
alignItems: "center",
justifyContent: "space-between",
px: "1",
}}
>
<styled.div css={{ textStyle: "sm", fontWeight: "medium" }}>
{date?.toLocaleDateString("en-US", {
day: "numeric",
month: "long",
year: "numeric",
})}
</styled.div>
<Button variant="ghost" size="icon" css={{ w: "6", h: "6" }} title="Add Event">
<LuPlus />
<styled.span css={{ srOnly: true }}>Add Event</styled.span>
</Button>
</styled.div>
<styled.div css={{ display: "flex", w: "full", flexDir: "column", gap: "2" }}>
{events.map((event) => (
<styled.div
key={event.title}
css={{
bg: "muted",
pos: "relative",
rounded: "md",
p: "2",
pl: "6",
textStyle: "sm",
_after: {
content: '""',
pos: "absolute",
insetY: "2",
left: "2",
bg: "primary/70",
w: "1",
rounded: "full",
},
}}
>
<styled.div css={{ fontWeight: "medium" }}>{event.title}</styled.div>
<styled.div css={{ color: "muted.fg", textStyle: "xs" }}>
{formatDateRange(new Date(event.from), new Date(event.to))}
</styled.div>
</styled.div>
))}
</styled.div>
</CardFooter>
</Card>
</styled.div>
);
}
"use client";
import * as React from "react";
import { LuCalendarPlus } from "react-icons/lu";
import { styled } from "styled-system/jsx";
import { Button } from "@/components/ui/button";
import { Calendar } from "@/components/ui/calendar";
import {
Drawer,
DrawerContent,
DrawerDescription,
DrawerHeader,
DrawerTitle,
DrawerTrigger,
} from "@/components/ui/drawer";
import { Label } from "@/components/ui/label";
export default function Calendar32() {
const [open, setOpen] = React.useState(false);
const [date, setDate] = React.useState<Date | undefined>(undefined);
return (
<styled.div
css={{
w: "full",
bg: "surface",
minW: "0",
minH: "svh",
display: "flex",
px: "4",
py: "12",
alignItems: "flex-start",
justifyContent: "center",
md: { py: "20" },
}}
>
<styled.div css={{ display: "flex", flexDir: "column", gap: "3" }}>
<Label htmlFor="date" css={{ px: "1" }}>
Date of birth
</Label>
<Drawer open={open} onOpenChange={setOpen}>
<DrawerTrigger asChild>
<Button
variant="outline"
id="date"
css={{ w: "48", justifyContent: "space-between", fontWeight: "normal" }}
>
{date ? date.toLocaleDateString() : "Select date"}
<LuCalendarPlus />
</Button>
</DrawerTrigger>
<DrawerContent css={{ w: "auto", overflow: "hidden", p: "0" }}>
<DrawerHeader css={{ srOnly: true }}>
<DrawerTitle>Select date</DrawerTitle>
<DrawerDescription>Set your date of birth</DrawerDescription>
</DrawerHeader>
<Calendar
mode="single"
selected={date}
captionLayout="dropdown"
onSelect={(date) => {
setDate(date);
setOpen(false);
}}
css={{ mx: "auto", "--cell-size": "clamp(0px, calc(100vw / 7.5), 52px)" }}
/>
</DrawerContent>
</Drawer>
<styled.div css={{ color: "muted.fg", px: "1", textStyle: "sm" }}>
This example works best on mobile.
</styled.div>
</styled.div>
</styled.div>
);
}