ThreeUI Community: a login-free React and Three.js component catalog

What ThreeUI Community actually is, and who it is for

ThreeUI Community is the open-source, login-free edition of ThreeUI. The README states that it uses the same application shell, layout, navigation, browse grid, search, themes, responsive behavior, component pages, live renderers, controls, variant picker and source tabs as the main project. The catalog is the only product-level difference: Pro and Beta components are removed, while every Community component keeps all of its free variants and controls.

The README lists 50 Community parent components, 111 Community routes, 141 free variant records and 23 singleton components, which it totals as 164 browse results. There is no authentication, no account state, no checkout runtime, and no Pro or Beta implementation. The `Get Pro` links point at https://threeui.com/pricing.

That makes the audience fairly specific. It suits a frontend engineer who wants to read the source of interactive WebGL components and lift them into a React app without creating an account. It does not suit someone shopping for a commercial component library with support terms, because the repository ships no support commitment and the sponsorship section explicitly says sponsorship does not guarantee roadmap changes, editorial control, exclusivity or private support.

How the public repository is generated from a private one

The checked-in repository runs independently, but maintainers can refresh its Community subset from a separately held main-project snapshot with `npm run sync:community -- /path/to/main-threeui`. According to the README, that sync fails closed, filters Pro and Beta before generating the public import graph, preserves all free metadata and options, and removes restricted font assets.

It writes three artifacts: `public/community-sync-report.json` with counts plus per-component variant and control parity, `public/source-code.json` with the Community source bundles used by the Code tab, and `src/data/shaders.tsx` with the Community-only catalog and renderer imports. The private ThreeUI repository runs this synchronization after every successful push to `main`, and a no-op sync exits without a release. Changes land on an `automation/community-sync` branch and open one reviewed pull request here.

The release inference is worth noting because it is mechanical rather than judgement-based: new public components, variants or controls infer a minor release, removals infer a major release, and compatible source changes infer a patch release. Merging a versioned sync pull request publishes the package through npm trusted publishing with provenance, after a clean build, boundary audit, package creation and an anonymous installation smoke test. The Pro installer is versioned and published separately, and the README says changes to Pro component content do not require a CLI release. The consequence for a consumer is that what you install is whatever survived the filter, not a hand-curated library.

Installing the React package and rendering a first component

The public Community component library installs from npm as `@designcodeio/threeui`. The package is version 1.2.0, is ESM (`"type": "module"`), and publishes with provenance enabled in `publishConfig`.

npm install @designcodeio/threeui

A component and the shared stylesheet are imported separately. The README gives this example, which imports the `AtTheHorizon` component and `@designcodeio/threeui/style.css`:

import { AtTheHorizon } from "@designcodeio/threeui";
import "@designcodeio/threeui/style.css";

export function Hero() {
  return <AtTheHorizon />;
}

For the smallest development import graph, the README recommends a component subpath instead of the barrel entry. The exports map in `package.json` supports this through `./components/*`, which resolves to `./lib-dist/package-components/*.js`.

import { AtTheHorizon } from "@designcodeio/threeui/components/AtTheHorizon";

One constraint is easy to miss. Components that render full HTML documents expect their runtime files at the same root-relative URLs used by the ThreeUI preview. You either copy the needed files from `node_modules/@designcodeio/threeui/lib-dist/assets/` into your app's public directory, or override the component's `sourceUrl` or `assetBaseUrl` prop where available. If you skip this, a full-document component can render with missing assets rather than failing loudly.

To work on the catalog itself rather than consume the package, the README gives `npm install` followed by `npm run dev`. The repository defines `npm run build` as the complete publication boundary, type and production-build check, which runs `typecheck`, `audit:public`, `vite build` and `audit-build.mjs` in sequence.

The asset and document-rendering boundary is the real limitation

The most concrete failure mode is the asset path contract. Any component that renders a full HTML document assumes runtime files sit at the same root-relative URLs the ThreeUI preview uses. In a typical Vite or Next.js app those paths do not exist, so the component silently loses its runtime dependencies unless you copy `lib-dist/assets/` into your public directory or set `sourceUrl` or `assetBaseUrl`.

Licensing adds a second boundary. Application code, Community component code and ThreeUI-authored Community imagery are MIT licensed. Bundled open fonts remain under the SIL Open Font License 1.1, and bundled Three.js runtime files remain MIT licensed. Remote catalog thumbnails and previews loaded from `https://threeui.com` are not redistributed by this repository, so an offline or air-gapped build will not have them. The repository points at `ASSET-LICENSES.md`, `FONT-LICENSES.md` and `THIRD_PARTY_NOTICES.md` for the details.

Pro source is deliberately not published to npm. Active Pro members authenticate through the browser and download an entitled bundle with the public CLI:

npx @designcodeio/threeui-cli add cross-beam

The README states the CLI uses OAuth with PKCE, stores its refreshable session with owner-only permissions, checks the account entitlement on every server request, and refuses to overwrite changed project files unless `--force` is supplied. If your workflow needs Pro or Beta components, this repository is the wrong starting point, not an incomplete one.

How it differs from hand-rolled Three.js and from shadcn-style libraries

The closest comparison is not another component catalog but writing the Three.js scene yourself. ThreeUI Community ships the renderer, the controls, the variant picker and the source tab as a working application, plus `src/data/shaders.tsx` as the catalog of renderer imports. A hand-rolled approach gives you full control over bundle size and asset paths, and no dependency on a catalog that is regenerated by a sync script you do not run. The trade-off runs the other way too: you inherit no upstream fixes when a renderer changes, and you reimplement the variant and control plumbing.

A second comparison is a copy-paste component library in the shadcn mold, where components are vendored into your repository and you own the code. ThreeUI Community is a published npm package with a stable exports map (`./style.css`, `./components/*`, `./assets/*`) and a versioned release process, so upgrades arrive as package versions rather than diffs you apply. That is better for tracking upstream changes and worse if you need to fork a single component, since the published files are `lib-dist` output rather than source you edit in place.

What distinguishes this project from both is the generation model. The public tree is a filtered subset of a private tree, and the filter is enforced by a script that fails closed and by an `audit:public` step in the build. You get a guarantee that Pro code is absent. You also get a library whose contents are determined by what the maintainers choose to publish, with the release type inferred from whether components were added or removed.

Maintenance, upgrades and what the licence does not cover

The repository is not archived. The last push was on 2026-09-03, which is recent relative to the current date. There are no releases retrieved for this repository, so the versioning described in the README is the only release signal available: minor for additions, major for removals, patch for compatible source changes. The npm package is at 1.2.0.

Upgrade cost depends on which import style you chose. The barrel import from `@designcodeio/threeui` pulls a larger development graph, and the README recommends the `@designcodeio/threeui/components/AtTheHorizon` subpath for the smallest one. Because the package publishes `lib-dist` with generated type definitions, a major release driven by a component removal can break a subpath import without any source change on your side. The `sideEffects` field is limited to `**/*.css`, which is what lets bundlers drop unused component modules.

On licensing, MIT covers the application code, the Community component code and ThreeUI-authored Community imagery. It does not cover the bundled fonts, which stay under the SIL Open Font License 1.1, and it does not cover the remote thumbnails and previews served from `https://threeui.com`, which this repository does not redistribute. The `files` field ships `LICENSE`, `ASSET-LICENSES.md`, `FONT-LICENSES.md` and `THIRD_PARTY_NOTICES.md` alongside `lib-dist`, so the notices travel with the package. Reading those three files is the only way to know what your build actually redistributes; this is a description of the repository contents, not legal advice.

Editorial conclusion

Adopt ThreeUI Community if you want MIT-licensed React and WebGL components with a browsable catalog and no account, and if you accept that the npm package is a generated subset rather than the full ThreeUI product. Skip it if you need Pro or Beta components, or if you cannot host the root-relative runtime assets that full-document components expect. Before committing, verify two things yourself: run npm run build in a clone to see whether the type, boundary and production-build checks pass on your machine, and check the exports map in your installed @designcodeio/threeui to confirm the component subpath you plan to import exists.

Frequently asked questions

Official sources

1. Issues
2. License: MIT
3. MengTo/threeui on GitHub
4. Project website
5. README