A React component library for waveforms, transports, meters, faders, knobs, scrubbers and timelines. Accessible by default, themed with CSS variables.
02 · Install
The fastest way to get started is the fieldui meta-package. One install gets you components, hooks, tokens, and a pre-compiled stylesheet. No Tailwind config, no @source directives.
// Once at your app entry (e.g. main.tsx, layout.tsx)
import "fieldui/styles.css";
// In any component
import { MediaButton, WaveformDisplay } from "fieldui";
import { AudioGraphProvider, useTransport } from "fieldui/core";
import * as tokens from "fieldui/tokens";If you only need one piece — say, the headless hooks for a custom UI, or just the design tokens for a non-React project — install the sub-packages directly. The fieldui meta-package is just a thin convenience wrapper over these three, so mixing imports is safe and won't cause duplication.
import "@fieldui/react/styles.css";
import { MediaButton } from "@fieldui/react";
import { useTransport } from "@fieldui/core";03 · Primitives
Every preview below is a live @fieldui/react component. Pixel-sharp, keyboard-friendly, canvas-rendered where it helps.
04 · Why Field
Colour, spacing, radius are all CSS custom properties. Override one on any parent and everything below retones, canvas waveforms and meters included.
Knobs are real role=slider with keyboard control. Faders and Scrubbers wrap Radix Slider. Transports are role=toolbar. Focus rings stay legible everywhere.
Waveforms render to canvas at device pixel ratio. Meters scale in dB. Faders support log and linear taper. Time displays are SMPTE-aware out of the box.
05 · Design tokens
We don't tokenise everything. Generic UI stays Tailwind slate. Tokens cover what audio needs: peak vs RMS, safe vs warn vs clip, transport vs scrubber, region vs playhead.
/* Theme override on any ancestor. */
/* Propagates to canvas children. */
[data-theme="podcast"] {
--color-audio-meter-safe: var(--moss);
--color-audio-meter-clip: var(--rust);
--color-button-accent: #d97757;
}
/* Per-instance retoning. */
.danger-meter {
--color-audio-meter-safe: var(--rust);
}06 · Composed surface
Every primitive on this page is here, working together. No bespoke parts, no escape hatches. Copy it, fork it, retone it.