Installation

ml-ui isn't a package you install whole. Each component is a few readable files you add to your project and own, the way shadcn/ui works. React 18 or newer is the only requirement.

With the CLI

Every component page has its command. It copies the component, its algorithms and its styles into components/ml-ui/.

npx shadcn@latest add https://ui.adityakhalkar.me/r/koi-pond.json

By hand

Open a component's Code tab and copy each file into components/ml-ui/, keeping the folders. Every component imports its own CSS and the shared base.css, so there's nothing else to wire up.

import { KoiPond } from "@/components/ml-ui/KoiPond";

<KoiPond koi={8} />

Theming

Colours are CSS variables on .mlui. Set them on any ancestor; dark values follow prefers-color-scheme, unless data-theme="light" or "dark" on <html> picks one (the Theme Toggle sets it).

.my-app .mlui {
  --mlui-fg: #1d1d1b;
  --mlui-surface: #f6f5f2; /* what faded things fade into */
  --mlui-accent: #2f6fed;
  --mlui-radius: 18px;
}

Models

Components never bundle a model. The ones that need one take its output, or a function that calls it, as a prop, so you can bring your own: a server API, transformers.js in a worker, anything. Each page says what it needs.