Skip to content
goodtabs UI
BrowseBrowse components

Squircle tile

An icon tile with a 0.22 radius ratio and squircle corners where supported.

npx shadcn@latest add https://ui.goodtabs.co/r/squircle-tile.json

With the @goodtabs namespace in components.json: npx shadcn@latest add @goodtabs/squircle-tile

A 72px tile holding an icon.

Round and squircle

round
squircle
  • radius = 0.22 × 72 = 15.8px
  • @supports (corner-shape: squircle)

The same radius with and without corner-shape.

Radius scales with size

r 7.0
r 10.6
r 14.1
r 21.1

Four sizes, each with its radius worked out.

Usage

import { SquircleTile } from "@/components/ui/squircle-tile"

<SquircleTile size={56}><Layers /></SquircleTile>

Props

PropTypeDefaultDescription
sizenumber56Side length in px. The radius is 0.22 of it.

Source

squircle-tile/squircle-tile.tsx
import * as React from "react";
import { cn } from "@/lib/utils";

type SquircleTileProps = React.ComponentProps<"div"> & {
  /** Side length in px. The radius is 0.22 of it. */
  size?: number;
};

/**
 * An icon tile with a corner radius of 0.22 × size. Where the browser supports
 * corner-shape the corner becomes a squircle; elsewhere it is a plain rounded corner.
 */
export function SquircleTile({ size = 56, className, style, children, ...props }: SquircleTileProps) {
  return (
    <div
      className={cn(
        "grid place-items-center border bg-muted text-foreground supports-[corner-shape:squircle]:[corner-shape:squircle]",
        className,
      )}
      style={{ width: size, height: size, borderRadius: Math.round(size * 0.22 * 10) / 10, ...style }}
      {...props}
    >
      {children}
    </div>
  );
}

For AI agents

Hand your agent this page, the markdown at /components/squircle-tile/prompt.md, or the Copy AI prompt button above.

When to use

  • App icons, integration logos and feature icons where the shape is the content
  • Anywhere a radius should scale with the size of the tile

When not to use

  • Cards, inputs and menus, which stay with the regular rounded corners
  • Nested rounded shapes that must stay concentric

Agent notes

  • Server component. The radius is an inline style so it follows size
  • corner-shape: squircle is applied inside @supports. Safari and Firefox show the rounded fallback
  • corner-shape only changes the curve; border-radius still sets the size
  • Pass an icon as children and size it to about 0.4 of the tile

The maths

  • Radius = 0.22 × size, so a 72px tile has a 15.8px radius.
  • A squircle is |x / a|^n + |y / b|^n = 1 with n above 2, so curvature changes smoothly into the edge.