PricingSlider Loops

Pricing 181

About

1:1 replica of Loops pricing. An interactive pricing calculator component designed to help users estimate their monthly cost based on subscriber count. It features a range slider limited to discrete pricing breakpoints (from 0 to 1M+ subscribers) and dynamically updates both the subscription label and corresponding price in real time.

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

Code

How PricingSlider Loops is used: the demo's code. The component's own source comes with a free account.

Usage.tsx

import {LoopsPricingSlider} from "@/components/ui/pricing-slider-loops";

export default function DemoOne() {
  return (
    <main className="bg-[#F0F0F0] w-screen min-h-screen flex flex-col items-center justify-center">
    <div className="flex flex-col gap-2 items-center justify-center text-center">
      <p className="font-bold text-base text-[#78716c] tracking-[0.4px]">Pricing</p>
      <h1 className="text-4xl font-bold">One price, all the things
</h1>
      <p className="tracking-[0.4px] leading-[1.4em] text-center max-w-md mt-2 text-[#78716c]">Send product, marketing, and transactional emails with 
flawless deliverability and a design-first approach.
</p>
</div>

      <LoopsPricingSlider />;
    </main>
  )
}