Rounded

Create UI ships a semantic border-radius scale, rounded-component-*. Ten tokens: eight scale with the viewport, two are fixed on purpose. A single class such as rounded-component-5xl 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. The hero above, written without tokens:

<div className="rounded-3xl md:rounded-4xl xl:rounded-5xl" />

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

<div className="rounded-component-5xl" />

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, 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-static p-component-lg">Card</div>

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

Controls hold, surfaces soften

The bare radius scale (rounded-sm, rounded-md, rounded-lg, and so on) is fixed at every breakpoint. Both scales are in use, and the split is deliberate:

• Controls hold a fixed radius. Button and Input use the bare scale and Checkbox pins exact pixel radii, so a control's corner never resizes underneath the reader mid-scroll.
• Surfaces soften on small screens. Modal and Sidebar round their panels with rounded-component-*, and DropdownMenu and Stepper use it on their items, because a 48px corner that reads as generous on a desktop card is overbearing on a phone.

Reach for rounded-component-* when you are drawing a surface, and the bare scale when you are drawing a control.

Token reference

Every token, with its corner magnified at each breakpoint so the small steps stay legible and the scaling is visible rather than asserted. Three windows mean the radius changes across breakpoints; one window means it is fixed everywhere. Clicking a token name copies its full utility class.

How it compiles to CSS

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

Customizing the scale

Override any --radius-component-* variable in your own globals.css, following the same pattern: the desktop value on :root, smaller ranges in the max-width blocks. The @theme inline block regenerates the matching utility, so nothing has to be rebuilt. To take an updated scale instead of keeping a local edit, re-run npx @create-ui/cli init.