EQ Display
eq-displayViewersFilter response curve, computed rather than measured.
$ pnpm dlx shadcn@latest add @pluginui/core-eq-displayLoading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it. Run this in your React project with shadcn initialized; no registry configuration is needed.
Pulls in
control-themeresponse-geometry
Install using the registry URL
$ pnpm dlx shadcn@latest add https://pluginui.com/r/core-eq-display.jsonUsage
Connect the documented props to your application or host.
import { EQDisplay } from "@/components/ui/eq-display"
<EQDisplay
bands={[
{ freq: 80, gain: 4, q: 0.7, type: "lowshelf" },
{ freq: 1200, gain: -3, q: 1.4, type: "peaking" },
{ freq: 8000, gain: 5, q: 0.7, type: "highshelf" },
]}
/>About EQ Display
Each band's biquad coefficients use the RBJ cookbook formulas. The display multiplies them together as cascaded filters behave, so the drawing matches the audio graph without an analyser. The display itself is read-only. Its axis comes from response-geometry and carries both directions, allowing a panel to place a drag overlay on the curve with its handles aligned exactly.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| bands | EQBand[] | — | Each band carries freq, gain, q, type and an optional bypassed flag and colour. Type is one of peaking, lowshelf, highshelf, lowpass, highpass, bandpass or notch. |
| sampleRate | number | 48000 | Needed for the bilinear transform. |
| minFrequency / maxFrequency | number | 20 / 20000 | The frequency axis bounds, drawn logarithmically. |
| decibelRange | number | 18 | Vertical range, in dB either side of flat. |
| showBands | boolean | false | Draw each band's own response behind the summed curve. |
| showHandles | boolean | true | Draw a dot at each band's centre frequency. |
| fill | boolean | true | Fill the area between the curve and the 0 dB line. |
| cursor | { freq, emphasis?, color?, line? } | — | A marker rides the curve at one frequency. Auto-filter, auto-wah and phaser displays use it as a modulation cursor. The caller animates the frequency from an LFO phase or envelope follower, and the marker places it on the response. Emphasis 0..1 fades and shrinks it. This is a prop rather than an overlay component because the cursor needs only the axis provided by this component. |
| height | number | 160 | Display height in pixels; width defaults to 100%. |
Interaction
- Drag with pointer capture, so the gesture keeps tracking past the edge of the control.
- Shift while dragging for a fine pass; release it mid-gesture and coarse tracking resumes.
- Double-click resets to
defaultValue. - Arrow keys step normally, Shift+arrow steps finely, PageUp/PageDown jump by ten, Home/End go to the extremes.
- Proper
sliderandswitchroles with livearia-valuetext, so a screen reader announces the formatted value rather than the raw number. - The scroll wheel adjusts the value while the pointer is over the control; stepped ranges move at least one declared step per notch by default.