More Premium Hugo Themes Premium React Themes

Squircle Js

A squircle element for your favourite frontend framework!

Squircle Js

A squircle element for your favourite frontend framework!

Author Avatar Theme by bring-shrubbery
Github Stars Github Stars: 160
Last Commit Last Commit: May 17, 2025 -
First Commit Created: Nov 5, 2024 -
default image

Overview:

The figma-squircle package is designed to create squircle elements - shapes that are a mix between a square and a circle. This package provides a solution for applying corner smoothing to rectangles, resulting in squircles. It offers features like responsiveness, compatibility for various frameworks, and a lightweight size of just 2.1kB gzipped.

Features:

  • Responsive Squircle Element: Can be used as an intrinsic component.
  • No-JavaScript Fallback Solution: Provides fallback support for when JavaScript is not available.
  • CommonJS and ES6 Support: Tree-shakeable for efficient module bundling.
  • Framework Compatibility: Available for React with support for react@18, with plans for other frameworks in the future.
  • Lightweight: Only 2.1kB gzipped, ensuring fast load times.
  • Documented Usage Examples: Helps users understand how to implement the package efficiently.

Installation:

To install the figma-squircle package for React, follow these steps:

  1. Star the Repo: Show support for the project.
  2. Install the Package:
    npm install figma-squircle
    
  3. Add to Your Project: Incorporate the package into your project.
  4. Global Component: Optionally, add a global component to ensure functionality when JavaScript is disabled.

Summary:

The figma-squircle package offers a convenient solution for creating and utilizing squircle elements in web design. With features like responsiveness, lightweight size, and support for various frameworks, it provides a versatile tool for developers. By enabling the creation of squircles, which are intermediate shapes between squares and circles, this package adds a unique and visually appealing element to web layouts.