Components
TimelineSelect
The Timeline / Date-Aware Select is a sophisticated dropdown component that allows users to select events or items while seeing their temporal context. Each option carries a date, and the dropdown visually arranges them along a timeline with a progress indicator, giving users a quick sense of chronological order. The component supports searching and filtering through events, full keyboard navigation using arrow keys, and selection with the Enter key. When an option is selected, the input field updates to show the chosen event, and the dropdown closes automatically, while users can type again to search and select a different option. Designed with shadcn UI, it combines clarity, accessibility, and usability, making it ideal for scheduling apps, activity logs, project timelines, or any application where understanding the temporal relationship between items is crucial.
Loading preview...
"use client";
import TimelineSelect from "@/components/ui/timeline-select";
const sampleEvents = [
{ value: "1", label: "Project Kickoff", date: "2025-09-01" },
{ value: "2", label: "Design Review", date: "2025-09-05" },
{ value: "3", label: "Prototype Complete", date: "2025-09-12" },
{ value: "4", label: "User Testing", date: "2025-09-18" },
{ value: "5", label: "Launch", date: "2025-09-25" },
];
export default function Page() {
return (
<div className="flex items-center justify-center">
<div className="p-6 bg-white rounded-2xl shadow-lg w-full max-w-lg border">
<h1 className="text-xl font-semibold mb-4">Timeline / Date-Aware Select</h1>
<TimelineSelect options={sampleEvents} />
</div>
</div>
);
}