README.md

Quoin vs Base UI — demo gallery

A single-page, side-by-side gallery that renders every component twice from the same CSS, so any visible or behavioural difference is the library's, not the styling's:

SideLibraryFrameworkSource
LeftBase UI (@base-ui/react) — the upstream ground truthReact 19src/react/
RightQuoin — this repo's portSolid v2 (solid-js@2)src/solid/ → ../src

Both columns live in one Solid app. The React demos are mounted into the page via a small bridge (src/react-host.tsx) that spins up a React root per row; the Solid demos render the library in ../src directly. Each row is isolated so one broken demo can't blank the gallery.

Running it

From the repo root:

sh
1bun install # installs the workspace (root lib + this demo)
2bun run demo # dev server → delegates to `bun --cwd demo run dev`
3bun run demo:build # production build

Or straight from this folder:

sh
1cd demo
2bun run dev

Layout

1demo/
2├── package.json # this demo's own deps + scripts (React, Base UI, Vite)
3├── vite.config.ts # Vite config: React via @babel/preset-react, Solid via vite-plugin-solid
4├── index.html
5└── src/
6 ├── App.tsx # the side-by-side gallery
7 ├── registry.ts # pairs each React demo with its Solid counterpart
8 ├── react-host.tsx # mounts a React root inside the Solid app
9 ├── react/ # Base UI (React) ground-truth demos
10 ├── solid/ # Quoin (Solid v2) demos
11 └── styles/ # shared CSS modules used by both sides

How the two frameworks coexist

vite.config.ts routes JSX by folder:

  • Files under src/react/** compile with @babel/preset-react (automatic runtime) — these are the Base UI demos.
  • Everything else (the Quoin library + src/solid/**) compiles with vite-plugin-solid, using the same babel-preset-solid options as the library's own build (moduleName: "@solidjs/web", generate: "dom").

Each runtime is deduped to a single copy so reactivity and React context stay intact.