Pricing 1

A pricing block with a single plan that displays a price with animated transitions. It updates the price when the billing period changes. Use it to show a simple pricing option with a toggle for monthly or annual billing.

byEdu Calvo from Smoothui

Installation

terminal

pnpm dlx layro-cli add @educlopez/pricing-1

npx layro-cli add @educlopez/pricing-1

npx layro-cli add @educlopez/pricing-1

bunx layro-cli add @educlopez/pricing-1

New project? Start with init. Writes third-party code and installs packages with scripts off.

Code

Dependencies

Demo

"use client";

import SmoothButton from "@/components/smoothui/smooth-button";
import {
  ToggleGroupItem,
  ToggleGroupRoot,
} from "@/components/smoothui/toggle-group";
import { cn } from "@/lib/utils";
import { motion, useReducedMotion } from "motion/react";
import { useEffect, useRef, useState } from "react";

interface PriceFlowProps {
  className?: string;
  value: number;