Getting started

PluginUI is a collection of expressive controls and designed interfaces. Start with the component reference, choose a cohesive theme, or use a complete example as your starting point.

Install a control

In an existing React project, install with the PluginUI CLI:

npx pluginui add knob
npx pluginui list
npx pluginui info

Use npx pluginui init if your project needs shadcn configuration. The installer adds each component's declared dependencies automatically. knobheadless selects shared headless behavior in Maru; knob installs the editable visual component.

For direct shadcn installation, map PluginUI in your components.json:

{
  "registries": {
    "@pluginui": "https://pluginui.com/r/{name}.json"
  }
}

Then install editable source:

pnpm dlx shadcn@latest add @pluginui/core-knob
pnpm dlx shadcn@latest add @pluginui/gallery-playful-pearl-knob
pnpm dlx shadcn@latest add @pluginui/example-sculpted-console

If pnpm asks for build approval, approve esbuild with pnpm approve-builds and rerun the install command. Maru’s toolchain includes esbuild; this is pnpm’s one-time build permission for that dependency.

The component reference includes each control's installation command, source, properties and live examples. Use npx pluginui add knob for the branded installer, or the shadcn commands above. Items declare their Maru and other dependencies automatically. Components and CSS remain editable source; gestures, formatting and shared state stay in one library runtime. You do not need to reconstruct that behavior. Pure helpers can also be imported directly, for example import { clamp } from "maruaudio/ui/shared/math".

One namespace covers three collections: core- for base controls and helpers, gallery- for custom designs, and example- for complete silent interfaces. The command address selects an item; the installed source keeps its normal component filename and import path.

Design an interface

Use the playground to preview full interfaces together. Choose a palette and finish, then edit color, typography, radius and display tokens. Get code exports the installation command, CSS and a reusable JSON recipe.

Connect your engine

The visual layer takes values and emits edits. Your host owns parameter state, MIDI devices, audio and playback. Connect to Maru using its existing face contract, or supply controlled values from your own host.