SquircleJS offers a seamless way to implement the iOS-inspired squircle element in any front-end framework. Supporting React, Vue, Svelte, and Solid, it is lightweight and responsive, ensuring a polished look for your UI. With a straightforward API and fallback options for non-JS environments, this library enhances visual appeal without compromising performance.
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:
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.
Squircle.js is accessible through various frameworks, which facilitates its integration into existing workflows:
| Package | npm | Framework |
|---|---|---|
@squircle-js/react | @squircle-js/react | React 16.8+ |
@squircle-js/solid | @squircle-js/solid | Solid 1.8+ |
@squircle-js/svelte | @squircle-js/svelte | Svelte 5+ |
@squircle-js/vue | @squircle-js/vue | Vue 3.3+ |
Here's how to implement the Squircle component in various frameworks:
import { Squircle } from "@squircle-js/react";
const YourComponent = () => {
return (
<Squircle
cornerRadius={10}
cornerSmoothing={1}
className="bg-black p-4 text-white"
>
Squircle!
</Squircle>
);
};
<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>
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.
No comments yet.
Sign in to be the first to comment.