Squircle
スクワークル
A corner with no seam in it. A rounded rectangle grafts a circular arc onto a straight edge, so curvature jumps at the join; a superellipse↗↗ has no join at all, which is why the shape reads as continuous. The exponent is the whole control: 2 gives a plain ellipse, 4 the shape Apple settled on, and higher values march towards a square. Built with Tailwind CSS.
n = 2
n = 3
n = 4
n = 8
Installation
Copy and paste the following code into a new component file:1
"use client"
import { useId, useMemo, type ReactNode } from "react"
type SquircleProps = {
children: ReactNode,
curvature?: number,
size?: number,
steps?: number,
dark?: boolean
How to use it2
"use client"
import { Squircle } from "@/components/ui/squircle"
export default function Page() {
return (
<Squircle curvature={4} size={140}>
{/* eslint-disable-next-line @next/next/no-img-element */}
<img src="https://github.com/vercel.png" alt="Vercel" />
</Squircle>
Props
Squircle
| Name | Default | Description |
|---|---|---|
| children | — | ReactNode The content to clip |
| curvature | 4 | number Superellipse exponent; 2 is an ellipse, higher tends to a square |
| size | 140 | number Width and height in pixels |
| steps | 96 | number Points sampled around the curve; lower values start to show facets |
| dark | false | boolean Render the dark palette |