Precios de tres planes
Tres planes con selector mensual/anual y el plan destacado invertido.
Descargar gratisSecciones de precios para React
Planes, tablas comparativas, precios por uso con deslizador, paquetes de créditos, configuradores modulares y plan único. Cada diseño resuelve una manera distinta de presentar lo que cuesta un servicio.
Los planes, importes y características se pasan por props.
Para qué sirven
- SaaS con tres planes y un plan destacado
- Servicios que cobran por consumo o por paquete
- Páginas de cotización con configuración a la medida
11 componentes de precios
Tabla comparativa de precios
Matriz de funciones por plan, con columna destacada y primera columna fija.
Descargar gratisPrecios por uso con deslizador
Un deslizador de volumen calcula el precio mensual al instante.
Descargar gratisPrecios neobrutalistas
Tarjetas de color plano con sombra dura, sello inclinado y viñetas cuadradas.
Descargar gratisPlan único
Una sola oferta, tipográfica, sobre un fondo de color pleno.
Descargar gratisPrecios por paquetes de créditos
Selector de paquetes con coste unitario y total actualizado; callback de elección sin realizar cobros ni simular compras.
Descargar gratisConfigurador de plan modular
Plan modular con casillas reales, desglose de extras y suma mensual; devuelve la selección y el total mediante callback.
Descargar gratisPrecios claymorfismo
Tres planes de plastilina con el recomendado más grande, interruptor blando mensual/anual y lista de beneficios.
Descargar gratisPrecios liquid glass
Planes translúcidos sobre fondo de color y un selector segmentado cuya pastilla de vidrio se desliza entre mensual y anual.
Descargar gratisPrecios Material Design 3
Botón segmentado para el periodo, tarjetas outlined, tonal y filled, y chips de beneficios según Material 3.
Descargar gratisPrecios neumorfismo
Superficies grises extruidas, selector de periodo hundido, lista en relieve inverso y botón que se presiona hacia dentro.
Descargar gratis