This project aims to bring the iOS-style squircle to your front-end projects.
- ๐ 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.
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:
Star this repo โค๏ธ
Install the package
pnpm add @squircle-js/react
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 />
...
This project is licensed under MIT License