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.
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.
the 47design
