@squircle-js/react

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.

$3

- 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:

!preview-example

Usage

$3

#### Step 1

Star this repo ❤️ and follow Antoni on Bsky

#### Step 2

Install the package

``bash
pnpm add @squircle-js/react
`

#### Step 3

Add to your project

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

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

);
};
`

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

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

...

...
``

Why not use CSS superellipse() ?

As of 2025, superellipse is only supported on select browsers. If you don't mind supporting just one browser, you should just use CSS. If you want every user to have the same experience, you should use squircle.js.

Contributing

Read CONTRIBUTING.md

Websites using it

- quassum.com

Author

Please consider following this project's author, Antoni Silvestrovič on Github or Bluesky, or by starring the project to show your ❤️ and support.

License

This project is licensed under MIT License