Radius Scale

Border radius examples with labels and pixel values, displayed in a responsive grid.

Preview

none0px

sm2px

md4px

lg8px

xl12px

full9999px

Installation

npx visor add radius-scale

This copies two files into your project:

components/ui/radius-scale/radius-scale.tsx — the component
components/ui/radius-scale/radius-scale.module.css — the styles

Usage

import { RadiusScale } from '@/components/ui/radius-scale/radius-scale';

<RadiusScale steps={[
  { token: "--radius-none", name: "none", px: 0 },
  { token: "--radius-sm", name: "sm", px: 2 },
  { token: "--radius-md", name: "md", px: 4 },
  { token: "--radius-lg", name: "lg", px: 8 },
  { token: "--radius-xl", name: "xl", px: 12 },
  { token: "--radius-full", name: "full", px: 9999 },
]} />

API Reference

RadiusScaleProps

Prop	Type	Default	Description
`steps`*	`RadiusScaleItemProps[]`	—	Array of radius steps with token, name, and px values.
`className`	`string`	—	Additional CSS class names to merge onto the element.

Accessibility

RadiusScale is a documentation utility. Each step includes a text label and pixel value — visual shape is supplemented by text for non-visual access.