threeui
Open-source ThreeUI Community catalog with live interactive components and complete Community source.
What is it?
What it is
ThreeUI Community is the open-source, login-free edition of the ThreeUI component library, providing 50 parent React components with Three.js, shaders, and WebGL UI components, 111 routes, 141 free variant records, and full source code.
Why it exists
It exists to offer a free, publicly accessible collection of high-quality 3D UI components for React and Three.js, maintained through sponsorship, without requiring authentication or payment.
Who should use it
React developers and UI engineers building WebGL-powered interfaces who want a free, open-source component library with Three.js and shader-based effects; teams prototyping or shipping production apps that need browse grids, live renderers, variant pickers, and responsive UI without authentication or checkout flows; developers who prefer to install via npm (`@designcodeio/threeui`) and import individual component subpaths for minimal bundle size.
Who should avoid it
Teams requiring Pro or Beta components, which are intentionally excluded from this Community edition; projects needing authentication, account state, checkout runtime, or commercial licensing beyond MIT; developers who need remote catalog thumbnails or previews redistributed in-repo, since those are loaded externally from threeui.com; users expecting guaranteed roadmap changes, editorial control, exclusivity, or private support via sponsorship.
Stars over time
No change stars in the last 1 day
How it works
A quick walkthrough in plain English
How threeui works
Step 1 of 3
You interact with it
Open threeui, send a request, or connect it to your stack.
Features
Advantages
- Login-free access with no authentication barriers for developers
- Complete Community implementation source code included for transparency
- Small development import graph via component subpath imports
- Automated synchronization from main project ensures up-to-date components
- Clean build, boundary audit, package creation, and smoke test before release
- npm trusted publishing with provenance for secure package distribution
- Free variants and controls retained for all Community components
- Estimated 90,000 daily website views provide potential sponsor exposure
- Multiple sponsorship tiers offer flexible budget options
- Pro source access available through separate CLI with OAuth PKCE authentication
Disadvantages
- Pro and Beta components are removed, limiting advanced functionality
- No checkout runtime or Pro implementation in the Community edition
- Remote catalog thumbnails and previews loaded from external URLs
- Sponsorship costs start at $500/month which may be expensive for small projects
- Components rendering full HTML documents require manual asset copying
- Synchronization workflow requires access to private main project snapshot
- Sponsorship does not guarantee roadmap changes or editorial control
- Limited to 6 Ecosystem Sponsors and 2 Featured Sponsors at any time
- Pro installer versioned and published separately, adding complexity
- Font assets are restricted and removed during synchronization
Installation
native
npm install npm run dev npm run build npm install @designcodeio/threeui
FAQ
What is the difference between ThreeUI Community and the Pro version?
ThreeUI Community is an open‑source, login‑free edition that uses the same application shell, layout, navigation, and components as the main project, but its catalog excludes Pro and Beta components. All free variants and controls are retained, whereas Pro implementation source is not published to npm and requires authentication and a CLI download.
How do I install and use the ThreeUI React package?
Run `npm install @designcodeio/threeui`. Then import a component (e.g., `import { AtTheHorizon } from "@designcodeio/threeui"`) and the shared styles (`import "@designcodeio/threeui/style.css"`). For a smaller import you can use a subpath like `import { AtTheHorizon } from "@designcodeio/threeui/components/AtTheHorizon"`.
How can I run the ThreeUI project locally?
First execute `npm install` to install dependencies, then run `npm run dev` to start the development server. For a production build, use `npm run build`.
What does the community synchronization command do and what files does it generate?
Running `npm run sync:community -- /path/to/main-threeui` refreshes the Community subset from a main‑project snapshot. It filters out Pro and Beta components, preserves free metadata, removes restricted fonts, and writes `public/community-sync-report.json`, `public/source-code.json`, and `src/data/shaders.tsx`.
What licensing applies to the components and assets in ThreeUI Community?
Application code, component code, and Three.js runtime are MIT licensed. Bundled open fonts are under the SIL Open Font License 1.1, and bundled Three.js files remain MIT licensed. Remote thumbnails and previews are not redistributed; see the `ASSET-LICENSES.md`, `FONT-LICENSES.md`, and `THIRD_PARTY_NOTICES.md` files for details.
Featured in Videos
YouTube tutorials and walkthroughs for threeui
Alternatives
Similar projects ranked by category, topics, and text overlap.
