DateRangePicker

A hand-built date range picker in the Neon language.

DateRangePicker is a range picker built from scratch in the house vocabulary — no calendar library. The trigger is a mono pill reading the range; the panel opens with a preset rail (one click, done) beside a single month grid. Pick a start and the tentative range washes primary/10 under the pointer; the second click lands the end and closes. Today wears a hairline ring, never color — color belongs to the selection. UsagePanel rides it in the filter slot to drive consumption queries.

"use client";

import { useState } from "react";

import type { DateRange } from "./date-range-picker";
import { DateRangePicker } from "./date-range-picker";
import { billingPresets, sampleRange } from "./fixtures";

export const DateRangePickerDemo = () => {
  const [range, setRange] = useState<DateRange>(sampleRange);

  return (
    <DateRangePicker
      onValueChange={setRange}
      presets={billingPresets}
      value={range}
    />
  );
};

export default DateRangePickerDemo;

Install

npx shadcn@latest add https://ui.neon.com/r/date-range-picker.json

Usage

import { DateRangePicker } from "@/components/neon-ui/date-range-picker";

<DateRangePicker
  value={range}
  onValueChange={(next) => {
    setRange(next);
    refetchUsage(next);
  }}
/>;

Props

PropType

valueDateRange

{ from: Date; to: Date }

TypeDateRange

onValueChange(range: DateRange) => void

Fires when a range lands (second click or preset).

Type(range: DateRange) => void

presets?DateRangePreset[]

Quick ranges in the rail: { label, days }.

TypeDateRangePreset[]

Defaultlast 7 / 14 / 30 days

disableFuture?boolean

Days after today stay unselectable.

Typeboolean

Defaulttrue

Accessibility

Every day is a real button labelled by its number inside a labelled month; disabled future days are disabled.
Presets and month navigation are plain buttons — the whole panel is keyboard-traversable with Tab.
The Base UI popover contributes focus management, Escape dismissal, and outside-click close.
Panel entrance and month crossfade are static under prefers-reduced-motion.