Rounded

Create UI ships a semantic border-radius scale, rounded-component-*, where each token carries a different corner radius per viewport. A single class such as rounded-component-lg resolves to one value on mobile, another on tablet, and another on desktop, so you set the intent once and the corners adapt on their own.

Why it helps

Responsive corners normally mean writing one class per breakpoint and keeping the jumps in sync by hand:

<div className="rounded-md md:rounded-lg xl:rounded-xl" />

With the semantic scale the same behavior collapses into one class:

<div className="rounded-component-lg" />

The win is threefold:

• One class, no per-breakpoint variants. You describe the role of the corner ("this is a large component radius"), not three separate pixel decisions.
• Design-token alignment. The scale mirrors the Figma radius tokens, so corners stay consistent across components instead of drifting toward ad hoc values.
• One-file retuning. Adjusting the scale is a single edit in apps/v4/lib/createui-rounded.ts, not a find-and-replace across every component that hard-coded rounded-md md:rounded-lg.

Usage

Apply a token the same way you would any Tailwind radius utility:

<div className="rounded-component-lg bg-card p-component-lg">Card</div>

<button className="rounded-component-full px-component-lg">Pill button</button>

Breakpoints

The scale is mobile-first. Each token's three values map to these ranges:

Token reference

Values are absolute pixels. Unlike spacing, the radius scale is not tied to a base unit. Each box below applies its token, so the corner rounding is shown at its real, responsive value.

How it compiles to CSS

The CLI emits the desktop value into :root, then layers tablet and mobile overrides as max-width media queries. Take component-lg (6px mobile, 6px tablet, 8px desktop):

:root {
  --radius-component-lg: 8px;
}
 
@media (max-width: 1279px) {
  :root {
    --radius-component-lg: 6px;
  }
}

Desktop (8px) is the base in :root. The 1279px query drops it to 6px for tablet and below. There is no 767px mobile block here because mobile (6px) already equals tablet.

Tailwind v4 then maps each --radius-component-* variable to its rounded-component-* utility automatically.

Responsive vs. static radius

The bare radius scale (rounded-sm, rounded-md, rounded-lg, and so on) is fixed and does not change across breakpoints. Some existing components, such as button and input, still use that static scale. The responsive rounded-component-* scale is the newer, preferred path for new components, so reach for it whenever you want corners that track the viewport.

Customizing the scale

apps/v4/lib/createui-rounded.ts is the single source of truth for the token values. Each entry holds either a single number (static across breakpoints) or a [mobile, tablet, desktop] triple. Editing a value reflows everywhere that uses the token: run pnpm registry:build to regenerate the registry, then createui init in a consuming project to rewrite its CSS variables.