Calculation

An interactive calculator component with 21 operations including sum, average, percentage, power, factorial, GCD, and LCM. Accepts comma-separated values and shows the formatted result instantly.

calculation-01

calculation-02

calculation-03

calculation-04

calculation-05

calculation-06

calculation-07

calculation-08

calculation-09

calculation-10

calculation-11

calculation-12

calculation-13

calculation-14

calculation-15

calculation-16

calculation-17

calculation-18

calculation-19

calculation-20

calculation-21

Installation

pnpm dlx shadcn@latest add https://designali.com/r/calculation.json

Usage

import { Calculation } from "@/components/ui/calculation"
<Calculation />
<Calculation defaultOperation="average" defaultInput="10, 20, 30, 40" />

Operations

ValueLabelInputs Used
sumSumAll values
averageAverageAll values
minMinimumAll values
maxMaximumAll values
countCountAll values
addAddFirst two values
subtractSubtractFirst two values
multiplyMultiplyFirst two values
divideDivideFirst two values
percentagePercentageFirst two values
percentage-changePercentage ChangeFirst two values
remainderRemainderFirst two values
powerPowerFirst two values
sqrtSquare RootFirst value
absoluteAbsoluteFirst value
roundRoundFirst value
floorFloorFirst value
ceilCeilingFirst value
factorialFactorialFirst value
gcdGCDFirst two values
lcmLCMFirst two values

Props

PropTypeDefault
defaultOperationOperation"sum"
defaultInputstring"100, 200, 300"
classNamestring—
...propsHTMLAttributes<div>—