Monoco — squircle shapes for HTML elements.

NPM package available for vanilla JavaScript, React and Svelte.

December 18, 2024 3 min. squirclesmooth cornerNPMReactSvelteTypeScript

Monoco website

What’s a squircle?

A squircle is a shape that’s in between a square and a circle. It has the straight sides of a square, and almost the rounded corners of a circle. The core idea is that the straight lines aren’t connect to quarter circles, but gradually blend into a smoothly curved corner. It’s a very pleasing shape that is used in many places in UX/UI design.

UX/UI design vs CSS

UX/UI designers love to create designs with squircles, but CSS only supports rounded corners. This means that you can’t create a squircle with CSS alone. You can create a square or a circle, but not a shape in between.

For example, Figma supports smooth corners natively, but there’s no clear way to implement this in CSS. That’s where Monoco comes in.

Monoco

Monoco is an NPM package available for vanilla JavaScript, React and Svelte to create squircles and other custom shapes. It’s a simple and lightweight package that allows you to create shapes that are not possible with CSS alone.Until Houdini is widely supported that is.

The way it works is that it dynamically creates an SVG path and applies it as a background-image CSS style. It supports a background and border colors. It even supports shadows that follow the shape of the squircle by using a drop-shadow CSS filter.

Alternatively you can use Monoco to generate a CSS clip-path value. This means you can let the CSS background-color show through and optionally animate it on hover, for example. Clip paths also hide CSS filters, so this a trade-off to consider.

Monoco for TypeScript

The core version of Monoco is written in TypeScript. You can use it in TypeScript projects without any additional configuration. Here’s a link to the source code: Monoco

To install Monoco, you can use npm:

npm install @monokai/monoco

It exports a function called addCorners that takes an element and properties as arguments:

import { addCorners } from '@monokai/monoco'

const element = document.querySelector('.element')

addCorners(element, {
  borderRadius: 32,
  smoothing: 1,
  background: '#f00',
  border: [1, '#000'],
  clip: true // or false
})

By invoking this function, it adds a resize observer on the element that will listen to any changes of its dimensions. When they change, it will automatically regenerate the shape. This is very useful for responsive designs.

Monoco for React

Here’s a link to the source code: Monoco for React

npm install @monokai/monoco-react

You can use the Monoco component to create a squircle:

import { Monoco } from '@monokai/monoco'

<Monoco
  borderRadius={32}
  smoothing={1}
  background='#f00'
  border={[1, '#000']}
  clip={true}
>
  <p>your content</p>
</Monoco>

Monoco for Svelte

Monoco also supports Svelte. Here’s a link to the source code: Monoco for Svelte

You can use the Monoco component to create a squircle:

<script>
  import Monoco from '@monokai/monoco'
</script>

<Monoco
  borderRadius={32}
  smoothing={1}
  background='#f00'
  border={[1, '#000']}
  clip={true}
>
  <p>your content</p>
</Monoco>

Svelte components have scoped CSS classes by default. In order to use your own classes, you can alternatively use a Svelte action. This is exported as monoco, with lower case “m”, and used like this:

<script>
  import { monoco } from '@monokai/monoco'
</script>

<div
  class="my-class"
  use:monoco={{
    borderRadius: 32,
    smoothing: 1,
    background: '#f00',
    border: [1, '#000'],
    clip: true
  }}
></div>

Smooth squircle corners, now available everywhere

It’s very easy for developers to implement squircles now. And next to squircles, Monoco even has capabilities to define your own shapes.

Monoco is used extensively on this site and on monokai.pro.

Go get your squircles

somonoco.com