Radius & Shadow Tuner

An interactive specimen for docs sites and design-system pages. The centre box defaults to 240×160: drag the round top-right handle inward along the diagonal to change the corner radius, the handle below the box downward to deepen the shadow, and the right-hand handle sideways to change the padding. Each handle carries a readout label that follows it, with digits that roll into place. The code panel underneath mirrors border-radius, box-shadow and padding and copies them in one click. Values snap to multiples of step and are clamped to max; both controlled and uncontrolled modes are supported, and initial values can come straight from your design tokens.

Playground

Tune the props live — the code snippet updates as you go, so you can dial in the look you want before copying it.

import * as React from "react";

export default function Example() {
  return (
    <div className="flex min-h-[320px] w-full items-center justify-center p-6">

<RadiusShadowTuner/>

    </div>
  );
}

Installation

npx webberui@latest add https://webberui.com/r/radius-shadow-tuner.en.json

Usage

import { RadiusShadowTuner } from "@/components/ui/radius-shadow-tuner";

<RadiusShadowTuner
  defaultValues={{ radius: 24, shadow: 32, padding: 16 }}
  step={4}
  onChange={(v) => console.log(v.radius, v.shadow, v.padding)}
>
  <p className="text-sm font-semibold">Order shipped</p>
</RadiusShadowTuner>

// Radius only, capped at 40px
<RadiusShadowTuner properties={["radius"]} max={{ radius: 40 }} showCode={false} />

Override the CSS variables on an ancestor to restyle it:

.my-docs {
  --wb-radius-drag-accent: #3b82f6; /* handle and readout colour */
  --wb-radius-drag-roll: 160ms; /* per-digit roll duration */
}

Props

RadiusShadowValues

RadiusShadowProperty is "radius" \| "shadow" \| "padding".

How it works

• The radius handle sits at (width − r, r) inside the box; while dragging, only the pointer movement projected onto the inward diagonal counts, so dragging at a slight angle never jitters.
• Dragging uses pointer events plus setPointerCapture, so the drag continues even when the pointer leaves the handle; there is no drag inertia — it stops the moment you let go.
• The box's border-radius, box-shadow and padding are driven directly by motion values, so dragging does not wait for the whole component tree to re-render; React state only updates when the snapped value actually changes.
• The shadow's y offset is 3/8 of the blur (a 32px blur gives a 12px offset), in a fixed rgba(0, 0, 0, 0.18).
• When the right-hand padding handle is enabled, a dashed guide inside the box marks the edge of the content area.
• Each readout digit is a 0–9 column scrolled to the target with translateY; the duration comes from --wb-radius-drag-roll.
• The copy button calls navigator.clipboard.writeText inside the click handler and shows "Copied" for 1.5 seconds on success.

Accessibility

• Every handle is a role="slider" with an aria-label (Radius / Shadow / Padding), aria-valuemin, aria-valuemax, aria-valuenow and an aria-valuetext that includes the unit
• Once a handle is focused, the arrow keys move it ±step, Shift+arrow or PageUp / PageDown move it ±10, and Home / End jump to 0 and the maximum; keyboard focus shows a focus-visible ring
• The rolling readout digits are hidden from assistive technology to avoid double announcements; the copy result is announced through a role="status" live region
• When the user has reduce motion enabled at the system level, readout digits swap without rolling, and handles neither grow on press nor bounce back on release