Tone Date Picker

Forms

About

A dropdown date picker with a month-grid calendar that comes in five semantic color tones (info, success, warning, danger, muted) for forms that need to signal meaning through color.

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

Code

How Tone Date Picker is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

"use client";

import DatePicker, {
  SuccessDatePicker,
  WarningDatePicker,
  DangerDatePicker,
} from "@/components/ui/date-picker-tone";

export default function DatePickerToneDemo() {
  return (
    <div className="flex flex-wrap items-start gap-6 p-10">
      <DatePicker placeholder="Info date" />
      <SuccessDatePicker placeholder="Success date" />
      <WarningDatePicker placeholder="Warning date" />
      <DangerDatePicker placeholder="Danger date" />
    </div>
  );
}