XY Pad

A two-dimensional pad control for adjusting X and Y values simultaneously. Built on audio-ui primitives.

An XY pad component for controlling two parameters simultaneously. Perfect for synthesizers, filters, and effects that need two-dimensional control.

X: 50.0, Y: 50.0

50, 50

Installation


pnpm dlx shadcn@latest add @audio/xypad

import { XYPad } from "@/components/audio/xypad";

<XYPad
  defaultValue={{ x: 50, y: 50 }}
  maxX={100}
  maxY={100}
  minX={0}
  minY={0}
/>

X: 50.0, Y: 50.0

X: 50, Y: 50

X: 50.0, Y: 50.0

Prop	Type	Default	Description
`size`	`"sm" \| "default" \| "lg" \| "xl"`	`"default"`	Size variant (affects height).
`formatValue`	`(value: { x: number; y: number }) => React.ReactNode`	-	Custom formatter for value display.
`showValueDisplay`	`boolean`	`true`	Whether to show the value display overlay.
`className`	`string`	-	Additional CSS classes.
`value`	`{ x: number; y: number }`	-	Controlled value.
`defaultValue`	`{ x: number; y: number }`	-	Uncontrolled default value.
`minX`	`number`	`0`	Minimum X value.
`maxX`	`number`	`100`	Maximum X value.
`minY`	`number`	`0`	Minimum Y value.
`maxY`	`number`	`100`	Maximum Y value.
`stepX`	`number`	`1`	Step increment for X axis.
`stepY`	`number`	`1`	Step increment for Y axis.
`disabled`	`boolean`	`false`	Whether the pad is disabled.
`onValueChange`	`(value: { x: number; y: number }) => void`	-	Callback when value changes during interaction.
`onValueCommit`	`(value: { x: number; y: number }) => void`	-	Callback when value is committed (on release).

All other props are inherited from the XYPadPrimitive.RootProps from audio-ui.

X: 50.0, Y: 50.0

10020Hz, 4200Hz

X: 50.0, Y: 50.0

Freq: 50%, Res: 50%

Important Information:

Built on audio-ui: This component is built on top of the audio-ui package primitives, providing a high-quality, accessible XY pad control.
Grid Display: The pad includes a visual grid to help with positioning.
Crosshair: Visual crosshairs indicate the current X and Y positions.
Value Display: By default, a value display overlay shows the current position. You can customize the format or hide it entirely.
Size Variants: Four size variants are available: sm, default, lg, and xl. These affect the pad height.

Last updated 12/24/2025

On This Page