fieldui

The umbrella package for Field UI — audio components, headless hooks, and design tokens for React. Install one package, get all three.

npm install fieldui react react-dom

import "fieldui/styles.css";
import { MediaButton, AudioGraphProvider } from "fieldui";
import { useTransport } from "fieldui/core";
import { tokens } from "fieldui/tokens";

This package re-exports:

| Export | Source | Contents | | ----------------------- | --------------------- | ----------------------------------------------------- | | fieldui | @fieldui/react | React components (default entry) | | fieldui/core | @fieldui/core | Headless hooks (transport, audio graph, peaks, etc.) | | fieldui/tokens | @fieldui/tokens | Design tokens as a typed JS map | | fieldui/styles.css | @fieldui/react | Self-contained stylesheet (tokens + utilities baked) |

The three sub-packages remain independently installable. If you want just the headless hooks, npm install @fieldui/core directly. If you want just the CSS variables for a non-React project, npm install @fieldui/tokens. The fieldui meta-package exists to make the common "give me everything" path one install away.

Compatibility

• React 18 or 19.
• Tailwind v4 is optional. fieldui/styles.css is pre-compiled and ships every utility class the components need. If you also use Tailwind in your app, the import sits alongside your own @import "tailwindcss" and they don't conflict.
• For Next.js, see @fieldui/react's README for the next/font recipe to swap out the Google Fonts CDN load.

Versioning

The fieldui package version aligns with the @fieldui/react version. Each release pins the three sub-packages to exact versions so a fieldui install always pulls in a matching, tested set.