Pricing Section With Booking Availability
Agency pricing with a per-project or retainer switch, animated prices and a strip of start months that shows real availability.
Features
- A per-project or monthly switch (a keyboard radio group) that counts each price to its new figure
- A strip of the next six months per plan: booked months struck through, open ones selectable
- Choosing a start month rewrites the plan's timeline ("Kick-off Jan 11 · Live by Feb 8") and its button
- A client quote on every plan, one featured plan on a dark card and a wide custom plan below
- Dates are computed in UTC from ISO days, so server and browser always agree
- Prices and units swap at once for reduced motion
Best for: Agencies, studios and freelancers who sell fixed-price work and want buyers to see real capacity and dates.
Installation
npm install motion lucide-react @radix-ui/react-slot class-variance-authority clsx tailwind-mergeThen copy the files from the Code tab into the same paths in your project, in TypeScript or JavaScript.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| title | string | - | The headline's first line. |
| description | string | - | Optional paragraph beside the headline. |
| eyebrow | string | - | Optional small label above the headline. |
| modes | BillingMode[] | - | Billing modes: id, label, unit under the price, and the timeline's end label. |
| plans | Plan[] | - | Two or three plans: name, description, prices and weeks by mode id, features, bookedMonths (YYYY-MM), quote, ctaLabel, href, isFeatured, highlight. |
| kickoffs | string[] | - | One kick-off day per upcoming month, as ISO days. Six fit a card. |
| customPlan | CustomPlan | - | Optional wide plan under the grid: name, description, priceNote, features, quote, cta, replyNote. |
| availabilityNote | string | - | Optional plain line about capacity beside the switch. |
| currency | string | "USD" | ISO currency code for the prices. |
| locale | string | "en-US" | Locale for prices and dates. |
| fullyBookedLabel | string | "Fully booked for now" | Shown on a plan with no open month. |
| toggleLabel | string | "Billing" | What screen readers call the switch. |
| className | string | - | Extra classes for the section. |
FAQ
Is the Pricing Section With Booking Availability free to use?
Yes. Pricing Section With Booking Availability is free to copy into your own projects. Open the Code tab and paste the files into your app.
Does Pricing Section With Booking Availability work with Next.js and React?
Yes. It's a React client component made for the Next.js App Router, styled with Tailwind CSS and animated with Framer Motion (the motion package).
Can I use Pricing Section With Booking Availability in JavaScript instead of TypeScript?
Yes. Every file comes in TypeScript and JavaScript. Switch the language in the Code tab.
What does Pricing Section With Booking Availability need installed?
motion, lucide-react, @radix-ui/react-slot, class-variance-authority, clsx, tailwind-merge, plus the shared helpers from the Installation page.
Is Pricing Section With Booking Availability accessible?
Every link and button is reachable by keyboard with a visible focus ring, and the animation stays still for visitors who ask for reduced motion.