Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProA month grid where only months that have an invoice can be opened, with the others dimmed and explained, and an invoice count for the chosen month. Use this when a customer browses invoices or statements and only some months have one.
This item has no props to tune. Use the lens above to change theme, density, direction and more.
Use it when a customer browses invoices or statements and only some months have one.
Do not use it when every month is valid; use month-picker.
It composes month-picker and date-time-core, which the CLI installs for you.
import { BillingPeriodSelector } from "@/components/billing-period-selector"<BillingPeriodSelector
invoices={{ "2026-08": 1, "2026-09": 2 }}
onValueChange={(month, count) => open(month)}
/>| Prop | Type | Default | Description |
|---|---|---|---|
| invoices | Record<string, number> | - | Invoice count by YYYY-MM. |
| onValueChange | (month: string, count: number) => void | - | Called with the month and how many invoices it has. |
| today / locale | - | - | Reference day and locale. |
The pattern ships with a Testing Library test (billing-period-selector.test.tsx) that covers disabled months, picking a month with invoices and the count text.