ComponentsPrice Flow

Price Flow

A smooth animated price display component that transitions individual digits with slide animations. Perfect for displaying prices, counters, and metrics with elegant digit-by-digit transitions.

2255€

Code

Install with shadcn

Terminal

npx shadcn@latest add @smoothui/price-flow

Or install the demo

Terminal

npx shadcn@latest add @smoothui/price-flow-demo

Add the CSS

global.css

@layer utilities {
  .slide-in-up {
    animation: slideInUp 0.3s forwards;
  }

  .slide-out-up {
    animation: slideOutUp 0.3s forwards;
  }

  .slide-in-down {
    animation: slideInDown 0.3s forwards;
  }

  .slide-out-down {
    animation: slideOutDown 0.3s forwards;
  }

  @keyframes slideInUp {
    from {
      transform: translateY(50px);
      filter: blur(5px);
    }
    to {
      transform: translateY(0px);
      filter: blur(0px);
    }
  }

  @keyframes slideOutUp {
    from {
      transform: translateY(0px);
      filter: blur(0px);
    }
    to {
      transform: translateY(-50px);
      filter: blur(5px);
    }
  }

  @keyframes slideInDown {
    from {
      transform: translateY(-50px);
      filter: blur(5px);
    }
    to {
      transform: translateY(0px);
      filter: blur(0px);
    }
  }

  @keyframes slideOutDown {
    from {
      transform: translateY(0px);
      filter: blur(0px);
    }
    to {
      transform: translateY(50px);
      filter: blur(5px);
    }
  }
}

How to use

Demo.tsx

"use client"

import { useState } from "react"

import { Button } from "@/components/button"
import PriceFlow from "@/components/smoothui/ui/PriceFlow"

const PriceFlowDemo = () => {
  const [value, setValue] = useState(25)

  const handlePriceChange = () => {
    setValue(value === 25 ? 16 : 25)
  }

  return (
    <div className="flex flex-col items-center gap-8 p-8">
      <div className="text-center">
        <div className="text-foreground text-6xl font-bold">
          <PriceFlow value={value} />€
        </div>
      </div>

      <div className="flex gap-4">
        <Button type="button" onClick={handlePriceChange} variant="candy">
          Change Price
        </Button>
      </div>
    </div>
  )
}

export default PriceFlowDemo

Props

Prop	Type	Default
value	number	-
className?	string	-

Animated OTP Input

Smooth animated OTP input component with staggered animations, scale effects, and enhanced visual feedback for better user experience

Contribution Graph

GitHub-style contribution graph component with proper date calculations and month colspan handling