Lisse

Smooth-corner SVG primitives for React, Vue, and Svelte. Pixel-perfect Figma squircles + three other corner curves.

Live demo →

What is this?

Standard CSS border-radius produces circular arcs at the corners. Designers (and Apple, and Figma) prefer squircles — corners where curvature transitions smoothly into the straight edges, creating a more organic shape.

Lisse implements Figma's corner smoothing algorithm and three other corner curves in JavaScript. It generates SVG paths and CSS clip-path values, with first-class bindings for React, Vue, and Svelte.

Quick start

npm install @lisse/react

import { SmoothCorners } from "@lisse/react";

function Card() {
  return (
    <SmoothCorners corners={{ radius: 20, smoothing: 0.6 }} style={{ background: "#fff", padding: 24 }}>
      <h2>Hello, squircle</h2>
    </SmoothCorners>
  );
}

For Vue, Svelte, or framework-agnostic core, see the packages below.

Curve types

Curve	Description
arc	Quarter circle. Identical to CSS border-radius.
squircle (default)	Figma's cubic shoulders + central arc.
superellipse	|x/R|^n + |y/R|^n = 1. G2 with edges for n > 2.
clothoid	Euler-spiral blend from straight edge to central arc. G2 everywhere.

Math reference: docs/curves.md.

Packages

Package	npm	Description
@lisse/core		Framework-agnostic path generation + effects
@lisse/react		React hook and component
@lisse/vue		Vue composable and component
@lisse/svelte		Svelte action

Features

• Four corner curves (arc, squircle, superellipse, clothoid) with per-corner mixing
• Inner / outer / middle borders with style variants (solid, dashed, dotted, double, groove, ridge)
• Drop shadows and inner shadows, with gradient borders via the API
• Auto-effects: CSS border and box-shadow are converted to SVG equivalents on mount
• ~1.5 µs per generatePath() call; 500 corners re-compute in <1 ms (details)
• Zero runtime dependencies; ESM + CJS dual export; SSR-safe /path subpath

Documentation

• API reference: full export table
• Migration: upgrading between versions
• SSR: server-side rendering and edge runtimes
• Curves: math reference for each curve type
• Browser support: compatibility matrix
• Styling hooks: data-slot / data-state attributes
• Effects: borders, shadows, gradients, auto-effects
• Performance: benchmarks and cache architecture
• Internals: how borders, shadows, and resize handling work
• Gotchas: clip-path quirks like focus outlines, overflow, scrollbars
• Configuration: per-corner config, which API to use, framework usage

Contributing

Issues and PRs welcome. Contributor docs (release process, testing strategy, benchmarks) live in docs/.

License

MIT

---

Built by Jace

X | Bluesky | Instagram | Threads