StaticSquircle Component

Overview

StaticSquircle is a leaner alternative to Squircle for situations where you already know the element's width and height. It computes the clip-path once and never sets up a ResizeObserver, making it more efficient in list-heavy UIs or server-rendered contexts.

import { StaticSquircle } from "@squircle-js/solid";

When to use StaticSquircle

Use StaticSquircle when:

The element has a fixed, known size (e.g. an avatar, icon, or thumbnail with explicit dimensions)
You are rendering many squircle elements and want to minimise browser overhead
The size comes from design tokens or constants rather than layout
You want a stable clip-path in the server-rendered HTML

Use the regular Squircle when:

The element size is determined by CSS or content
The element can resize (fluid layouts, responsive containers)
You don't want to track dimensions manually

Props

All four core props are required — StaticSquircle has no internal measurement and cannot infer them.

Prop	Type	Required	Description
`width`	`number`	Yes	Element width in pixels.
`height`	`number`	Yes	Element height in pixels.
`cornerRadius`	`number`	Yes	Corner radius in pixels.
`cornerSmoothing`	`number`	Yes	Smoothing intensity from `0` to `1`.
`asChild`	`boolean`	No	Merges props onto the child element instead of rendering a `div`.

All standard HTML div props are also accepted.

Examples

Avatar

<StaticSquircle
  width={48}
  height={48}
  cornerRadius={12}
  cornerSmoothing={0.6}
  class="overflow-hidden"
>
  <img src="/user.jpg" alt="User" class="w-full h-full object-cover" />
</StaticSquircle>

App icon grid

Rendering many fixed-size icons in a grid is a good fit for StaticSquircle:

import { For } from "solid-js";
import { StaticSquircle } from "@squircle-js/solid";

const ICON_SIZE = 60;

export function AppGrid(props: { apps: { id: string; icon: string; name: string }[] }) {
  return (
    <div class="grid grid-cols-4 gap-4">
      <For each={props.apps}>
        {(app) => (
          <StaticSquircle
            width={ICON_SIZE}
            height={ICON_SIZE}
            cornerRadius={13}
            cornerSmoothing={0.6}
            class="overflow-hidden"
          >
            <img src={app.icon} alt={app.name} />
          </StaticSquircle>
        )}
      </For>
    </div>
  );
}

With asChild on an image

<StaticSquircle
  width={200}
  height={200}
  cornerRadius={32}
  cornerSmoothing={1}
  asChild
>
  <img src="/hero.jpg" alt="Hero" />
</StaticSquircle>

Performance note

Because StaticSquircle skips ResizeObserver, it has no measurement overhead at runtime and produces a stable clip-path during SSR. The SVG path is computed inside a createMemo, so it only recomputes when width, height, cornerRadius, or cornerSmoothing actually change. Solid's fine-grained reactivity means no component re-render is triggered either way — only the style attribute updates.

This makes StaticSquircle a good default for:

Long lists of avatars, icons, or thumbnails
Server-rendered pages where you want the clip-path in the initial HTML
Components where the dimensions are driven by design tokens and never change per instance