Lisse · Index

Lisse

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

Tier A · StrongPrimitiveComponent Librarycorne.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.

Facts

License: MIT
Pricing: Free, Open source
Framework: React, Vue, Svelte, Vanilla JS
Styling: Vanilla CSS, Inline styles
Distribution: npm package, GitHub repository
Platform: Web
Content type: Code
Agent readiness: Readable open source, Structured documentation
Accessibility: Not applicable
Maturity: Actively maintained
GitHub stars: 281
Package: @lisse/react

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

Also in Component Libraries

corne.rsTier A