import { cn } from "@/lib/utils" /** * The corner scale, one tile per step, each tile drawn with the utility it is * labelled with. A radius is only legible as a corner — a number says nothing * about whether two steps read as different — so the tiles are the point and * the names are the caption. * * The multiples mirror `styles/radius.css`, which is what derives every step * from `--radius`: change the base there and every tile here rounds with it, * because the tiles are drawn by the utilities rather than by these numbers. */ const STEPS = [ { utility: "rounded-sm", multiple: "0.6" }, { utility: "rounded-md", multiple: "0.8" }, { utility: "rounded-lg", multiple: "1" }, { utility: "rounded-xl", multiple: "1.4" }, { utility: "rounded-2xl", multiple: "1.8" }, { utility: "rounded-3xl", multiple: "2.2" }, { utility: "rounded-4xl", multiple: "2.6" }, ] export default function RadiusDemo() { return ( // Seven across only once the plate is wide enough for the labels to sit // under their tiles; four otherwise, over two rows.

{STEPS.map((step) => (

{/* Filled rather than outlined: a corner is easier to judge as the shape of a solid than as a line bending around nothing. */}

{step.utility} ×{step.multiple}

))}

) }

Radius

01Preview

02Installation