threeui README

The project's README from github.com/MengTo/threeui. As one markdown file: README.md.

ThreeUI Community

Sponsor ThreeUI: Linked README placements start at $500/month, with website placements from $1,500/month. View sponsorship plans.

The open-source, login-free edition of ThreeUI. 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. Every Community component keeps all of its free variants and controls.

Browse ThreeUI · View the source on GitHub

ThreeUI Community preview

Sponsor ThreeUI

Sponsorship keeps the open-source Community library maintained and puts your product in front of ThreeUI's developer audience. Website traffic is currently estimated at roughly 90,000 views per day as of 26 August 2026; this is directional traffic context, not a guarantee of sponsor impressions, clicks, or results.

Plan Price Placement and involvement
Ecosystem Sponsor $500/month Linked banner near the top of the public GitHub README, plus a thank-you credit in this sponsorship section. Up to 6 sponsors.
Featured Sponsor $1,500/month Everything in Ecosystem, plus a small linked banner in the ThreeUI website documentation sidebar. Up to 2 sponsors.
Ultimate Sponsor $3,000/month Both banner placements, one approved fixed-scope integration project per agreement, and priority consideration for maintenance needs, sponsor feedback, and reasonable special requests. All work is mutually agreed in writing.

See the complete sponsorship details or email [email protected]. Sponsorship does not guarantee roadmap changes, editorial control, exclusivity, or private support.

Included

Run locally

npm install
npm run dev

Run the complete publication boundary, type, and production-build checks:

npm run build

Install the React package

Install the public Community component library from npm:

npm install @designcodeio/threeui

Import a component and the shared styles:

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

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

For the smallest development import graph, use a component subpath:

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

Components that render full HTML documents expect their runtime files at the same root-relative URLs used by the ThreeUI preview. 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.

Pro source access

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

npx @designcodeio/threeui-cli add cross-beam

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. Run npx @designcodeio/threeui-cli --help for login, logout, destination, and development endpoint options.

Synchronization

The checked-in repository runs independently. Maintainers can refresh its Community subset from a separately held main-project snapshot:

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

The sync fails closed, filters Pro and Beta before generating the public import graph, preserves all free metadata and options, removes restricted font assets, and writes:

The private ThreeUI repository runs this synchronization after every successful push to main. A no-op sync exits without a release. Changes update the automation/community-sync branch and open one reviewed pull request here. New public components, variants, or controls infer a minor release; removals infer a major release; compatible source changes infer a patch release. Merging a versioned sync pull request publishes the new package through npm trusted publishing with provenance.

The public workflow also runs a clean build, boundary audit, package creation, and anonymous installation smoke test before release. The Pro installer is versioned and published separately; changes to Pro component content do not require a CLI release.

License

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. See ASSET-LICENSES.md, FONT-LICENSES.md, and THIRD_PARTY_NOTICES.md.

threeui (MengTo/threeui)

ui-components
Searching Database…

6.7K ·GitHub
Threeui
What is this?ThreeUI Community is the open-source, login-free edition of a React component catalog built around Three.js/WebGL and shader-driven UI components, with a live interactive browsing site.
Is this a component library or a full app?It's a React component library distributed via npm, paired with a demo/catalog site that uses the same shell, navigation, search, and live renderers as the main ThreeUI project, just stripped of Pro and Beta components.
How do I add it to a project?Install the public Community component library from npm, then import a component and its shared styles, or use a component subpath import for a smaller dependency graph.
What do I need besides React to use the components?The library is built on Three.js for its WebGL/shader rendering, and some components that render full HTML documents need their runtime asset files copied into your app's public directory.
Does this include everything from the main ThreeUI product?No — this repo deliberately excludes Pro and Beta components, along with any authentication, account state, or checkout logic; only the free Community variants are included.
How big is the Community catalog?It ships 50 Community parent components across 111 routes, with 141 free variant records plus 23 singleton components, totaling 164 browse results.
How do I get Pro components if I need them?Pro source isn't published to npm; active Pro members authenticate in the browser via OAuth with PKCE using the public CLI (npx @designcodeio/threeui-cli) to download an entitled source bundle, which won't overwrite changed project files unless you pass --force.
How does this repo stay in sync with the private main project?After every successful push to main in the private ThreeUI repo, a sync job filters out Pro/Beta content, preserves free metadata, and opens a reviewed pull request here, which then triggers an npm release with provenance.
Can I run and build this repo locally?Yes — npm scripts cover a dev server (vite), full publication boundary/type/production-build checks (build:site), and a separate library build (build:lib) for the npm package.
What are similar projects?canvas-ui, Libraries.dev, plasma-ui, mdb-ui-kit, model-x-studio, shaders, robot-heads, chakra-ui
Which topics is it in?shaders, threejs, npm-package, design-system, webgl, oauth, github-actions, component-library, 3d, cli-tool, ui-components, html
Creator
MengTo
Size
41.6 MB
Stars
6.7K
Updated
CommitSep 01
Age
1mo
Commits · 90 Days