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

A squircle element for your favourite frontend framework!
https://github.com/bring-shrubbery/squircle-js

react solidjs squircle squircle-button svelte vue

Last synced: 6 days ago
JSON representation

A squircle element for your favourite frontend framework!

• Host: GitHub
• URL: https://github.com/bring-shrubbery/squircle-js
• Owner: bring-shrubbery
• License: mit
• Created: 2023-06-02T07:49:42.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-22T08:46:04.000Z (4 months ago)
• Last Synced: 2024-12-29T23:36:01.047Z (13 days ago)
• Topics: react, solidjs, squircle, squircle-button, svelte, vue
• Language: TypeScript
• Homepage: https://squircle.js.org
• Size: 736 KB
• Stars: 132
• Watchers: 1
• Forks: 9
• Open Issues: 6
• Metadata Files:
  • Readme: README.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE

Awesome Lists containing this project

README

        


  





  This project aims to bring the iOS-style squircle to your front-end projects.





  📕 Documentation





  

    

  

  

    

  



## Features

- 💃 Responsive squircle element that can be used any an intrinsic component.

- 🙏 Fallback solution for No-JavaScript.

- 👌 CommonJS and ES6 (tree-shakeable).

- 🚀 Available for React (with `react@18` support), with other frameworks coming later.

- 🐁 Just `2.1kB` gzipped.

- 🧨 Documented usage examples.

### Drawbacks

- Uses JavaScript to apply corner smoothing (no way to do it with CSS only for now).

- Does not currently support `border-width`. Works great with just background color.

## What the 🤡 is a Squircle???

This is a valid question and not everyone is aware of what a Squircle is.

A squircle is an intermediate shape between a square and a circle - [Webflow Blog](https://webflow.com/blog/squircle-vs-rounded-squares).

If you've ever seen an iPhone home screen, you've seen a squircle.

When you add additional corner smoothing to a regular rectangle with rounded corners, you get a squircle.

It's a [long story](https://www.figma.com/blog/desperately-seeking-squircles/), but in short - you can't achieve Squircles in plain CSS, we have to do extra calculations for that, which is where the [figma-squircle](https://github.com/phamfoo/figma-squircle) package comes in. Building on top of that package, this project adds bindings for UI libraries that make it possible to use it just like a regular html component, without worrying about layout-specific things.

Visually, [this post from Figma Blog](https://www.figma.com/blog/desperately-seeking-squircles/) shows the difference really well:

![preview-example](https://github.com/bring-shrubbery/squircle-js/assets/29360707/e64bacb9-9881-476b-9064-01a72df06a9e)

## Usage

### With React

#### Step 1

Star this repo ❤️

#### Step 2

Install the package

```bash

pnpm add @squircle-js/react

```

#### Step 3

Add to your project

```tsx

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

const YourComponent = () => {

  return (

    

      Squircle!

    

  );

};

```

Also, add a global component to ensure it still works when JavaScript is disabled.

```tsx

// _app.tsx, or root-level layout.tsx

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

...

...

```

## Websites using it

- [quassum.com](https://quassum.com/?utm_source=squircle-js)

## License

This project is licensed under [MIT License](./LICENSE)