EQ Display
eq-displayViewersEach 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.
Bone / Studio
Loading interactive preview…
Planar / Flat
Loading interactive preview…
Midnight / Minimal
Loading interactive preview…
Ember / Vintage
Loading interactive preview…
Ink / Studio
Loading interactive preview…
Mint / Flat
Loading interactive preview…
Install
Copies the source into your project. Anything it depends on comes with it.
$ pnpm dlx shadcn@latest add @pluginui/core-eq-displayPulls in
control-themeresponse-geometry
First time? Add the registry to your components.json once:
{
"registries": {
"@pluginui": "https://pluginui.com/r/{name}.json"
}
}Usage
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" },
]}
/>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.