Getting Started
Are you about to start a project? We have templates ... here
Install @tremolo-ui/react
Using Svelte or Vue? Install @tremolo-ui/svelte or @tremolo-ui/vue instead — see Svelte and Vue.
- Install tremolo-ui
- npm
- Yarn
- pnpm
- Bun
npm install @tremolo-ui/react
yarn add @tremolo-ui/react
pnpm add @tremolo-ui/react
bun add @tremolo-ui/react
- Install dependencies
- npm
- Yarn
- pnpm
- Bun
npm install react react-dom
yarn add react react-dom
pnpm add react react-dom
bun add react react-dom
- Import the components you need.
import { Knob } from '@tremolo-ui/react'
@tremolo-ui/react exports the components and hooks only. The scales and the
MIDI helpers are in @tremolo-ui/functions, and the values and types the
components share with the other frameworks — XY, the default input options,
the MIDI error type — are in @tremolo-ui/dom. Add them to your dependencies
when you import from them:
- npm
- Yarn
- pnpm
- Bun
npm install @tremolo-ui/functions @tremolo-ui/dom
yarn add @tremolo-ui/functions @tremolo-ui/dom
pnpm add @tremolo-ui/functions @tremolo-ui/dom
bun add @tremolo-ui/functions @tremolo-ui/dom
tremolo-ui ships no CSS: a component renders its markup and leaves the appearance to you. Styling covers how to give it one, and publishes the theme these examples use so you can start from it.
First Step
Below is an example of a simple knob component.
Click the Code Icon to see the code!