Squircle

A simple and flexible way to make Squircles with CSS.

Installation

npm install @squircle/core @squircle/paint-polyfill

Import

import { init } from '@squircle/core';

Initialize

init();

Initialize in React

'use client';

import * as React from 'react';
import { init } from '@squircle/core';

export function SquircleProvider({ children }: { children: React.ReactNode }) {
  React.useEffect(() => void init(), []);
  return children;
}

Then use the SquircleProvider component to wrap your app.

<SquircleProvider>
  <App />
</SquircleProvider>

Usage

CSS

.squircle {
  background: paint(squircle);
  --squircle-background-color: red;
  --squircle-border-color: blue;
  --squircle-border-width: 10px;
  --squircle-border-radius: 30px;
}

Tailwind CSS

Use the @squircle/tailwindcss module.

Beta phase

Squircle is in beta phase, so there may be bugs and optimization issues for browsers not compatible with CSS.paintWorklet.

Limitations

While Squircle is designed to work seamlessly across all modern browsers, there are a few limitations to keep in mind:

• Squircle uses a custom polyfill, @squircle/paint-polyfill, a heavily improved fork of css-paint-polyfill. This polyfill brings CSS Houdini compatibility to browsers that do not support CSS.paintWorklet natively.

• However, very old browsers, such as Internet Explorer and some early versions of Edge, are not supported. These browsers do not support the necessary underlying APIs to run the polyfill reliably. (Note: Internet Explorer is not officially tested and should be considered unsupported.)

• In browsers without native CSS Houdini support (thus relying on @squircle/paint-polyfill), there may be minor performance overhead. This is because the polyfill actively listens to style changes and dynamically replaces paint operations in the DOM, which can slightly impact performance, especially in large or highly dynamic applications.

⚠ Additionally, when using animation libraries such as Motion in browsers that do not support CSS.paintWorklet (Firefox and Safari), performance issues may become more noticeable. Since the polyfill relies on a MutationObserver to detect and respond to style changes, animations that rapidly and repeatedly update styles can trigger frequent DOM updates, potentially resulting in less smooth animations. We are currently exploring solutions to mitigate this impact.

Issues

If you encounter any problems, do not hesitate to open an issue or make a PR here.

LICENSE

MIT