Squircle.JS

A squircle element for your favourite frontend framework!

Library

React

Open Source

50,000+ users

Launched March 2021

5K+weekly npm downloads

500+GitHub stars

Overview

Apple's interfaces feel different. Part of that magic is a subtle shape: the squircle — a superellipse with continuous curvature that looks smoother and more natural than a standard rounded rectangle. It's everywhere in iOS, but it didn't exist on the web. So we built it.

Squircle.JS brings mathematically accurate squircle shapes to React, Vue, and vanilla JavaScript. It's the detail most users can't name but immediately feel.

The Challenge

CSS border-radius creates circular arcs that abruptly meet straight edges. The result looks "off" next to native iOS UI. Designers knew the difference; developers had no tool to fix it. We needed to:

• Render mathematically correct superellipse curves on the web
• Support React, Vue, and vanilla JS without framework lock-in
• Keep bundle size tiny enough for production use

Technical Stack

• Core: TypeScript with canvas-based rendering
• React: React component with hooks
• Vue: Vue 3 composition API component
• Build: Rollup for optimized bundles

Key Features

Pixel-Perfect Curves

Based on the superellipse formula — not an approximation. The same continuous curvature Apple uses, running in your browser.

Works Everywhere

First-class React, Vue, and vanilla JavaScript components. Drop it into whatever stack you're using.

Fully Controllable

Tune corner radius, smoothing factor, and apply to any element. Make it subtle or dramatic.

Results

Over 50,000 downloads across npm. Used by companies worldwide to bring Apple-level shape quality to their web interfaces. The product icons on this very website use Squircle.JS — you've been looking at it this whole time.

Lessons Learned

1. Great documentation is distribution: for open source, docs aren't supplementary — they're the primary growth channel
2. Every kilobyte costs a user: tree-shaking and minimal bundle size aren't optimization — they're table stakes
3. Multi-framework support multiplies reach: supporting React, Vue, and vanilla JS tripled the addressable audience without tripling the work