---
title: "Pricing Toggle Pro — Free Framer component · Best of Framer"
description: "Free Framer component · by ck k · Buttons. A beautiful component in Framer."
canonical: "https://framer.elliotli.dev/component/pricing-toggle-pro"
---

[Home](/)/[Components](/components)/[Buttons](/components/category/buttons)/Pricing Toggle Pro

# Pricing Toggle Pro

A beautiful component in Framer.

[View on Framer](https://framer.com/marketplace/components/pricing-toggle-pro/?via=elliot-li)

![Pricing Toggle Pro preview image 1](https://framer.elliotli.dev/og/component/pricing-toggle-pro/5dca4bea624a8bb5/1600x1344.jpg)

## Summary

A beautiful component in Framer.

## Description

A fully animated, highly customizable pricing toggle component for Framer. It features 7 style variants, full color control over every element, a usage-based pricing slider, 10 independently controllable effects, and demo mode for previews, and more!

Version: 1.0

Changelog

v1.0 — Initial release

-   7 style variants: Dark Luxury, Glass, Minimal, SaaS Clean, Bold, Editorial, Slate
    
-   16 fully overridable color controls
    
-   10 configurable effects with individual sub-controls
    
-   Usage-based pricing slider (linear, tiered, flat)
    
-   1–4 plans with all fields editable
    
-   Framer font picker for display and body fonts
    
-   Demo mode with rapid-toggle guard
    
-   Performance mode
    
-   And more!
    

🎬 Demo Mode

Automatically toggles between Monthly and Annual every 4 seconds. Perfect for Framer previews and marketplace demos, but turn off for live sites since it won't really be needed!

⚡ Performance Mode

Disables the three heaviest effects: 3D Card Tilt, Particle Burst, and Shimmer with a single toggle. It is recommended for sites with many other animations or lower-end devices.

## Rank history [How rankings work →](/terms#rankings)

-   All · #4561

## Details

- **Author**: ck k
- **Published**: 2026-06-20
- **Updated**: 2026-06-25
- **Added**: 2026-06-20
- **Categories**: Buttons

## More like this

-   [Eye Glow Button](/component/eye-glow-button) — Frame Native · Free — Cursor-following eyes, soft glow
-   [Dash Stretch Button](/component/dash-stretch-button) — Pentaclay · Free — Animated Hover Button With a Dash
-   [Nova Theme Toggle](/component/nova-theme-toggle) — Shouvik Biswas · $12 — Three-Mode Theme Toggle
-   [Nabby: Copy Button](/component/nabby-copy-button) — Francesco Gallo · Free — Plug in your button, copy anything