# Squircle tile (goodtabs UI)

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

## Install

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

Or, with the @goodtabs namespace configured in components.json: `npx shadcn@latest add @goodtabs/squircle-tile`

## Usage

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

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

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| size | `number` | `56` | Side length in px. The radius is 0.22 of it. |

## 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

## Notes for agents

- 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.

Docs: https://ui.goodtabs.co/components/squircle-tile