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

Squircle.JS is an open source library that brings Apple's signature squircle shapes to the web. It provides React, Vue, and vanilla JS components for creating smooth, continuous-curvature rounded rectangles.

The Challenge

Apple's iOS uses a unique shape called a "squircle" - a superellipse that looks smoother than a standard rounded rectangle. We wanted to bring this design element to web developers:

• Mathematically accurate squircle rendering
• Framework-agnostic with React, Vue, and vanilla JS support
• High performance for use in production applications

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

Mathematical Accuracy

Uses the superellipse formula to create mathematically correct squircles.

Framework Support

First-class support for React, Vue, and vanilla JavaScript.

Customizable

Control corner radius, smoothing factor, and apply to any element.

Results

Squircle.JS has been downloaded over 50,000 times and is used by companies worldwide to add Apple-style polish to their interfaces. Fun fact: the product icons on this website use Squircle.JS!

Lessons Learned

1. Documentation matters: Good docs drive adoption for open source
2. Bundle size is critical: Tree-shaking support is essential
3. Cross-framework support expands reach: Supporting multiple frameworks multiplies your audience