FAQ

Frequently asked questions about AudioUI, installation, usage, and support.

General Questions

What is AudioUI?

AudioUI is a React component library for building user interfaces in audio and MIDI applications. For an overview of what it provides and its design philosophy, see the Introduction.

Is AudioUI production-ready?

AudioUI is in Developer Preview; pin to specific versions for production use. For current status, in-progress work, and 1.0 plans, see Introduction – Project Status.

What React version is required?

AudioUI requires React 18.2.0 or higher. This is specified as a peer dependency, so you'll need to ensure your project uses a compatible React version. AudioUI supports both React 18 and React 19 without any compatibility issues.

What license does AudioUI use?

AudioUI is dual-licensed:

  • GPL-3.0-only: Free for open-source projects
  • Commercial License: Required for proprietary, closed-source applications. Available at cutoff.dev

Installation and Setup

How do I install AudioUI?

Install the package using your package manager:

pnpm add @cutoff/audio-ui-react

Don't forget to import the CSS:

import "@cutoff/audio-ui-react/style.css";

See the Installation Guide for detailed instructions.

Do I need to install peer dependencies?

Yes. AudioUI requires React and React DOM as peer dependencies. If they're not already in your project, install them:

pnpm add react@^19.0.0 react-dom@^19.0.0

Which frameworks are supported?

AudioUI is a React library, so it works with any React-based framework. We provide detailed installation guides for:

  • Vite
  • Next.js
  • Tauri

See the Installation section for framework-specific guides.

Usage

How do I customize the appearance?

AudioUI provides a ThemeManager for theming. You can customize the primary color and roundness attribute:

import { setThemeColor, setThemeRoundness } from "@cutoff/audio-ui-react";
 
setThemeColor("#3b82f6");
setThemeRoundness(0.3);

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.

Components also support multiple visual variants. For example, Knob has variants like abstract, simplest, plainCap, and iconCap, while Slider has variants like abstract, trackless, trackfull, and stripless. You can fine-tune components using styles and props.

For advanced customization, you can use the non-opinionated primitives to build completely custom components. The customization page contains multiple examples of totally customized components, and its source code is available for reference.

How do I handle parameter changes?

AudioUI components use a controlled component pattern. You manage state in your component and pass it via props:

const [value, setValue] = useState(0.5);
 
<Knob
  value={value}
  onChange={(e) => setValue(e.value)}
  label="Cutoff"
/>

The onChange event provides the new value in the e.value property.

Can I use AudioUI with other frameworks?

The core package (@cutoff/audio-ui-core) is framework-agnostic and contains all business logic. Currently, only the React implementation (@cutoff/audio-ui-react) is available, but the architecture supports potential implementations for other frameworks like Solid or Vue.

Technical Questions

Does AudioUI support mobile devices?

Yes. AudioUI components are responsive and touch-optimized, making them suitable for mobile applications.

How do I use AudioUI with TypeScript?

AudioUI is written entirely in TypeScript and provides full type definitions. No additional setup is required when using TypeScript.

Can I use AudioUI in a server-side rendered (SSR) application?

Yes, but you'll need to ensure components are only rendered on the client side. In Next.js, use the "use client" directive or render components conditionally. AudioUI components are client components by default.

Support and Community

Where can I get help?

Playground, Discord, and GitHub — see Introduction – Resources.

How do I report a bug?

Open an issue on the GitHub repository with:

  • Description of the issue
  • Steps to reproduce
  • Expected vs actual behavior
  • Your environment (React version, browser, etc.)

Can I contribute to AudioUI?

Yes! AudioUI is open source. Contributions are welcome. Check the repository for contribution guidelines and open issues labeled "good first issue" to get started.

When will AudioUI reach version 1.0?

We're actively working toward a stable 1.0 release. For planned additions and timeline, see Introduction – Project Status. Join our Discord to stay updated on progress and share your feedback.

How can I request features or vote on upcoming features?

A dedicated wishlist channel is available in the Cutoff Discord server. You can create feature requests and vote for the most wanted features. Community feedback helps prioritize development efforts.