Squircle Element
for your Frontend

Use <Squircle> to build your own components.
If you don't know what a squircle is, read more below.
Available in React, and coming to other frontend frameworks soon!

Try it out! 🙌

Use sliders to control the "Element" component above. The difference is not huge, but makes a difference! 😉

Features 👑

How do I use it? 🤔

Step 1. Install the package.

pnpm add @squircle-js/react

Step 2. Import and use as a a regular div.

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

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

Step 3. Add global component for noscript support.

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

...
<SquircleNoScript />
...

More React examples 🎒

Code:

When you know the exact size you want your squircle to be, you can use width and height props to specify it. This is especially useful when you Server Side Render your app, and you know the size of the image you want to squircle.

...
<Squircle
  cornerRadius={64}
  cornerSmoothing={1}
  width={256}
  height={256}
>
  <div
    className="w-full h-full
    bg-gradient-to-br from-indigo-500
    via-purple-500 to-pink-500"
  />
</Squircle>
...

Result:

License? MIT 🚀

You can read the license here.

Reviews 🎉

Like this project? Leave review on Product Hunt.

Build with 💙 by Antoni

Github 👩‍💻Follow me? 😏Sponsor ❤️Quassum 🖤