Continuous corners: the curve flows out of the straight edges instead of meeting them at a seam, like Apple's icons and Figma's corner smoothing.
The dashed line is a plain rounded corner. Smoothing starts the curve earlier and eases out of it, so there is no seam where the edge turns.
pnpm dlx shadcn@latest add @latheui/squirclePart of Lathe Pro. Set up your project once with your license key: npx latheui init --key <key>. See Lathe Pro.
Squircle is part of Lathe Pro
The preview is live and free to try. The source, the install and every assembly come with Pro: $79 once, with lifetime updates.
Depends on
Also accepts every native div attribute.
| Prop | Type | Default | Description |
|---|---|---|---|
| radius | number | 24 | Corner radius in pixels. Smoothing extends the curve past it, so a squircle reads softer than border-radius at the same value. |
| smoothing | number | 0.6 | 0 is a plain rounded corner, 1 is the smoothest. On a small box it eases off before the radius does, the way Figma's does. |
| borderWidth | number | 0 | A border inside the shape, which follows the curve. |
| borderColor | string | "var(--border)" | Any CSS color or variable. |
| asChild | boolean | false | Shapes the child element, such as a button or an img, instead of rendering a div. |
The outline as SVG path data, for drawing the same shape in a canvas, an SVG or a mask.
| Prop | Type | Default | Description |
|---|---|---|---|
| returns | string | — | Path data starting at the top edge, in pixels from the top-left corner. |
A clip path cuts off box-shadow. Put a drop-shadow filter on a wrapper and it follows the curve.
<div className="drop-shadow-lg">
<Squircle radius={20} className="bg-card p-5">…</Squircle>
</div><Squircle asChild radius={14}>
<button type="button" className="h-11 bg-primary px-5 text-primary-foreground">
Continue
</button>
</Squircle>