mrkeyoor.com_
Tue 01 Sept 17:45 UTC
Open Source6 min read

ThreeUI Gets 3,857 Stars With a 54.5 MB React Component Package

ThreeUI's free catalog grew fast on GitHub. Its installable React package is unusually large and carries three generations of Three.js.

ThreeUI collected 3,857 GitHub stars in the four days after its repository was created on August 21. That burst of attention landed on something more substantial than a gallery of WebGL demos: an MIT-licensed React package with 164 browseable results. It is also a 54.5 MB unpacked package in the npm registry, and its manifest accounts for three generations of Three.js. The combination makes ThreeUI worth examining as software, because the convenient part is real and so is the weight developers inherit.

The repository packages interactive backgrounds, landing pages, shaders, buttons, text effects, and interface pieces behind live previews and adjustable controls. A developer can browse the catalog, inspect source, or install a component from npm. Stars measure attention; they do not establish adoption. Even so, nearly 4,000 stars in four days puts its packaging choices under a brighter light than most new component libraries receive.

The free release is a working catalog

ThreeUI Community contains 50 parent components spread across 111 routes. Its project documentation counts 141 free variant records and 23 components without variants, producing the advertised 164 browse results. The public application keeps the search, themes, responsive behavior, live renderers, controls, variant picker, and source tabs used by the main product. It runs without an account.

Visitors get more than a link directory. The repository tree includes the Community component implementations and the assets required by those implementations. The public app excludes authentication, checkout code, account state, and the Pro and Beta implementations. Its upgrade links still point to the paid ThreeUI service.

The licensing boundary is specific. ThreeUI's own application code, Community components, and authored Community imagery use the MIT license. Included fonts retain the SIL Open Font License, while bundled Three.js runtimes remain under MIT. The asset notice says preview thumbnails and videos fetched from threeui.com are outside the repository's MIT grant because they are not distributed in the repository. Some HTML scenes also call public CDNs or ThreeUI-managed media endpoints.

That leaves developers with usable source, though a fully local copy may require more than cloning the repository. A team auditing a component for an offline product or a long-lived archive should check its network requests and collect every permitted runtime asset it needs. The same asset notice says those remote resources need no account, token, or paid API, but availability and redistribution are separate questions.

A one-line install brings a large package

The basic path is familiar. ThreeUI publishes @designcodeio/threeui, and its README gives this example:

npm install @designcodeio/threeui

A component can then be imported from the package root with the shared stylesheet, or from a component subpath. The package manifest exports the root module, style.css, component subpaths, and assets. React and React DOM versions 18 and 19 fit its peer dependency range.

The npm record supplies the missing scale. Version 1.1.0 contains 684 files and has an unpacked size of 54,527,327 bytes, according to the npm registry metadata. That is about 54.5 MB in decimal units before an application bundles anything. The first 0.3.0 package was slightly larger at 56.3 MB across 728 files. Version 1.0.0 arrived on August 23, followed by 1.1.0 on August 25. Three releases in four days show active packaging work, though they do not tell us how much of the package reaches a production bundle.

Three.js compatibility deserves a closer look. The current manifest accepts a consumer-provided Three.js version from 0.149 up to, but excluding, 1.0. It also installs aliased copies of Three.js 0.128 and 0.165 as direct dependencies. The manifest does not explain which components need each generation. That arrangement may be necessary for scenes written against different APIs, but it gives teams a concrete reason to inspect the dependency graph and measure their chosen imports.

Subpath exports can reduce the development import graph, according to the README. They do not establish the size of a finished site. That depends on the component, its imported runtime, the bundler, and any copied assets. Components that render full HTML documents expect files at root-relative URLs. Developers must copy the relevant files from lib-dist/assets into the public directory or change a component's sourceUrl or assetBaseUrl when that option exists.

The practical question is narrower than the repository's total size: what does one chosen effect cost on the page where it ships? ThreeUI does not publish per-component transfer sizes or frame-rate measurements in its public documentation. Teams considering it for a hero section should record JavaScript transferred, asset bytes, main-thread time, GPU use, and reduced-motion behavior on the target devices. The catalog makes selection easy; it cannot replace measurements inside the consuming product.

The free and paid editions share a controlled boundary

ThreeUI is maintained from a private main project and copied into the public repository through a synchronization script. The public script reads the private inventory, selects free components, removes Pro and Beta entries, strips named SF Pro font files, rewrites remote media URLs, and creates a report with component, variant, and control counts. It also generates the source index displayed by the public Code tab.

This is an unusually inspectable answer to a common open-core problem. A free repository can drift behind the commercial product or accidentally include files that were meant to remain private. ThreeUI's script records source revisions and SHA-256 hashes, checks for forbidden selectors and excluded assets, and preserves the previous report timestamp when a sync makes no material change. The package scripts add tests for sanitizers, the public boundary, library packaging, release preparation, and the separate CLI.

Publishing has another verifiable layer. The GitHub Actions workflow installs dependencies on Node 24, checks whether the package version already exists, and publishes with npm provenance. The registry record for versions 1.0.0 and 1.1.0 includes SLSA provenance attestations and identifies GitHub Actions as the trusted publisher. Provenance connects a package to its build workflow; it does not certify the behavior of every component.

Paid components use a separate command-line route. Active Pro members authenticate in a browser and request an entitled source bundle through @designcodeio/threeui-cli. The repository documentation says the CLI uses OAuth with PKCE, stores its renewable session with owner-only file permissions, checks entitlement on each server request, and refuses to overwrite changed project files unless the user passes --force. Free users do not need that CLI to install the Community React package.

The split also explains why ThreeUI can publish a complete free application without publishing its whole catalog. The public project is both a usable library and the distribution surface for a paid collection. Its value to developers depends on whether the 50 free parent components cover the work at hand, while its value to the maker depends on some users eventually wanting the excluded source. The sync process is the machinery that keeps those interests from turning into two unrelated codebases.

Attention arrived before operating history

A 3,857-star start says that ThreeUI's promise travels well on GitHub. Interactive visual components are easy to understand in a preview, and the repository offers source plus an npm path instead of stopping at inspiration. Stars do not show how many teams installed version 1.1.0, shipped a component, or kept it after testing. The repository had only 20 commits and a handful of open issues when the brief was fetched, so its public maintenance history is still short.

What to watch next is measurable: whether package releases continue to carry provenance, whether the public sync keeps its stated counts aligned with the free catalog, and whether ThreeUI publishes per-component performance data. Developers can answer the immediate question themselves by installing one component in a clean project and measuring its built output. If the library's rapid audience turns into production use, compatibility across the three declared Three.js versions and the stability of remote assets will matter more than the star counter.

We reviewed this

  1. checkout — our honest review
  2. browser — our honest review
  3. threeui — our honest review

Sources

  1. ThreeUI Community GitHub repository
  2. ThreeUI package manifest
  3. ThreeUI npm registry metadata
  4. ThreeUI asset licenses
  5. ThreeUI Community synchronization script
  6. ThreeUI npm publishing workflow