Seat-Based Pricing Slider

A single pricing card with a slider to pick team size, live-updating the monthly price and per-seat cost as the user drags.

diarmuradi

byDiar Muradi

import Pricing from "@/components/ui/pricing-5";

export default function PricingDemo() {
  return (
    <div className="flex w-full items-center justify-center p-8">
      <Pricing />
    </div>
  );
}

Dependencies

motion lucide-react

Source

diarmuradi.com/r/pricing-5.json

Published

9/21/2026

Similar components

Explore more

Slider components217 SaaS components311 Subscription components46 Pricing components105

Dependencies

Tags

Newest

Popular

Shaders

Heros

Features

AI Chat Components

Calls to Action

Buttons

Testimonials

Pricing Sections

Text Components

Dependencies

Tags

Seat-Based Pricing Slider

Dependencies

Tags

Source

Published

Similar components

Explore more