Compact Date Picker

Forms 2

About

A small, framer-motion-animated date picker with dense, minimal, narrow, inline and bare layout variants for tight spaces like toolbars or inline text.

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

Code

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

Usage.tsx

import {
  DenseDatePicker,
  MinimalDatePicker,
  NarrowDatePicker,
  InlineCompactDatePicker,
  BareDatePicker,
} from "@/components/ui/date-picker-compact";

export default function DatePickerCompactDemo() {
  return (
    <div className="flex w-full flex-col items-center justify-center gap-8 p-10">
      <div className="flex flex-wrap items-start gap-8">
        <div className="flex flex-col gap-2">
          <span className="text-xs font-medium text-muted-foreground">
            Dense
          </span>
          <DenseDatePicker />
        </div>
        <div className="flex flex-col gap-2">
          <span className="text-xs font-medium text-muted-foreground">
            Minimal
          </span>
          <MinimalDatePicker />
        </div>
        <div className="flex flex-col gap-2">
          <span className="text-xs font-medium text-muted-foreground">
            Narrow
          </span>
          <NarrowDatePicker />
        </div>
        <div className="flex flex-col gap-2">
          <span className="text-xs font-medium text-muted-foreground">
            Bare
          </span>
          <BareDatePicker />
        </div>
      </div>
      <p className="text-sm text-foreground">
        Pick a date: <InlineCompactDatePicker />
      </p>
    </div>
  );
}