Squircle Js

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, Vue, Svelte, and Solid (see the framework support table below).
• 🐁 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:

Framework support

Package	npm	Framework
@squircle-js/react	@squircle-js/react	React 16.8+
@squircle-js/solid	@squircle-js/solid	Solid 1.8+
@squircle-js/svelte	@squircle-js/svelte	Svelte 5+
@squircle-js/vue	@squircle-js/vue	Vue 3.3+

Usage

With React

Step 1

Star this repo ❤️ and follow Antoni

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="bg-black p-4 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 />
...

With Solid

pnpm add @squircle-js/solid

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

export default function App() {
  return (
    <Squircle cornerRadius={10} cornerSmoothing={1} class="bg-black p-4 text-white">
      Squircle!
    </Squircle>
  );
}

See the package README for the full Solid API.

With Svelte

pnpm add @squircle-js/svelte

<script>
  import { Squircle } from "@squircle-js/svelte";
</script>

<Squircle cornerRadius={10} cornerSmoothing={1} class="bg-black p-4 text-white">
  Squircle!
</Squircle>

Svelte users can also apply a squircle directly to any element via the use:squircle action — no wrapper required:

<script>
  import { squircle } from "@squircle-js/svelte";
</script>

<button use:squircle={{ cornerRadius: 10, cornerSmoothing: 0.6 }}>
  Click me
</button>

See the package README for the full Svelte API.

With Vue

pnpm add @squircle-js/vue

<script setup>
import { Squircle } from "@squircle-js/vue";
</script>

<template>
  <Squircle :corner-radius="10" :corner-smoothing="1" class="bg-black p-4 text-white">
    Squircle!
  </Squircle>
</template>

Vue users can also apply a squircle directly to any element via the v-squircle directive — no wrapper required:

<script setup>
import { squircleDirective as vSquircle } from "@squircle-js/vue";
</script>

<template>
  <button v-squircle="{ cornerRadius: 10, cornerSmoothing: 0.6 }">
    Click me
  </button>
</template>

See the package README for the full Vue API.

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