---
title: "Calculator — Framer component · Best of Framer"
description: "$9.00 · Framer component · by the 47design · Interactive. Product description A modern, soft-UI (neumorphic) calculator component built for Framer."
canonical: "https://framer.elliotli.dev/component/calculator"
---

[Home](/)/[Components](/components)/[Interactive](/components/category/interactive)/Calculator

# Calculator

[View on Framer](https://framer.com/marketplace/components/calculator/?via=elliot-li)

![Calculator preview image 1](https://framer.elliotli.dev/og/component/calculator/9e66f7b47458c2c0/1600x1200.jpg)

## Summary

Product description A modern, soft-UI (neumorphic) calculator component built for Framer.

## Description

## Product description

A modern, soft-UI (neumorphic) calculator component built for Framer. It combines a clean, tactile look with robust, production-ready calculator behaviour and designer-friendly properties. The component is responsive and readable on phones and desktop, keeps input tidy by auto-scaling the display for long numbers, and includes a light/dark theme so it fits any UI. Everything is implemented with inline styles and Framer property controls so designers can drop it into a project and customize it without touching code.

## Key features (what we implemented)

-   Neumorphic visual design - Soft, elevated card with inset display and rounded keys for a modern, tactile appearance.
    
-   Light & Dark themes - Built-in theme palettes and a theme toggle. Also exposed as a Framer property so you can set the default theme from the inspector.
    
-   Framer Properties / Controls - defaultTheme and showThemeToggle (plus width) exposed via addPropertyControls so designers can change theme and toggle visibility from the right-hand panel.
    
-   Full calculator logic - Digit input, decimal point, AC (clear), ± (toggle sign), % (percent), basic arithmetic (+ − × ÷), equals, and 00 key. Works on mouse and touch.
    
-   Pending-operation preview - Shows the accumulator + current operator above the display (e.g., 12 +) so users can see the pending calculation.
    
-   Responsive, roomy layout - Larger default layout with increased spacing and comfortable hit targets; keys and display scale smoothly to avoid feeling cramped.
    
-   Auto-shrinking display text - Display font size steps down automatically as the number of digits grows so values never overflow the display area.
    
-   Press & touch visual feedback - Keys visually depress when pressed (quick flash) to give tactile feedback on click/touch.
    
-   Wide 0 key and intuitive key sizing - 0 spans two columns for easier thumb use on mobile.
    
-   Accessible interactions - Uses normal button elements (keyboard & assistive tech friendly) and avoids non-semantic clickable divs for controls.
    
-   Easy insertion into Framer - Single-file React component with inline styles — drop it into a Framer project, insert the code component, then edit properties in the inspector.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #8275

## Details

- **Author**: the 47design
- **Price**: $9.00
- **Published**: 2025-11-27
- **Updated**: 2025-11-27
- **Added**: 2025-11-13
- **Categories**: Interactive

## More like this

-   [Velvet Curtain](/component/velvet-curtain) — Sarthak Prakash · $12 — Cinematic curtain reveal effect
-   [Image-Compare Slider](/component/image-compare-slider) — Studio Digital · Free — Reveal what changed, beautifully
-   [Lesson Packages](/component/lesson-packages) — Shelfless Studio · $9 — Lesson bundles with savings shown
-   [Deskbell AI Chatbot](/component/deskbell-ai-chatbot) — NS. Studio · Free — AI site chat, works with Chatbase