@designcodeio/threeui

中文文档
1.2.0发布于 2026/09/01MITTypeScriptES Module构建来源已验证近 30 天下载 33.2万

Open-source React components and interactive templates from ThreeUI Community.

原始使用文档
文档目录7 节
  1. Sponsor ThreeUI
  2. Included
  3. Run locally
  4. Install the React package
  5. Pro source access
  6. Synchronization
  7. License

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.

PlanPricePlacement and involvement
Ecosystem Sponsor$500/monthLinked 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/monthEverything in Ecosystem, plus a small linked banner in the ThreeUI website documentation sidebar. Up to 2 sponsors.
Ultimate Sponsor$3,000/monthBoth 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

  • 50 Community parent components
  • 111 Community routes
  • 141 free variant records, plus 23 singleton components (164 browse results)
  • Complete Community implementation source and required assets
  • No authentication, account state, checkout runtime, Pro implementation, or Beta implementation
  • Get Pro links to https://threeui.com/pricing

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:

  • public/community-sync-report.json — counts plus per-component variant/control parity
  • public/source-code.json — Community source bundles used by the Code tab
  • src/data/shaders.tsx — Community-only catalog and renderer imports

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.

版本与发布记录

@designcodeio/threeui 共发布 4 个版本,首次发布于 2026/08/22;过去 12 个月发布了 4 个版本。最新版本附带 npm provenance 构建来源证明,可追溯到公开的 CI 构建记录。

版本发布日期距今
1.2.0latest2026/09/012 个月前
1.1.02026/08/252 个月前
1.0.02026/08/232 个月前
0.3.02026/08/222 个月前

关于 @designcodeio/threeui 的常见问题

@designcodeio/threeui 是什么?

Open-source React components and interactive templates from ThreeUI Community.

如何安装 @designcodeio/threeui?

在项目目录运行 npm install @designcodeio/threeui,或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖:react(>=18 <20)、react-dom(>=18 <20)、three(>=0.149 <1)。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖,Yarn 需要手动安装。

@designcodeio/threeui 支持 TypeScript 吗?

支持。包内自带 TypeScript 类型声明(package.json 声明了 types 入口),安装后即可获得类型提示,无需再安装 @types 包。

@designcodeio/threeui 支持 ESM 还是 CommonJS?

以 ES Module 形式发布,推荐使用 import 引入。在 CommonJS 项目中,Node.js 20.19+ / 22.12+ 可以直接 require() 不含顶层 await 的 ES Module,更早的版本需要改用动态 import()。

@designcodeio/threeui 可以商用吗?

@designcodeio/threeui 使用 MIT 许可。宽松许可:允许商业使用、修改和再分发,通常只需在分发时保留原版权与许可声明。以上为概括,不构成法律意见,请以许可原文为准。

@designcodeio/threeui 的下载量有多少?

根据 npm 官方下载统计,@designcodeio/threeui 在 2026/10/12 – 2026/11/10 这 30 天内被下载 332,435 次,日均约 11,081 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入,适合横向比较热度,不能直接等同于使用人数。

@designcodeio/threeui 还在维护吗?

最新版本 1.2.0 发布于 2026/09/01(2 个月前);至今共发布 4 个版本,其中过去 12 个月发布了 4 个;首次发布于 2026/08/22。发布频率只是参考信号:功能稳定的工具可能很少需要更新,建议结合源码仓库的 issue 和提交记录判断。