Code Examples

Practical code examples for AudioUI components. Copy and paste these examples to get started quickly.

This page provides working code examples for AudioUI components. Each example is complete and ready to use in your project.

Basic Components

KnobExample.tsx
import { useState } from "react";
import { Knob } from "@cutoff/audio-ui-react";
 
export default function KnobExample() {
  const [value, setValue] = useState(0.5);
 
  return (
    <Knob
      value={value}
      onChange={(e) => setValue(e.value)}
      label="Cutoff"
      min={20}
      max={20000}
    />
  );
}

Keys Component

The Keys component provides an interactive piano keyboard:

KeysExample.tsx
import { useState } from "react";
import { Keys } from "@cutoff/audio-ui-react";
 
export default function KeysExample() {
  const [notesOn, setNotesOn] = useState<(string | number)[]>([]);
 
  const handleChange = (e: { value: { note: number; active: boolean } }) => {
    const noteNum = e.value.note;
    if (e.value.active) {
      setNotesOn((prev) => [...prev, noteNum]);
      console.log("Note on:", noteNum);
    } else {
      setNotesOn((prev) => prev.filter((n) => n !== noteNum));
      console.log("Note off:", noteNum);
    }
  };
 
  return (
    <Keys
      nbKeys={61}
      notesOn={notesOn}
      onChange={handleChange}
    />
  );
}

Combining Multiple Components

Here's a complete synthesizer panel example:

SynthesizerPanel.tsx
import { useState } from "react";
import {
  Knob,
  Slider,
  Button,
  CycleButton,
  OptionView,
} from "@cutoff/audio-ui-react";
 
export default function SynthesizerPanel() {
  const [cutoff, setCutoff] = useState(0.5);
  const [resonance, setResonance] = useState(0.3);
  const [volume, setVolume] = useState(0.7);
  const [isActive, setIsActive] = useState(true);
  const [waveform, setWaveform] = useState("sine");
 
  return (
    <div style={{ 
      display: "flex", 
      gap: "20px", 
      padding: "20px",
      flexWrap: "wrap"
    }}>
      <Button
        label="Power"
        latch={true}
        value={isActive}
        onChange={(e) => setIsActive(e.value)}
      />
      <CycleButton
        value={waveform}
        onChange={(e) => setWaveform(e.value)}
        label="Waveform"
      >
        <OptionView value="sine">Sine</OptionView>
        <OptionView value="square">Square</OptionView>
        <OptionView value="sawtooth">Saw</OptionView>
      </CycleButton>
      <Knob
        value={cutoff}
        onChange={(e) => setCutoff(e.value)}
        label="Cutoff"
        min={20}
        max={20000}
      />
      <Knob
        value={resonance}
        onChange={(e) => setResonance(e.value)}
        label="Resonance"
        min={0}
        max={100}
      />
      <Slider
        value={volume}
        onChange={(e) => setVolume(e.value)}
        label="Volume"
        orientation="vertical"
        min={0}
        max={100}
      />
    </div>
  );
}

Using Value Formatters

AudioUI provides formatters for common audio parameter displays:

FormatterExample.tsx
import { useState } from "react";
import {
  Knob,
  frequencyFormatter,
  percentageFormatter,
} from "@cutoff/audio-ui-react";
 
export default function FormatterExample() {
  const [frequency, setFrequency] = useState(1000);
  const [mix, setMix] = useState(50);
 
  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <Knob
        value={frequency}
        onChange={(e) => setFrequency(e.value)}
        label="Frequency"
        min={20}
        max={20000}
        valueFormatter={(value) => frequencyFormatter(value)}
      />
      <Knob
        value={mix}
        onChange={(e) => setMix(e.value)}
        label="Mix"
        min={0}
        max={100}
        valueFormatter={(value, paramDef) => {
          return percentageFormatter(value, paramDef.min, paramDef.max);
        }}
      />
    </div>
  );
}

Theming

AudioUI supports theming through the ThemeManager. You can customize the primary color and roundness attribute:

ThemedExample.tsx
import { useState, useEffect } from "react";
import { Knob, setThemeColor, setThemeRoundness } from "@cutoff/audio-ui-react";
 
export default function ThemedExample() {
  const [value, setValue] = useState(0.5);
 
  // Set theme (runs once, affects all components)
  useEffect(() => {
    setThemeColor("#3b82f6"); // Blue accent
    setThemeRoundness(0.3); // Slightly rounded
  }, []);
 
  return (
    <Knob
      value={value}
      onChange={(e) => setValue(e.value)}
      label="Themed Knob"
    />
  );
}

The theme system currently supports primary color and roundness. For an overview of theming on vector components, see Theming Features in the Vector introduction. Additional theme options (glowness, reflectiveness, and more) are planned for the 1.0 release.

Dark and Light Mode

AudioUI components automatically adapt to dark and light themes based on your application's theme system. The components use CSS variables that respond to the prefers-color-scheme media query or your theme provider.

To control the theme in your example apps:

Using CSS

You can control the theme by setting the color-scheme CSS property or using a class:

App.tsx
import { useState } from "react";
import { Knob } from "@cutoff/audio-ui-react";
import "@cutoff/audio-ui-react/style.css";
 
export default function App() {
  const [value, setValue] = useState(0.5);
  const [isDark, setIsDark] = useState(false);
 
  return (
    <div style={{ colorScheme: isDark ? "dark" : "light" }}>
      <button onClick={() => setIsDark(!isDark)}>
        Toggle Theme
      </button>
      <Knob
        value={value}
        onChange={(e) => setValue(e.value)}
        label="Cutoff"
      />
    </div>
  );
}

Using a Theme Provider

If you're using a theme provider (like next-themes or a custom solution), AudioUI components will automatically adapt:

App.tsx
import { useState } from "react";
import { useTheme } from "next-themes";
import { Knob } from "@cutoff/audio-ui-react";
import "@cutoff/audio-ui-react/style.css";
 
export default function App() {
  const { theme, setTheme } = useTheme();
  const [value, setValue] = useState(0.5);
 
  return (
    <div>
      <button onClick={() => setTheme(theme === "dark" ? "light" : "dark")}>
        Toggle Theme
      </button>
      <Knob
        value={value}
        onChange={(e) => setValue(e.value)}
        label="Cutoff"
      />
    </div>
  );
}

The components will automatically update their appearance when the theme changes, ensuring proper contrast and visibility in both light and dark modes.

Component Variants

AudioUI components support multiple visual variants. Here are examples using different variants:

VariantsExample.tsx
import { useState } from "react";
import { Knob, Slider } from "@cutoff/audio-ui-react";
 
export default function VariantsExample() {
  const [value1, setValue1] = useState(0.5);
  const [value2, setValue2] = useState(0.5);
  const [value3, setValue3] = useState(0.5);
 
  return (
    <div style={{ display: "flex", gap: "20px" }}>
      <Knob
        value={value1}
        onChange={(e) => setValue1(e.value)}
        label="Abstract"
        variant="abstract"
      />
      <Knob
        value={value2}
        onChange={(e) => setValue2(e.value)}
        label="PlainCap"
        variant="plainCap"
      />
      <Slider
        value={value3}
        onChange={(e) => setValue3(e.value)}
        label="Trackless"
        variant="trackless"
        orientation="vertical"
      />
    </div>
  );
}

Knob supports variants: abstract, simplest, plainCap, iconCap. Slider supports variants: abstract, trackless, trackfull, stripless. Additional variants for CycleButton and Button are coming in future releases.

Next Steps