Squircle.JS

Apple-style squircles for your favourite frontend framework.

Library

React

Open Source

Launched March 2021

40K+npm downloads/month

300+GitHub stars

Overview

Part of what makes Apple’s interfaces feel right is the squircle: a superellipse with continuous curvature, smoother than any rounded rectangle CSS can draw. It’s everywhere in iOS and didn’t exist on the web. So we built it.

Squircle.JS renders mathematically accurate squircles in React, Vue, Svelte, and Solid.

The Challenge

CSS border-radius draws circular arcs that abruptly meet straight edges, and next to native iOS UI the difference shows. We needed to:

• Render correct superellipse curves on the web
• Ship first-class packages for React, Vue, Svelte, and Solid
• Keep the bundle small enough that nobody thinks twice about adding it

Key Features

• Accurate curves: the superellipse formula, the same continuous curvature Apple uses
• Framework packages: dedicated React, Vue, Svelte, and Solid packages, with directives for applying squircles straight to elements in Vue and Svelte
• Fully controllable: tune corner radius and smoothing on any element

Results

The React package alone pulls 40,000+ npm downloads a month. 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 are the primary growth channel
2. Every kilobyte costs a user: libraries get cut over bundle size, so a tiny footprint was a requirement from day one
3. Multi-framework support multiplies reach: each framework package expanded the audience without rewriting the core