[ @sdxc/u/size ]

circle

A shape pattern for circular boxes: a square aspect ratio plus full radius — an avatar frame, a status dot, an icon badge.

View as Markdown Open in GitHub Open in ChatGPT Open in Claude

import { circle } from "@sdxc/u/size";

Quick reference

Every documented call, beside the CSS it emits.

Call	CSS
`u.circle()`	`css({ aspectRatio: "1 / 1", borderRadius: "var(--ui-radius-full, 9999px)" })`

Examples

Basic example

Use circle() with a width to draw a circular frame, like an avatar:

<div mix={[...]}>
	<img src={...} alt="" mix={[circle(), is(12), fit("cover")]} />
	<img src={...} alt="" mix={[circle(), is(16), fit("cover")]} />
	<img src={...} alt="" mix={[circle(), is(20), fit("cover")]} />
</div>

Initials and badges

Any content fits a circle(), like an avatar's initials or a notification count:

<div mix={[...]}>
	<div mix={[circle(), is(16), ...]}>SX</div>
	<div mix={[circle(), is(12), ...]}>SX</div>
	<div mix={[circle(), is(6), ...]}>3</div>
</div>

Applying on a state

Wrap the call in a state utility to scope it to one selector.

u.hover(u.circle())

Responsive design

Wrap the call in a container query to scope it to one width.

u.at("md", u.circle())

Customizing your theme

Customizing radii

Redefine a --ui-radius-* variable to change a step, or declare a new one:

:root {
	--ui-radius-2xl: 1rem;
}

declare module "@sdxc/u" {
	interface Radii {
		"2xl": true;
	}
}

The new name is then accepted wherever the scale is:

rounded("2xl")

Signature

u.circle()