Notes

From detail to interface.

The React collection provides 77 modules with a consistent matte black and blue visual language. Every component has a live preview and readable source in the library.

Use the React components

Install @komocode/freeui from npm in your React 19 app and import @komocode/freeui/styles.css once. The compiled stylesheet includes the theme, utilities, and bundled Manrope font.

const [gain, setGain] = useState(.5);

<FreeSlider value={gain} onValueChange={setGain}
  label="Gain" precision={2} />

Core controls use Free-prefixed exports and freeui-prefixed module paths. Import them from @komocode/freeui and read the coverage record for verification limits.

Materials

Charcoal surfaces, a fine grain, and electric blue selected states. Set --freeui-accent for a different accent. Controls keep their keyboard focus and accessible labels. Reduced Motion disables animated feedback.

The vanilla kit

FreeUI’s kit is site.css and ui.js. This catalog is a normal page that calls the same functions. You do not install anything first.

Drop them into a page

<link rel="stylesheet" href="site.css">
<div id="panel"></div>
<script src="ui.js"></script>
<script>
  const panel = document.querySelector("#panel");
  panel.append(UI.bezel(
    UI.stamp({ label: "Arm", toggle: true, pressed: true }).el
  ));
</script>

Give a control a job

Faders, dials, readouts, and latches return an object with el, get, and set. set updates the face without firing onChange, so two controls can share one value.

const level = UI.fader({
  min: 0, max: 1, step: 0.01, value: 0.4, label: "Level",
  onChange(value) { meter.set(value); }
});
const meter = UI.meter({ value: 0.4, label: "Level" });

Paper outside, metal inside

The catalog is matte black. Controls sit in a bezel: put them in UI.bezel(...) or an element with the class bezel. Neon is the active state, not the background.

Keys

Faders and dials take arrow keys. Shift steps farther. Home and End hit the ends. Double-click a fader or dial to return to the middle. A readout drags vertically, and a click with almost no movement lets you type. Enter commits that type-in. Escape reverts it, and also closes a menu or a dialog.

What the server is

node showcase/server.js serves this catalog on port 4173 from the repository root. It is not part of the kit. Copy the two files out and the controls still work.