Forms

Date Selector

A premium interactive date selector card featuring a sliding pointer, weekday headings, and height-expanding day capsules.

Loading calendar...

Installation

Option A: Via Sora UI CLI (Recommended)

If your project uses `shadcn/ui`, you can install this component and its dependencies automatically:

npx soraui-cli add date-selector

Option B: Manual Copy-Paste

1. Copy the code from the Code > Component tab above.

2. Paste it in your project at components/date-selector.tsx.

3. Install the dependencies:

npm install framer-motion lucide-react clsx tailwind-merge

API Reference

Detailed customization details for the Date Selector widget. Style selections, background frames, and capture click callbacks.

Prop	Type	Default	Description
`initialSelectedIndex`	`number`	`2`	Default active selection index (0-indexed).
`activeColor`	`string`	`"#ff3b30"`	Date highlight circle background and glow color (hex).
`componentColor`	`string`	`"#ededf2"`	Outer widget card background color (hex).
`days`	`DayData[]`	`DEFAULT_DAYS`	Array of 5 DayData structures representing columns.
`onChange`	`(idx: number, day: DayData) => void`	`—`	Fires whenever a day capsule is selected.

Examples

Basic Setup

Default selector displaying dates from Thursday 4th to Monday 8th.

App.tsx

import { DateSelector } from "@/components/ui/date-selector";

export default function Demo() {
  return (
    <DateSelector 
      onChange={(idx, day) => console.log("Selected:", day)}
    />
  );
}

Custom Theme & Dates

Displays custom days (M-F) with green highlight circles and a light gray background.

App.tsx

import { DateSelector } from "@/components/ui/date-selector";

const CUSTOM_DAYS = [
  { label: "M", date: 12 },
  { label: "T", date: 13 },
  { label: "W", date: 14 },
  { label: "T", date: 15 },
  { label: "F", date: 16 }
];

export default function App() {
  return (
    <DateSelector
      days={CUSTOM_DAYS}
      initialSelectedIndex={0}
      activeColor="#34c759" // Green theme
      componentColor="#f2f2f7" // Light gray card
      onChange={(idx, day) => console.log("Selected custom:", day)}
    />
  );
}