# ThreeUI Community: Open-Source React Component Catalog with Live Interactive Previews

> ThreeUI Community is the free, login-free subset of the ThreeUI component library published as an npm package and a self-hostable catalog site. It ships 50 parent components across 164 browse results, each with live renderers and source tabs, but omits Pro and Beta content entirely.

**MengTo/threeui** — Open-source ThreeUI Community catalog with live interactive components and complete Community source.

- Repository: https://github.com/MengTo/threeui
- Website: https://threeui.com
- Stars: 6,344 · Forks: 606
- Language: HTML
- License: MIT
- Published: 2026-09-16 · Updated: 2026-09-16 · Language: en
- Canonical page: https://hysenlabs.com/projects/mengto-threeui

## What ThreeUI Community Provides and Who It Is For

ThreeUI Community is the publicly available, authentication-free edition of the ThreeUI component system. It targets React developers who want to browse, preview, and integrate UI components without a paid account. The catalog includes 50 parent components, 111 routes, and 141 free variant records plus 23 singleton components, totaling 164 browse results.

The repository uses the same application shell, layout, navigation, browse grid, search, themes, responsive behavior, component pages, live renderers, controls, and variant picker as the main ThreeUI product. The only structural difference is that Pro and Beta components are removed. Every Community component keeps all of its free variants and controls.

## Repository Layout and the Synchronization Pipeline

The repository can run independently as a standalone site or be refreshed from a private main-project snapshot. The top level contains a Vite-based site (`vite.config.js`, `vite.lib.config.js`) alongside source in `src/`, assets in `assets/`, and generated output in `public/`.

The synchronization script `npm run sync:community` accepts a path to the private main repository and performs a filtered export:

```bash
npm run sync:community -- /path/to/main-threeui
```

The sync filters Pro and Beta before generating the public import graph, preserves all free metadata and options, removes restricted font assets, and writes three output files: `public/community-sync-report.json` (counts and per-component variant/control parity), `public/source-code.json` (Community source bundles for the Code tab), and `src/data/shaders.tsx` (Community-only catalog and renderer imports). A no-op sync exits without triggering a release. New public components or variants infer a minor release; removals infer a major release; compatible source changes infer a patch release.

## Running the Catalog Locally and Installing the npm Package

To run the ThreeUI Community catalog on your own machine, clone the repository and start the development server:

```bash
npm install
npm run dev
```

The `npm run dev` command starts the Vite dev server with the full catalog, search, and live component renderers. To confirm the production build passes the type and boundary checks before a release, run:

```bash
npm run build
```

For using components inside an existing React project, install from npm:

```bash
npm install @designcodeio/threeui
```

Import a component and the shared stylesheet:

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

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

For a smaller development import graph, use a component subpath instead of the root export:

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

Components that render full HTML documents need their runtime files at root-relative URLs. Copy them 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.

## Pro Source Access Through the CLI

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

```bash
npx @designcodeio/threeui-cli add cross-beam
```

The CLI uses OAuth with PKCE, stores a refreshable session with owner-only permissions, and checks account entitlement on every server request. It refuses to overwrite changed project files unless `--force` is supplied. Full options including login, logout, destination, and development endpoint flags are available with:

```bash
npx @designcodeio/threeui-cli --help
```

This boundary is intentional: the Community npm package deliberately excludes Pro implementation code. Teams evaluating whether the Pro catalog meets their needs must set up an account and use the CLI; there is no way to preview Pro components from the open-source repository alone.

## Limitations and Cases Where It Is the Wrong Tool

ThreeUI Community has a clear scope ceiling. The repository explicitly omits Pro and Beta components, checkout runtime, account state, and authentication flows. A team that needs those components cannot get them from this repository, regardless of how they configure or extend it. The `Get Pro` links inside the Community catalog point to `https://threeui.com/pricing`.

The component package also carries an asset dependency that is easy to overlook: components that render full HTML documents expect their runtime files at specific root-relative URLs. If your application's public directory structure or CDN URL scheme differs from the default, those components will fail silently until you override the `sourceUrl` or `assetBaseUrl` prop. The README documents this requirement but does not give a comprehensive list of which components are affected.

The synchronization mechanism is also one-directional and requires access to the private main repository. Independent contributors cannot run a full community sync; they can only modify the checked-in subset.

## Comparing ThreeUI Community with Radix UI

Radix UI is a headless React component library: it provides accessible, unstyled primitives that teams style themselves using CSS or Tailwind. ThreeUI Community, by contrast, ships fully styled components with visual designs, live interactive previews, and a browsable catalog. The two serve different points in the design-to-production pipeline.

Teams who want to own their visual layer entirely and compose primitives with their own design system are better served by Radix UI. Teams who want to start from a polished, styled starting point and then customize it will find ThreeUI Community more immediately useful. The trade-off is that ThreeUI Community's styling conventions are tied to the ThreeUI design system, which means diverging significantly from the provided look requires more work than with a headless approach.

## License and Maintenance

Application code, Community component code, and ThreeUI-authored 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. The license details are split across `ASSET-LICENSES.md`, `FONT-LICENSES.md`, and `THIRD_PARTY_NOTICES.md`.

The repository is not archived and its last push was on 2026-09-03. The current package version is 1.2.0. The private ThreeUI repository runs the community synchronization after every successful push to `main`, so the open-source catalog tracks the upstream Community subset automatically. There are no GitHub releases for this repository; versioning happens through npm trusted publishing with provenance on each merged sync pull request.

## Conclusion

ThreeUI Community suits React developers who want production-ready UI components with live preview infrastructure they can run locally or reference from npm. It is not the right choice for teams that need the full Pro or Beta catalog: those require an active ThreeUI subscription and the separate CLI. Before adopting it, verify that your app's asset pipeline can serve the runtime files from `node_modules/@designcodeio/threeui/lib-dist/assets/` at the correct root-relative URLs, because components that render full HTML documents depend on that path convention.

## FAQ

### What is included in the ThreeUI Community package and what is excluded?

The Community package includes 50 parent components, 111 routes, and 164 browse results covering all free variants and controls. Pro and Beta components, the checkout runtime, account state, and authentication flows are not included. Get Pro links inside the catalog point to the ThreeUI pricing page.

### How does ThreeUI Community stay in sync with the main ThreeUI project?

The private ThreeUI repository runs a synchronization script after every successful push to main. The script filters Pro and Beta content, preserves free metadata, and opens a reviewed pull request to the Community repository. Merging a versioned sync pull request publishes the updated npm package through trusted publishing with provenance.

### Can I use ThreeUI Community components without running the full catalog site?

Yes. Install the `@designcodeio/threeui` npm package and import individual components and the shared stylesheet directly. Components that render full HTML documents additionally require their runtime asset files to be copied from `lib-dist/assets/` into your app's public directory, or you must override the `sourceUrl` or `assetBaseUrl` prop.

## Sources

- [Issues](https://github.com/MengTo/threeui/issues)
- [License: MIT](https://github.com/MengTo/threeui/blob/main/LICENSE)
- [MengTo/threeui on GitHub](https://github.com/MengTo/threeui)
- [Project website](https://threeui.com)
- [README](https://github.com/MengTo/threeui/blob/main/README.md)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/mengto-threeui