Pricing Usage Slider · Sections

Components Themes Docs

Components
/
Pricing
/
Pricing Usage Slider

Pricing Usage Slider

Range input that estimates a monthly bill from projected volume.

PricingInteractivecalculator interactive usage0 views

More pricing sections

Pricing Three Tiers

Classic three-card layout with the middle plan emphasised.

Pricingtierscards

Pricing Monthly Toggle

Two plans with a monthly/annual switch that recalculates the price.

PricingInteractivetoggleinteractive

Pricing Single Plan

One product, one price, split between the pitch and the payment panel.

Pricingsinglesplit

PreviousPricing Feature Matrix NextPricing Compact List

Sections

React sections that take every visual value from CSS custom properties, so a copied snippet looks the same in your project as it does here.

Library

All components
Theme presets
Documentation

Authoring

Admin guide
Manage components
Import & export

Built with Next.js, Prisma and Sucrase. Previews run in a sandboxed iframe.