Date Picker

A month-grid calendar for picking a single date or a date range, with keyboard navigation and a springy pixel-drawn selection highlight.

Built with React and Tailwind. Copy the prompt and paste it into Claude Code, Cursor or Lovable: your agent adds Date Picker to your project and fits it to your theme.

import { PxDate } from "@/components/ui/px-date";

export default function PxDateDemo() {
  return (
    <div className="flex items-center justify-center p-10">
      <PxDate name="trip" range defaultValue="2026-10-20/2026-10-24" />
    </div>
  );
}