Components
Loading preview...
The ChronoSelect component is a modern, shadcn-inspired date selection tool that combines accessibility, flexibility, and a clean design. Unlike traditional date pickers, ChronoSelect includes a built-in year selector alongside the calendar view, allowing users to jump across decades without tedious navigation. Its interface uses shadcn primitives like Popover, Select, and Calendar to ensure consistency across your UI, while providing customization options such as adjustable year ranges and placeholder text. With pill-shaped interactions, smooth transitions, and responsive layout, ChronoSelect feels both elegant and practical—ideal for forms, dashboards, booking systems, or any application where quick and intuitive date selection is essential.
npx shadcn@latest add https://21st.dev/r/ruixen.ui/chrono-select"use client"
import * as React from "react"
import { ChronoSelect } from "@/components/ui/chrono-select"
export default function ChronoSelectDemo() {
const [date, setDate] = React.useState<Date | undefined>()
return (
<div className="p-8 space-y-6">
<h1 className="text-xl font-semibold">Date Picker Demo</h1>
<ChronoSelect
value={date}
onChange={setDate}
yearRange={[1990, 2035]}
/>
{date && (
<p className="text-sm text-muted-foreground">
You selected: {date.toDateString()}
</p>
)}
</div>
)
}