squircle-js Svelte Themes

Squircle Js

A squircle element for your favourite frontend framework!

SquircleJS

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

๐Ÿ“• Documentation

GitHub Repo stars npm

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. 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, 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 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 shows the difference really well:

Usage

With React

Step 1

Star this repo โค๏ธ

Step 2

Install the package

pnpm add @squircle-js/react

Step 3

Add to your project

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

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

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

// _app.tsx, or root-level layout.tsx
import { SquircleNoScript } from "@squircle-js/react";

...
<SquircleNoScript />
...

Websites using it

License

This project is licensed under MIT License

Top categories

Loading Svelte Themes