Squircle

Visual Effects

An Apple-style superellipse (squircle) mask that clips any content to a true Lamé-curve silhouette, with an optional constant-width outline.

Inspired by Skiper UI — Apple squircle (free tier) — independently built, not affiliated. Attribution policy

Installation

npx shadcn@latest add https://parable-three.vercel.app/r/squircle.json

Runs the shadcn CLI — the component source is copied intocomponents/parable/squircle.tsx. You own it from there.

Usage

The exact code rendering the preview above.

<div style={{ display: "flex", gap: 28, alignItems: "center", justifyContent: "center", flexWrap: "wrap", padding: 32 }}>
    <Squircle size={132} smoothing={4} border={{ width: 1.5, color: "rgba(255,255,255,0.16)" }}>
      <div style={{ display: "grid", placeItems: "center", height: "100%", width: "100%", background: "linear-gradient(135deg,#8b5cf6,#ec4899)" }}>
        <Sparkles color="white" size={34} strokeWidth={2} />
      </div>
    </Squircle>
    <Squircle size={132} smoothing={4} border={{ width: 1.5, color: "#22d3ee" }}>
      <div style={{ height: "100%", width: "100%", background: "radial-gradient(120% 120% at 30% 20%,#f5a623,#0f0f10)" }} />
    </Squircle>
    <Squircle size={132} smoothing={8}>
      <div style={{ display: "grid", placeItems: "center", height: "100%", width: "100%", color: "#0f0f10", fontWeight: 800, fontSize: 44, background: "linear-gradient(135deg,#22d3ee,#8b5cf6)" }}>n</div>
    </Squircle>
  </div>

Props

SquircleProps extends React.HTMLAttributes<HTMLElement>

Prop	Type	Default	Description
children	React.ReactNode	—	Content clipped to the squircle.
size	number \| string	128	Square side length. A number is treated as pixels; a string (e.g. `"100%"`, `"12rem"`) is used verbatim on both axes. On a non-square box the mask stretches to fit. Defaults to `128`.
smoothing	number	4	Superellipse exponent: `2` = ellipse, `4` = Apple squircle, `5`+ squarer.
border	{ width: number; color: string }	—	Optional outline that traces the squircle edge (constant screen-px width).
as	React.ElementType	—	Element/component to render as the root. Defaults to `"div"`.