Vite

Install and set up AudioUI in a Vite project. Vite provides fast development and optimized production builds.

This guide covers installing AudioUI in a Vite project. Vite is a fast build tool and development server that's ideal for React applications.

Prerequisites

  • Node.js 18.0 or higher
  • Basic familiarity with React and Vite

Installation Steps

1

Create a Vite Project

If you don't have a Vite project yet, create one:

pnpm create vite my-audio-app --template react-ts
cd my-audio-app
pnpm install

This creates a new Vite project with React and TypeScript.

2

Install AudioUI

Install AudioUI using your package manager:

pnpm add @cutoff/audio-ui-react
3

Import CSS

Import the AudioUI stylesheet in your css file. In a Vite project, this is typically src/index.css:

src/index.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 (
        <Knob value={value}
              onChange={(e) => setValue(e.value)}
              label="Cutoff"
              size="large"
        />
    );
}
5

Start Development Server

Start the Vite development server:

pnpm dev

Open your browser to the URL shown in the terminal (typically http://localhost:5173). You should see your AudioUI component rendering.

Configuration

Vite works with AudioUI out of the box. No additional configuration is required. The CSS import is handled automatically by Vite's CSS processing.

Building for Production

Build your application for production:

pnpm build

The optimized build will be in the dist directory. AudioUI styles are automatically included in the build.

Next Steps