Update v4.2 - New components, 10+ framework guides, and quality improvements. Visit Changelog

Tailwind CSS Toggle Count

The Toggle Count Component allows users to switch from one value to another, commonly utilized on pricing pages for toggling between different pricing structures like monthly and annual rates. It offers a clear, user-friendly interface, enhancing the decision-making process for potential customers by simplifying the comparison of distinct values.

Requires JS

Note that this component requires the use of our Toggle Count plugin, else you can skip this message if you are already using Preline UI as a package.

Segmented pricing toggle

Use segmented radio-style options to switch between values such as monthly and annual pricing.

Switch pricing toggle

Use a switch control to toggle between two pricing values.

Destroy and reinitialize

Use the destroy method before reinitializing the component when toggle-count instances need to be rebuilt.

© 2026 Preline Labs.