Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time


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

πŸ“• Documentation

GitHub Repo stars npm


  • πŸ’ƒ 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.


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



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 (
      className="p-4 bg-black text-white"

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


This project is licensed under MIT License