Create iOS-style Squircle Elements In React – SquircleJS

SquircleJS is a lightweight React component to generate responsive, customizable, iOS-style Squircle elements in React apps.

How to use it:

1. Install the SquircleJS with NPM.

# PNPM
$ pnpm add @squircle-js/react

2. Import the Squircle component.

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

3. Create a default Squircle element in your app.

const YourComponent = () => {
  return <Squircle>
    Squircle Element
  </Squircle>
}

4. Available component props.

asChild?: boolean;
width: number;
height: number;
cornerRadius: number;
cornerSmoothing: number;

Preview:

 

Download Details:

Author: bring-shrubbery

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/bring-shrubbery/squircle-js

License: MIT

Add Comment