Param PanelInstallation
Install ParamPanel — a single import that bundles its own styles.
Install
npm i param-panelParamPanel is ESM-first, ships TypeScript declarations and source maps, and works with Vite, Bun, Rollup, esbuild, and webpack. It has no runtime dependencies and makes no Node.js assumptions in browser modules.
One import, styles included
There is a single entry point, and it bundles its own CSS:
import { createPanel } from "param-panel";
const pp = createPanel({ title: "Demo" });
pp.slider({ label: "Speed", value: 1, min: 0, max: 10 });
pp.checkbox({ label: "Enabled", value: true });
pp.button({ label: "Reset" });You do not import a separate stylesheet. The library's CSS is inlined into
the JavaScript bundle and injected at runtime the first time you import the
package, so a single import { createPanel } from "param-panel" is everything
you need — one file to load, nothing to wire up.
Bundling & tree-shaking
This build ships as one bundle — importing the package pulls in every
control and its styles. Per-control modular entry points
(param-panel/slider, param-panel/button, …) and tree-shaking are a planned
refinement and are intentionally out of scope for now, in favor of a
simpler build where the CSS travels with the JS. The pp.slider(...)
convenience API shown throughout these docs is the way to add controls.
Theming: light & dark
ParamPanel is styled entirely through CSS custom properties and ships light and dark palettes built on Open Color with a shadcn-inspired surface/border/ring treatment.
Light is the default. The dark palette applies automatically whenever a
.dark class is present on any ancestor element — the same convention
Tailwind and shadcn use:
<html class="dark">
<!-- panels here render in dark mode -->
</html>Toggling the class flips every panel on the page live. A closer .light
ancestor forces light back on, so a light "island" inside a dark tree works too:
// Flip the whole app's theme.
document.documentElement.classList.toggle("dark");Because everything is driven by variables, you can retheme by overriding a few of them — no JavaScript, no runtime theme objects:
.param-panel {
--pp-accent: #e8590c;
--pp-radius: 10px;
}See Theme for the full variable list and density options.
Accessibility
Accessibility is a first-class requirement: every control uses native inputs
where practical, labels are associated, hints connect via aria-describedby,
folders and tabs expose correct ARIA state, focus is always visible, and every
interactive control is reachable and operable by keyboard.
Next
Continue to Panels to create and mount your first panel.