Installation

Install AudioUI in your project. Choose your framework for framework-specific setup instructions.

This guide covers the general installation process for AudioUI. For framework-specific setup instructions, see the framework installation pages linked below.

Prerequisites

Before installing AudioUI, ensure you have:

  • Node.js 18.0 or higher
  • React 18.2.0 or higher (peer dependency)
  • A package manager: pnpm, npm, yarn, or bun

Installation Steps

1

Install Peer Dependencies

AudioUI requires React and React DOM as peer dependencies. Install them first:

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

Install the Package

Install AudioUI using your preferred package manager:

pnpm add @cutoff/audio-ui-react
3

Import the CSS

Import the AudioUI stylesheet in your application's entry point (e.g., main.tsx, App.tsx, or _app.tsx):

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

This import must be included for components to render correctly.

4

Verify Installation

Create a simple test component to verify everything is working:

import { useState } from "react";
import { Knob } from "@cutoff/audio-ui-react";
 
export default function TestComponent() {
  const [value, setValue] = useState(0.5);
  return <Knob value={value} onChange={(e) => setValue(e.value)} label="Test" />;
}

If the component renders without errors, installation is successful.

Framework-Specific Installation

For detailed setup instructions tailored to your framework, see:

  • Vite - Fast build tool and dev server
  • Next.js - React framework for production
  • Tauri - Build desktop applications with web technologies - Build desktop applications with web technologies

Package Information

  • Package name: @cutoff/audio-ui-react
  • Current version: latest (Developer Preview)
  • License: GPL-3.0-only (open source) or Commercial license available

Next Steps

Once installation is complete, check out the Quick Start Guide to learn how to use AudioUI components in your application.