squircle-js

Squircle.js is a versatile component designed to integrate the visually appealing squircle element into various front-end frameworks seamlessly. This project aims to replicate the iOS-style squircle, which is a unique intermediate shape between a square and a circle, enhancing the aesthetic of user interfaces.

The primary attributes of Squircle.js include:

• Responsive Design: The squircle element is adaptable and can be utilized across different intrinsic components.
• No-JavaScript Fallback: A fallback solution is provided for scenarios where JavaScript is disabled, ensuring continued accessibility.
• Framework Compatibility: Supports multiple popular frameworks including React, Vue, Svelte, and Solid, making it a highly versatile option for developers.
• Lightweight: At just 2.1kB gzipped, this library maintains performance without sacrificing visual flare.
• Comprehensive Documentation: Detailed usage examples and instructions are included to assist developers in implementation.

Understanding Squircles

A squircle is defined as an intermediate shape that lies between a square and a circle, often used in modern interfaces as seen on iPhone home screens. Traditional CSS approaches are insufficient for creating this shape due to the necessitated corner smoothing, which requires JavaScript for implementation. This library builds on the functionality of the figma-squircle package to easily incorporate this design element into web projects.

Framework Support

Squircle.js is accessible through various frameworks, which facilitates its integration into existing workflows:

Usage Examples

Here's how to implement the Squircle component in various frameworks:

React Example

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

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

Vue Example

<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>

Why Choose Squircle.js?

Unlike CSS superellipse(), which is limited to certain browser compatibility as of 2025, Squircle.js ensures a uniform experience across all platforms. By choosing this library, developers can maintain consistency in design and functionality regardless of the user's browser environment.

For more detailed documentation, visit the Squircle.js Documentation. Explore how to enhance your projects with this visually striking and practical component.