Skip to content
IndexDesign corpus
Component LibrariesPrimitiveComponent LibraryMITFreeReact

Lisse

Squircle corners via Figma's smoothing algorithm, with React, Vue and Svelte bindings

Aboutcorne.rs

A small MIT-licensed JavaScript library that draws the continuous corner curve Figma and iOS use, instead of the circular arc `border-radius` gives you. It implements Figma's corner-smoothing algorithm plus three other curve types — `arc`, `squircle` (default), `superellipse` and `clothoid` — and emits SVG paths and CSS `clip-path` values, with per-corner control and working borders and shadows, which is where most squircle hacks fall down. Ships as a framework-agnostic core (`@lisse/core`) with first-class hooks and components for React, Vue and Svelte. The site includes a live comparison demo that overlays the squircle against a plain rounded rect, and a playground.

Install
npm install @lisse/react
For an agent

Reach for this only when the design is explicitly iOS- or Figma-derived and the user has noticed that `border-radius` looks wrong at large radii — for radii under about 12px nobody can see the difference and you are adding a dependency for nothing. Prefer it over squircle-js or a hand-rolled clip-path when the element needs a visible border or shadow, since clip-path alone crops both and Lisse handles them; and prefer `@lisse/core` if you are in Astro, Solid or plain HTML rather than pulling a framework binding. Watch out that a clip-path corner will crop overflowing children and focus rings, so check keyboard focus visibility on any interactive element you wrap.

Why it is here. The squircle problem has a dozen half-solutions that break on borders and shadows; this is the one that implements Figma's actual algorithm, ships four curve types, and maintains bindings for three frameworks under MIT.

Install command, framework, licence and component list.
Notable for
  • Figma's corner-smoothing algorithm
  • arc, squircle, superellipse, clothoid
  • borders and shadows actually work
  • React, Vue, Svelte and a vanilla core
  • MIT, 281 stars, active
Provenance

Verified 2026-08-15. HTTP 200. https://corne.rs/ (WebFetch returned 403; read successfully by curl with a desktop UA and parsed — install commands and copy quoted from that HTML), https://github.com/JaceThings/Lisse (WebFetch), api.github.com/repos/JaceThings/Lisse, registry.npmjs.org for @lisse/react and @lisse/core

Related resourcesComponent Libraries