Tauri

Install and set up AudioUI in a Tauri application for building desktop audio applications.

This guide covers installing AudioUI in a Tauri application. Tauri allows you to build desktop applications using web technologies, making it ideal for audio applications that need native desktop performance.

Prerequisites

  • Node.js 18.0 or higher
  • Rust (for Tauri backend)
  • Basic familiarity with React and Tauri

Installation Steps

1

Create a Tauri Project

If you don't have a Tauri project yet, create one. You can use either interactive or non-interactive setup:

Interactive setup:

pnpm create tauri-app@latest

When prompted:

  • Choose your package manager (npm, pnpm, yarn, bun)
  • Choose "React" as the UI framework
  • Choose "TypeScript" if you want TypeScript support

Non-interactive setup:

You can skip prompts by using CLI flags:

npx create-tauri-app@latest tauri-project \
    --manager pnpm \
    --template react-ts \
    --yes

This creates a new Tauri project with React and TypeScript.

2

Install AudioUI

Navigate to your project directory and install AudioUI:

cd my-tauri-app
pnpm add @cutoff/audio-ui-react
3

Import CSS

Import the AudioUI stylesheet in your main css file. In a Tauri React project, this is typically src/App.css:

src/App.css
@import url("@cutoff/audio-ui-react/style.css");
// Rest of the styles
4

Create Your First Component

Create a simple component to test AudioUI:

src/App.tsx
import { useState } from "react";
import "./App.css";
import { Knob } from "@cutoff/audio-ui-react";
 
export default function App() {
  const [value, setValue] = useState(0.5);
  return (
    <main className="container">
      <h1>My Tauri Audio App</h1>
      <div className="row">
        <Knob
          value={value}
          onChange={(e) => setValue(e.value)}
          label="Cutoff"
          size="large"
        />
      </div>
    </main>
  );
}
5

Start Development

Start the Tauri development server:

pnpm tauri dev

This will:

  1. Start the Vite dev server for the frontend
  2. Compile the Rust backend
  3. Open a native window with your application

You should see your AudioUI component rendering in the Tauri window.

Building for Production

Build your Tauri application for production:

pnpm tauri build

This creates platform-specific installers (.dmg on macOS, .exe on Windows, .AppImage on Linux) in src-tauri/target/release/bundle/.

Next Steps