Component

RadiusDial

Drag the crosshair toward the center of the surface, or use its arrow keys. The content receives an actual border radius from the handle's position, turning one ordinary notice into a softer shape with no semantic benefit.

Possible use

A reviewer could round a handoff note until it looks friendly enough to circulate. A presenter could tune an agenda card live to match an imaginary piece of furniture. Both uses ask a corner radius to carry a decision it cannot explain.

Reasonable alternative

A reasonable local alternative is one local CSS radius chosen with the surrounding layout. A draggable geometry handle adds a physical argument to a static style value.

01 / Preview

Try it yourself.

Molded content

Needs a softer corner

Mechanism

1: Grab the crosshair at the lower-right corner.
2: Drag it toward the center to increase the actual border radius.
3: Use arrow keys on the handle for small geometric arguments.
4: Restore the factory corner when the notice becomes too round.

02 / Usage

Put it somewhere.

example.tsxTSX

import { RadiusDial } from "gra-ui";
import "gra-ui/styles.css";

export function SoftBrief() {
  return <RadiusDial><span>Needs a softer corner</span></RadiusDial>;
}

03 / API

Small surface area.

PropTypeDescription

childrenReactNodeThe content molded by the directly manipulated corner radius.