squircle-js
<p align="center"> <img src="./content/squircle-js-logo.png" width="420px" alt="SquircleJS" /> </p> <!-- <h1 align="center">SquircleJS</h1> --> <p align="center"> This project aims to bring the iOS-style squircle to your front-end projects. </p> <p align="center"> <a href="https://squircle.js.org/">📕 Documentation</a> </p> <p align="center"> <a href="https://github.com/bring-shrubbery/squircle-js"> <img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/bring-shrubbery/squircle-js?style=flat&logo=github&color=%230B0F14"/> </a> <a href="https://www.npmjs.com/package/@squircle-js/react"> <img alt="npm" src="https://img.shields.io/npm/dm/%40squircle-js/react?style=flat&logo=npm&color=%230B0F14"/> </a> </p> ## 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](#framework-support) 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. <q>A squircle is an intermediate shape between a square and a circle</q> - [Webflow Blog](https://webflow.com/blog/squircle-vs-rounded-squares). 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](https://www.figma.com/blog/desperately-seeking-squircles/), 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](https://github.com/phamfoo/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](https://www.figma.com/blog/desperately-seeking-squircles/) shows the difference really well:  ## Framework support | Package | npm | Framework | | --- | --- | --- | | [`@squircle-js/react`](./packages/squircle-element-react) | [`@squircle-js/react`](https://www.npmjs.com/package/@squircle-js/react) | React 16.8+ | | [`@squircle-js/solid`](./packages/solid) | [`@squircle-js/solid`](https://www.npmjs.com/package/@squircle-js/solid) | Solid 1.8+ | | [`@squircle-js/svelte`](./packages/svelte) | [`@squircle-js/svelte`](https://www.npmjs.com/package/@squircle-js/svelte) | Svelte 5+ | | [`@squircle-js/vue`](./packages/vue) | [`@squircle-js/vue`](https://www.npmjs.com/package/@squircle-js/vue) | Vue 3.3+ | ## Usage ### With React #### Step 1 Star this repo ❤️ and follow [Antoni](https://x.com/bringshrubberyy) #### 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 ( <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. ```tsx // _app.tsx, or root-level layout.tsx import { SquircleNoScript } from "@squircle-js/react"; ... <SquircleNoScript /> ... ``` ### With Solid ```bash pnpm add @squircle-js/solid ``` ```tsx 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](./packages/solid/README.md) for the full Solid API. ### With Svelte ```bash pnpm add @squircle-js/svelte ``` ```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: ```svelte <script> import { squircle } from "@squircle-js/svelte"; </script> <button use:squircle={{ cornerRadius: 10, cornerSmoothing: 0.6 }}> Click me </button> ``` See the [package README](./packages/svelte/README.md) for the full Svelte API. ### With Vue ```bash pnpm add @squircle-js/vue ``` ```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: ```vue <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](./packages/vue/README.md) 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. <img width="1321" height="798" alt="Screenshot 2025-09-05 at 13 54 59" src="https://github.com/user-attachments/assets/2dfe8616-743f-4c23-99b0-cfab89f1ad47" /> ## Contributing Read [CONTRIBUTING.md](CONTRIBUTING.md) ## Websites using it - [quassum.com](https://quassum.com/?utm_source=squircle-js) ## Author Please consider following this project's author, Antoni Silvestrovič on [Github](https://github.com/bring-shrubbery) or [Bluesky](https://bsky.app/profile/bring-shrubbery.bsky.social), or by starring the project to show your ❤️ and support. ## License This project is licensed under [MIT License](./LICENSE)