Pricing 03
NewUsage-based pricing with a slider: drag the events a month and the total, the base-plus-usage breakdown and the rate bands update live.
Installation
pnpm dlx shadcn@latest add https://kagadmodyaa.vercel.app/r/pricing-03.jsonNeeds a React + Tailwind project set up with shadcn. Copies the block's files into your project, along with the components it uses, so you can edit all of it.
Usage
This block is a section, not a page. Import it where you want it, alongside your other sections.
import { Pricing03 } from '@/components/pricing-03/pricing-03'
export default function Page() {
return (
<main>
<Pricing03 />
</main>
)
}Files
What the command adds to your project, and where.
components/pricing-03/pricing-03.tsxThe section. Import it into any page and render it; it fills the width of its parent.
It also installs the components it is built from, unless you already have them: Button, Slider.
Links, copy and the product name are placeholders; swap in your own. Where a block has a form, its submit handler is a stub for your own request.
More in Pricing
- Pricing 01Three plans with a monthly and yearly switch, a highlighted middle plan, and a compact comparison table that folds away on a phone.
- Pricing 02Two plans side by side, Free and Pro, set like a printed price list: one very large figure each, a short list and a row of notes below.
- Pricing 04Four plans in a compact row with a lifted, inverted favourite, a USD, EUR and GBP select and a monthly or yearly switch that change every price.
- Pricing 05Enterprise pricing: three plans, a grouped feature matrix with a sticky header and tooltips, a talk-to-sales band, and one accordion per plan on a phone.
- Pricing 06Single-plan pricing: one price, everything included in two columns, three short questions beside it and a money-back note.
- Pricing 07A pricing calculator with a seat stepper, add-on switches, a yearly toggle, a sticky itemised total and a volume-discount table that highlights your tier.