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.

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