This project aims to bring the iOS-style squircle to your front-end projects.

📕 Documentation

Features

• 💃 Responsive squircle element that can be used any an intrinsic component.
• 🙏 Fallback solution for No-JavaScript.
• 👌 CommonJS and ES6 (tree-shakeable).
• 🚀 Available for React (with react@18 support), with other frameworks coming later.
• 🐁 Just 2.1kB gzipped.
• 🧨 Documented usage examples.

Drawbacks

• Uses JavaScript to apply corner smoothing (no way to do it with CSS only for now).
• Does not currently support border-width. Works great with just background color.

What the 🤡 is a Squircle???

This is a valid question and not everyone is aware of what a Squircle is. A squircle is an intermediate shape between a square and a circle - Webflow Blog. If you've ever seen an iPhone home screen, you've seen a squircle. When you add additional corner smoothing to a regular rectangle with rounded corners, you get a squircle. It's a long story, but in short - you can't achieve Squircles in plain CSS, we have to do extra calculations for that, which is where the figma-squircle package comes in. Building on top of that package, this project adds bindings for UI libraries that make it possible to use it just like a regular html component, without worrying about layout-specific things.

Visually, this post from Figma Blog shows the difference really well:

Usage

With React

Step 1

Star this repo ❤️

Step 2

Install the package

pnpm add @squircle-js/react

Step 3

Add to your project

import { Squircle } from "@squircle-js/react";

const YourComponent = () => {
  return (
    <Squircle
      cornerRadius={10}
      cornerSmoothing={1}
      className="p-4 bg-black text-white"
    >
      Squircle!
    </Squircle>
  );
};

Also, add a global component to ensure it still works when JavaScript is disabled.

// _app.tsx, or root-level layout.tsx
import { SquircleNoScript } from "@squircle-js/react";

...
<SquircleNoScript />
...

Websites using it

• quassum.com

License

This project is licensed under MIT License