Components
Loading preview...
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.
@radu-activation-popescu
npx shadcn@latest add https://21st.dev/r/radu/pricing-slider-loopsimport {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>
)
}