# JGuang > A catalog and distribution platform for independent design systems, motion patterns, icons, LOGOs, and coding-agent guidance. Resource and documentation pages have Markdown versions: append `.md` to the page URL or request it with `Accept: text/markdown`. Chinese pages live under `/zh`, for example https://jiguang132.com/zh/resources/mantine.md. ## Resources - [JGuang UI](https://jiguang132.com/systems/jguang-ui.md) [ready]: Editable React component source with Base UI and Radix UI variants, Tailwind utilities, CSS-variable themes, documentation, and agent guidance. Agent manifest: https://jiguang132.com/agents/jguang-ui.json - [Libraries.dev](https://jiguang132.com/resources/libraries-dev.md) [ready]: Seven public React effect packages, with canvas, WebGL, border, voice and avatar previews. Pro content is not included. Agent manifest: https://jiguang132.com/agents/libraries-dev.json - [Beautiful UI](https://jiguang132.com/resources/beautiful-ui.md) [ready]: MIT components for AI interfaces: reasoning, streaming text, tools, approvals, tables and agent screens. Agent manifest: https://jiguang132.com/agents/beautiful-ui.json - [Mantine Core](https://jiguang132.com/resources/mantine.md) [ready]: The stable @mantine/core component catalog, isolated theme previews and native npm installation. Extra packages are separate. Agent manifest: https://jiguang132.com/agents/mantine.json - [Magic UI](https://jiguang132.com/resources/magic-ui.md) [ready]: The free Magic UI Registry: animated components, effects and public examples. Paid templates are excluded. Agent manifest: https://jiguang132.com/agents/magic-ui.json - [HeroUI](https://jiguang132.com/systems/heroui.md) [ready]: Versioned HeroUI v3 packages with React Aria behavior, Tailwind CSS v4 styles, local bilingual documentation, and isolated compound APIs. Agent manifest: https://jiguang132.com/agents/heroui.json - [Astryx](https://jiguang132.com/resources/astryx.md) [ready]: Meta’s React 19 design system: native components, seven themes and agent-ready tooling. Beta, pinned to 0.7.1. Agent manifest: https://jiguang132.com/agents/astryx.json - [Kinetics](https://jiguang132.com/systems/kinetics.md) [ready]: A bilingual catalog of original JGuang interface-animation implementations with interactive previews, React code, CSS, and implementation guidance. Agent manifest: https://jiguang132.com/agents/kinetics.json - [Icon libraries](https://jiguang132.com/resources/icons.md) [ready]: Searchable bilingual metadata for every installed icon library, with package information, source metadata, and lazy SVG node locations. Agent manifest: https://jiguang132.com/agents/icons.json - [LOGO libraries](https://jiguang132.com/resources/logos.md) [ready]: Searchable brand-asset metadata with available SVG variants, package provenance, and per-library or per-asset licensing information. Agent manifest: https://jiguang132.com/agents/logos.json - [Arco Design](https://jiguang132.com/resources/arco-design.md) [ready]: React business components and configurable design tokens. Agent manifest: https://jiguang132.com/agents/arco-design.json - [Material UI](https://jiguang132.com/resources/material-ui.md) [ready]: Material UI Core: native React components, Emotion themes, bilingual practical documentation and npm installation. MUI X, Lab and Pigment are separate. Agent manifest: https://jiguang132.com/agents/material-ui.json - [Ant Design](https://jiguang132.com/resources/ant-design.md) [ready]: Native Ant Design React components, ConfigProvider themes, bilingual local documentation and pinned npm installation. Ant Design Pro is separate. Agent manifest: https://jiguang132.com/agents/ant-design.json - [Ant Design Mobile](https://jiguang132.com/resources/ant-design-mobile.md) [ready]: React mobile-web interface components. Agent manifest: https://jiguang132.com/agents/ant-design-mobile.json - [Chakra UI](https://jiguang132.com/resources/chakra-ui.md) [ready]: Native Chakra UI v3 components, isolated Emotion themes, bilingual practical guides and pinned npm installation. Chakra Pro is excluded. Agent manifest: https://jiguang132.com/agents/chakra-ui.json - [Open Peeps](https://jiguang132.com/resources/open-peeps.md) [ready]: Mix-and-match hand-drawn characters and expressions. Agent manifest: https://jiguang132.com/agents/open-peeps.json - [daisyUI](https://jiguang132.com/resources/daisyui.md) [ready]: Native daisyUI CSS components, isolated themes, bilingual practical guides and Tailwind 4 installation. Optional calendars use their own APIs. Agent manifest: https://jiguang132.com/agents/daisyui.json - [Open Doodles](https://jiguang132.com/resources/open-doodles.md) [ready]: Editable hand-drawn illustrations for products and posters. Agent manifest: https://jiguang132.com/agents/open-doodles.json - [DiceBear](https://jiguang132.com/resources/dicebear.md) [ready]: Deterministic avatars from reusable styles and seeds. Agent manifest: https://jiguang132.com/agents/dicebear.json - [Motion Primitives](https://jiguang132.com/resources/motion-primitives.md) [ready]: Native React motion components with isolated previews, bilingual guidance and source Registry bundles. Agent manifest: https://jiguang132.com/agents/motion-primitives.json - [tldraw](https://jiguang132.com/resources/tldraw.md) [ready]: Canvas SDK with trial, commercial and hobby licensing. Agent manifest: https://jiguang132.com/agents/tldraw.json ## Documentation - [JGuang UI documentation](https://jiguang132.com/systems/jguang-ui/docs.md) - [Libraries.dev documentation](https://jiguang132.com/resources/libraries-dev/docs.md) - [Beautiful UI documentation](https://jiguang132.com/resources/beautiful-ui/docs.md) - [Mantine Core documentation](https://jiguang132.com/resources/mantine/docs.md) - [Magic UI documentation](https://jiguang132.com/resources/magic-ui/docs.md) - [HeroUI documentation](https://jiguang132.com/systems/heroui/docs.md) - [Astryx documentation](https://jiguang132.com/resources/astryx/docs.md) - [Arco Design documentation](https://jiguang132.com/resources/arco-design/docs/getting-started.md) - [Material UI documentation](https://jiguang132.com/resources/material-ui/docs.md) - [Ant Design documentation](https://jiguang132.com/resources/ant-design/docs.md) - [Ant Design Mobile documentation](https://jiguang132.com/resources/ant-design-mobile/docs/getting-started.md) - [Chakra UI documentation](https://jiguang132.com/resources/chakra-ui/docs.md) - [Open Peeps documentation](https://jiguang132.com/resources/open-peeps/docs/getting-started.md) - [daisyUI documentation](https://jiguang132.com/resources/daisyui/docs.md) - [Open Doodles documentation](https://jiguang132.com/resources/open-doodles/docs/getting-started.md) - [DiceBear documentation](https://jiguang132.com/resources/dicebear/docs/getting-started.md) - [Motion Primitives documentation](https://jiguang132.com/resources/motion-primitives/docs.md) - [tldraw documentation](https://jiguang132.com/resources/tldraw/docs/getting-started.md) ## MCP server Connect any MCP client to the read-only Streamable HTTP endpoint https://jiguang132.com/mcp (no authentication). Tools: `list_resources`, `get_resource`, `search_components`, `read_docs`, `search_icons` and `search_logos`. The `use_resource` prompt returns an integration prompt, and every Agent Skill is also exposed as a `jguang://skills/{name}` resource. Claude Code: `claude mcp add --transport http jguang https://jiguang132.com/mcp`. ## Agent Skills Skills are published for Agent Skills Discovery at https://jiguang132.com/.well-known/agent-skills/index.json. Install the platform Skill and a resource Skill with `npx skills add https://jiguang132.com --skill jguang --skill `; each resource lists its Skill name in its agent manifest (`skillName`). ## shadcn Registry namespaces Source-installed resources are shadcn-compatible Registries. Add these namespaces to `registries` in the project's `components.json`; `npx shadcn@latest search|view|add` and the shadcn MCP server (`npx shadcn@latest mcp`) can then search and install items by name. JGuang UI installs only as a complete bundle: `@jguang-ui/base` (Base UI) or `@jguang-ui/radix` (Radix UI); never mix the two. ```json { "registries": { "@jguang-ui": "https://jiguang132.com/r/jguang-ui/{name}.json", "@jguang-beautiful-ui": "https://jiguang132.com/r/beautiful-ui/{name}.json", "@jguang-magic-ui": "https://jiguang132.com/r/magic-ui/{name}.json", "@jguang-motion-primitives": "https://jiguang132.com/r/motion-primitives/{name}.json" } } ``` ## Machine-readable endpoints - Catalog: https://jiguang132.com/api/catalog - Well-known manifest: https://jiguang132.com/.well-known/jguang.json - Icon search: https://jiguang132.com/api/icons/search - LOGO search: https://jiguang132.com/api/logos/search ## Optional - [Full agent context](https://jiguang132.com/llms-full.txt): every resource's agent guidance in one file # Ant Design Mobile React mobile-web interface components. ## Delivery scope Official-package integration: a local gallery compiles the official MIT demos of 71 components with the pinned antd-mobile package in a phone-width frame, with bilingual docs and API references. Install the package from npm in your project. ## Interactive previews 71 components, each with bilingual notes and license details: /resources/ant-design-mobile/components ## Get started Use antd-mobile exports, CSS variables and ConfigProvider. This is mobile web, not React Native or WeChat components. ```sh npm install antd-mobile@5.43.0 ``` ## Validation Run the target project build and check the selected behavior, keyboard focus, narrow screens, themes and reduced motion where applicable. Examples demonstrate native APIs; they are not a verified integration into your host. Native apps and Mini Programs require their own toolchains. ## Source and license - Official source: https://mobile.ant.design/ - Upstream license: MIT - License reference: https://raw.githubusercontent.com/ant-design/ant-design-mobile/HEAD/LICENSE.txt - Checked: 2026-10-18 - Original JGuang examples and guides: MIT Marks and fonts may have separate rights. Preserve licenses and attribution included with downloaded files; tool licenses do not automatically cover assets. ## Files - App.jsx --- # Ant Design Mobile React 移动网页界面组件。 ## 交付范围 官方包接入：本地图库用固定版本的 antd-mobile 在手机宽度画面中编译 71 个组件的官方 MIT 示例，附双语文档和 API 参考；在项目中从 npm 安装官方包。 ## 交互预览 71 个组件，每项附双语说明与许可信息: /resources/ant-design-mobile/components ## 开始使用 使用 antd-mobile 导出、CSS 变量和 ConfigProvider；这是移动网页库，不是原生或微信组件。 ```sh npm install antd-mobile@5.43.0 ``` ## 验证 运行目标项目构建，按适用范围检查交互、键盘焦点、窄屏、主题与减少动态效果。 示例文件展示原生 API 用法，不代表已完成你的宿主集成；原生 App 和小程序需要对应工具链。 ## 来源与许可 - 官方入口: https://mobile.ant.design/ - 上游许可: MIT - 许可依据: https://raw.githubusercontent.com/ant-design/ant-design-mobile/HEAD/LICENSE.txt - 核验日期: 2026-10-18 - 本站原创示例与指南: MIT 品牌标志与字体可能另有权利限制。保留下载文件自带的许可证和署名，不把工具许可当成素材许可。 ## 交付文件 - App.jsx --- # Ant Design for coding agents Use native antd 6.6.5, @ant-design/icons 6.3.4 and dayjs 1.11.23. Resource availability follows the JGuang catalog integrationStatus; planned resources are not publicly installable integrations. Inspect React/React DOM, lockfile, native providers, styling and SSR before installation. The verified independent consumer uses React 19.2.8. Merge dependencies without overwriting project files or silently upgrading React. Native base command: `npm install antd@6.6.5 @ant-design/icons@6.3.4 dayjs@1.11.23`. Use ConfigProvider for native theme algorithms and locale. Configure dayjs locale separately; wrap content in native App and call App.useApp from descendants for context-aware message/modal/notification. Preserve native component APIs and imported types. Read the local setup guide and chosen component details. Copy the example's complete sourceFiles and use its exact dependency command. npm supplies the library, not copied example files. Motion-dependent demos use native motion 13.0.0; inspect conflicts before changing an existing host Motion version. Upstream upload endpoints are demonstrations. JGuang UI previews block uploads/forms; wire an application-owned endpoint and test synthetic data. Validate types, production build, actual interactions, both themes, locale, keyboard and narrow screens before declaring installation complete. Fixed upstream: https://github.com/ant-design/ant-design/tree/4a39f54842eade4e565ab336ef6097cd7e723cdd . Preserve original MIT and direct dependency notices. Ant Design Pro is outside scope. --- # Arco Design React business components and configurable design tokens. ## Delivery scope Official-package integration: a local gallery compiles the official MIT demos of 69 components with the pinned @arco-design/web-react package, with bilingual docs and API references. Install the package from npm in your project. ## Interactive previews 69 components, each with bilingual notes and license details: /resources/arco-design/components ## Get started Import the package CSS and use ConfigProvider for locale and component settings; keep global CSS isolated. ```sh npm install @arco-design/web-react@2.66.18 ``` ## Validation Run the target project build and check the selected behavior, keyboard focus, narrow screens, themes and reduced motion where applicable. Examples demonstrate native APIs; they are not a verified integration into your host. Native apps and Mini Programs require their own toolchains. ## Source and license - Official source: https://arco.design/ - Upstream license: MIT - License reference: https://raw.githubusercontent.com/arco-design/arco-design/HEAD/LICENSE - Checked: 2026-10-18 - Original JGuang examples and guides: MIT Marks and fonts may have separate rights. Preserve licenses and attribution included with downloaded files; tool licenses do not automatically cover assets. ## Files - App.jsx --- # Arco Design React 业务组件与可配置的设计 Token。 ## 交付范围 官方包接入：本地图库用固定版本的 @arco-design/web-react 编译 69 个组件的官方 MIT 示例，附双语文档和 API 参考；在项目中从 npm 安装官方包。 ## 交互预览 69 个组件，每项附双语说明与许可信息: /resources/arco-design/components ## 开始使用 引入包内 CSS，通过 ConfigProvider 配置语言与组件；隔离全局样式。 ```sh npm install @arco-design/web-react@2.66.18 ``` ## 验证 运行目标项目构建，按适用范围检查交互、键盘焦点、窄屏、主题与减少动态效果。 示例文件展示原生 API 用法，不代表已完成你的宿主集成；原生 App 和小程序需要对应工具链。 ## 来源与许可 - 官方入口: https://arco.design/ - 上游许可: MIT - 许可依据: https://raw.githubusercontent.com/arco-design/arco-design/HEAD/LICENSE - 核验日期: 2026-10-18 - 本站原创示例与指南: MIT 品牌标志与字体可能另有权利限制。保留下载文件自带的许可证和署名，不把工具许可当成素材许可。 ## 交付文件 - App.jsx --- # Astryx 0.7.1 for JGuang Independent React 19+ design system from Meta, MIT, currently Beta. Core, themes and CLI are pinned to 0.7.1. No lab or canary charts are included. Components: /resources/astryx/components Documentation: /resources/astryx/docs Setup: /resources/astryx/docs/getting-started Catalog: /resources/astryx/catalog.json Page templates (57, separate from components): /resources/astryx/templates Template catalog: /resources/astryx/templates/catalog.json Template guides: /resources/astryx/templates/ (also available through MCP read_docs) Skill: /agents/skills/astryx/SKILL.md Install: `npm install @astryxdesign/core@0.7.1 @astryxdesign/theme-neutral@0.7.1 @stylexjs/stylex@0.19.0` Then import reset.css, astryx.css and theme-neutral/theme.css in that order. Configure Theme with neutralTheme from the theme package's /built export. Set the requested mode and locale. Installing dependencies or running CLI init alone does not finish the integration. CLI: `npx @astryxdesign/cli@0.7.1 component --list`, `component Button`, `template --list`, `doctor`. Review existing agent files before `init`. Use `template --list --type page` to list pages. A template's detail provides its exact dependencies, native scaffold command and StyleX compilation requirement. incident-console, messaging-shell and table are upstream drafts (isReady=false); blank is an intentionally minimal scaffold. Templates have mock data, not live authentication, payment or AI backends. They are not counted as additional component families. 中文：Astryx 是 JGuang 收录的独立设计系统，采用 npm 原生接入。先检查 React 与样式兼容性，再读取文档；不要复制本站整套预览环境，不要混用其他组件库 API。字体、图片与示例数据根据目标项目调整；保留 MIT 版权。所有安装步骤需要在目标项目实际验证。 --- # Beautiful UI for JGuang MIT components for AI interfaces: reasoning, streaming text, tools, approvals, tables and agent screens. Human page: /resources/beautiful-ui Components: /resources/beautiful-ui/components Documentation: /resources/beautiful-ui/docs Inventory: /resources/beautiful-ui/catalog.json Skill: /agents/skills/beautiful-ui/SKILL.md - npx shadcn@latest add {origin}/r/beautiful-ui/loading-state.json 1. Inspect package.json, framework, React version, Tailwind version, aliases and existing components. Preserve user changes. 2. Use the versioned native installation in the resource manifest. Never substitute Base UI or Radix APIs. 3. Install the selected namespaced Registry item. Review the included foundation CSS and preserve upstream license notices. 4. Preserve light/dark themes, focus, keyboard behavior, responsive layouts and reduced motion. 5. Run typecheck, tests and build. Inspect the resulting UI; do not claim verification without running it. License: MIT. Source: https://github.com/slev12397/beautiful-ui @ 44a274e598395ab61e7c96c26fda2758780253b7. Paid templates, Studio presets and commercial Central Icons are excluded. Preview demo data is not a backend service. ## Native API boundaries / 原生 API 边界 - Read the component's local bilingual practical guide and actual source parameter reference in `/resources/beautiful-ui/.json` before connecting business data. The generic gallery `variant` prop is ignored by most components; only documented native variants change their visuals. Do not invent universal disabled/loading/error props. - ApprovalCard submission contains selected option indices, not custom text. ChatComposer messages and StreamingText tokens are scripted/timed demos, not a backend stream. PromptBar onSend passes text only, not attachment or model selections. RecommendationCard and the tables do not expose business persistence callbacks. - Keep Base UI/Radix APIs separate. Copy the example using the installed Beautiful UI namespace, initialize its own CSS once, and preserve MIT notices. Review `/resources/beautiful-ui/ADAPTATIONS.md` for checked local correctness/safety changes; vendor originals remain unchanged. - 按实际参数和回调连接后端，不把演示按钮当成已完成的业务接口。确认卡片仅提交选项索引，提示词输入只发送文本；流式回答是本地演示，不提供真实 SSE。更换初始化数据时按使用指南处理实例重置。 ## Complete usage examples / 完整用法示例 - Find the real `examples` list in `/resources/beautiful-ui/.json` or `/r/beautiful-ui/examples/index.json`. Install the chosen complete example, not only the native component, when you need its typed data, callbacks and shared helpers. Do not guess Registry paths. - Native showcase states and JGuang-authored scenarios remain distinct. Example entries pin a valid scenario; the native component API is not expanded with these scenario names. Import the installed preset entry directly and adapt its bundled source where needed. - Import the independent stylesheet once, initialize Tailwind v4, set html lang before mounting for localized data, and synchronize the html dark class. Preserve both upstream and JGuang-example MIT licenses. - 完整示例已打包参数化源码、辅助函数、原生组件、CSS 和固定依赖。按详情给出的真实命令安装；示例场景名不是新的原生属性，也不是额外组件数量。不包含真实后端、认证、录屏或保存服务。 --- # Chakra UI 3.37.0 through JGuang Read the resource manifest's actual integration status before using its endpoints. Availability is not implied merely by the presence of this authored guidance. - Human page: /resources/chakra-ui - Component previews: /resources/chakra-ui/components - Practical documentation: /resources/chakra-ui/docs - Component and separate concept inventory: /resources/chakra-ui/catalog.json - Native setup in English and Chinese: /resources/chakra-ui/setup.json - Project Skill: /agents/skills/chakra-ui/SKILL.md - Original licenses and assessed supplements: /resources/chakra-ui/LICENSE_REVIEW.md - Complete runtime and icon attributions: /resources/chakra-ui/THIRD_PARTY_NOTICES.md ## Inspect before installation Inspect the target framework, React/DOM peers, lockfile, aliases, existing Chakra major version, Provider and theme. Preserve user files; merge existing Providers. Never force a peer conflict or silently replace React. Chakra v3 is native Emotion and Ark-based composition, not a JGuang UI Base UI/Radix/Tailwind implementation. ```bash npm install @chakra-ui/react@3.37.0 @emotion/react@11.14.0 ``` Use ``. Add next-themes or other packages only when the actual selected example requires them. Native locale formatting does not translate business labels. Concepts are not extra components and examples are not universal `variant` props. ## Copy complete, compatible example source The selected detail JSON supplies `examples`, each with actual `sourceFiles`, `dependencies`, `devDependencies`, `install` and a named export. npm does not copy these files. Preserve relative imports and resolve `compositions/*` to local files, not an invented npm package. Copy support files such as tiptap-commands.d.ts when listed. Type imports do not register runtime editor extensions. Retain the coherent Tiptap 3.31.4 family, required prop-types for lorem demos and real development types. ## Verify the actual application Run strict types and the production build, then interact with the selected example. Check both themes, keyboard/focus, narrow screens, controlled callbacks, loading, errors and cleanup. Vite verification is not Next.js SSR certification. Configure the framework's actual Emotion/client/SSR boundaries. Preview network and download restrictions are not product backends; use authorized services and synthetic data. Preserve original source, MIT/ISC and collection-specific licenses; retained notice supplements are JGuang assemblies, not forged upstream files. Chakra Pro is excluded. ## 中文接入要点 先检查项目框架、React 版本、锁文件、现有 Chakra 主版本和 Provider，不强行覆盖已有代码。 按所选示例的真实清单复制完整源码并安装依赖，npm 命令本身不会复制示例。保留原生 API、 事件详情回调、复合子组件和实际扩展；不要把示例名称当成组件通用属性。读取项目 Skill 与 双语初始化指南，安装后实际运行类型检查、构建和交互验收，不把“已复制”当作“安装完成”。 --- # daisyUI installation through JGuang / daisyUI 接入指南 This guide covers the accepted native CSS integration. Check the resource manifest and pinned version before installation. Copying this text does not install anything. 本指南覆盖已验收的原生 CSS 接入范围；先检查资源状态与版本，不把复制提示词视为安装完成。 ## Scope / 范围 daisyUI 5.7.47 is a native CSS plugin, not a React primitive library. The pinned source is https://github.com/saadeghi/daisyui/tree/c51f50130ffefb293179e6fce8de7ad3f307e45f . Use only the selected examples. Do not download the whole gallery or clone the upstream repository into the user's application. daisyUI 是原生 CSS 插件，不是 React Primitive 组件库。只读取并接入用户选择的示例， 不把整套演示站或上游仓库下载到目标项目。 ## Inspect first / 先检查项目 Inspect the package manager, lockfile, framework, Tailwind version, CSS entry, existing plugins, theme boundary, class prefix and selected example's source files. Reuse compatible installed dependencies. Tailwind 3 needs an explicit migration decision; do not force peer dependencies or replace the application's React version. Preserve custom components, styles and existing project Skills. 检查包管理器、锁文件、框架、Tailwind 版本、CSS 入口、插件、主题边界、类名前缀及 所选示例的全部源码文件。复用兼容依赖，不使用 --force 或 --legacy-peer-deps， 不静默升级 Tailwind 3，不覆盖已有组件、样式或项目级 Skills。 ## Ordinary HTML setup / 普通 HTML 安装 ```bash npm install -D tailwindcss@4.2.1 @tailwindcss/cli@4.2.1 daisyui@5.7.47 ``` For an existing framework, keep its Tailwind 4 pipeline. For a plain HTML project, add the following to the CSS entry without duplicating existing imports: 已有框架继续使用其 Tailwind 4 构建方式。普通 HTML 项目的 CSS 入口添加以下配置， 不要重复导入或覆盖现有配置： ```css @import "tailwindcss"; @plugin "daisyui" { themes: light --default, dark --prefersdark; } ``` ```bash npx @tailwindcss/cli -i ./src/styles.css -o ./public/styles.css --minify ``` ```html ``` Resolve paths for the real project and scan real HTML/JSX files, not only escaped JSON. Original `$$btn` means `btn` without a configured prefix. Read every source file listed for the selected example; do not blindly insert original inline handlers into JSX or evaluate code strings. Preserve native disabled states, unique IDs, labels, event cleanup and dialog focus behavior. 按真实项目调整路径，确保 Tailwind 扫描实际 HTML/JSX，而不是仅扫描转义后的 JSON。 未配置前缀时，原文中的 `$$btn` 对应 `btn`。读取所选示例列出的所有文件，按框架 接入事件；不要执行代码字符串。保留禁用状态、唯一 ID、标签、事件清理和对话框焦点。 ## Optional calendars / 可选日历 Choose only the selected calendar's dependency: - Cally: `cally@0.9.2`; import before rendering its custom elements. - Vanilla Calendar: `vanilla-calendar-pro@3.4.0`; initialize after mounting and call `destroy()` during teardown. Use the pinned local npm module, not a CDN script. - React Day Picker: `react-day-picker@9.14.0`; inspect peer compatibility and preserve controlled selection. React/React DOM 19.2.8 is the verified preview environment, not a requirement to replace the target project's React. 三种日历不能混用 API；只安装选中的方案。普通按钮、表单不需要 React 或日历依赖。 Cally 先导入后渲染；Vanilla Calendar 挂载后初始化、卸载时销毁；React Day Picker 需检查宿主 React 兼容性并连接选中状态，不能直接替换宿主版本。 ## Acceptance / 安装后验收 Run the target's relevant type checks and production build. Verify compiled CSS, the chosen real interaction, keyboard focus, light/dark, mobile and reduced motion. Native dialog, Popover and anchor positioning need target-browser support. CSS classes do not implement authentication, payments, OTP delivery or timers. Report actual commands, results and remaining limits; never claim success from copying a command or displaying static markup alone. 执行目标项目适用的类型检查和生产构建，验证生成样式、所选组件真实交互、键盘、 深浅色、移动端和减少动画。核对目标浏览器的原生特性支持。CSS 不提供登录、支付、 验证码发送或计时器服务；如实报告运行结果，不能把静态展示当成安装成功。 Preserve the upstream MIT license, provenance and applicable dependency notices. Commercial templates and unlicensed remote media are excluded. Deployment, accounts, microphone access and unrelated edits require separate user intent. 保留上游 MIT、来源记录及适用依赖许可；不包含商业模板和无授权远程素材。 本指南不授权部署、创建账号、申请麦克风权限或修改无关内容。 --- # DiceBear Deterministic avatars from reusable styles and seeds. ## Delivery scope Official-package integration: a local gallery renders all 31 avatar styles with the pinned @dicebear packages, with per-style license notes and original usage examples. Install the packages from npm in your project. ## Interactive previews 31 avatar styles, each with bilingual notes and license details: /resources/dicebear/components ## Get started Select a style and inspect its own license, then generate a seeded SVG locally. Store attribution for styles that require it. ```sh npm install @dicebear/core@9.4.2 @dicebear/collection@9.4.2 ``` ## Validation Run the target project build and check the selected behavior, keyboard focus, narrow screens, themes and reduced motion where applicable. Examples demonstrate native APIs; they are not a verified integration into your host. Native apps and Mini Programs require their own toolchains. ## Source and license - Official source: https://www.dicebear.com/ - Upstream license: Per-style licenses - License reference: https://www.dicebear.com/licenses/ - Checked: 2026-10-18 - Original JGuang examples and guides: MIT The software is MIT; style licenses include CC0, CC BY and artist-specific terms. Marks and fonts may have separate rights. Preserve licenses and attribution included with downloaded files; tool licenses do not automatically cover assets. ## Files - main.js --- # DiceBear 通过风格和种子生成可重复的头像。 ## 交付范围 官方包接入：本地图库用固定版本的 @dicebear 包渲染全部 31 种头像风格，附逐个风格的许可说明和原创用法示例；在项目中从 npm 安装官方包。 ## 交互预览 31 种头像风格，每项附双语说明与许可信息: /resources/dicebear/components ## 开始使用 先选择风格并核对其许可，再本地生成带种子的 SVG；需要署名的风格要保存署名。 ```sh npm install @dicebear/core@9.4.2 @dicebear/collection@9.4.2 ``` ## 验证 运行目标项目构建，按适用范围检查交互、键盘焦点、窄屏、主题与减少动态效果。 示例文件展示原生 API 用法，不代表已完成你的宿主集成；原生 App 和小程序需要对应工具链。 ## 来源与许可 - 官方入口: https://www.dicebear.com/ - 上游许可: Per-style licenses - 许可依据: https://www.dicebear.com/licenses/ - 核验日期: 2026-10-18 - 本站原创示例与指南: MIT 软件为 MIT；风格包括 CC0、CC BY 和作者自定义许可。 品牌标志与字体可能另有权利限制。保留下载文件自带的许可证和署名，不把工具许可当成素材许可。 ## 交付文件 - main.js --- # HeroUI in JGuang HeroUI v3 is an independent React design system consumed from the versioned `@heroui/react` and `@heroui/styles` npm packages. JGuang provides a local bilingual component gallery and documentation but does not repackage HeroUI as editable Registry source. ## Use it - Install `@heroui/react@3.2.2` and `@heroui/styles@3.2.2`. - Import `@heroui/styles` after Tailwind CSS v4. - Browse components at `/systems/heroui/components`. - Read documentation at `/systems/heroui/docs`. - Read the machine manifest at `/agents/heroui.json`. - Read the agent Skill at `/agents/skills/heroui/SKILL.md`. Keep HeroUI compound APIs and React Aria behavior isolated from JGuang, Base UI, Radix UI, and Kinetics implementations. --- # JGuang icon libraries JGuang exposes multiple independent open-source icon libraries through a bilingual visual browser and a bounded read-only search API. ## Search `GET /api/icons/search?q=arrow&library=lucide&limit=20` - `q` is required. - `library` is optional; omit it to search every installed library. - `limit` defaults to 20 and is capped at 100. - Results include English and Chinese names, component and package metadata, style, categories, and the lazy SVG node JSON location. Discover installed libraries and licenses in `/agents/icons.json`. Browse visually at `/icons`. Retrieve only the selected records instead of loading all icon metadata into context. --- # JGuang UI JGuang UI is an editable-source React design system distributed through shadcn-compatible Registry bundles. It provides 60 Base UI components and 60 equivalent Radix UI components. Select only one primitive base for a consuming project. ## Use it - Inspect the project `components.json` before selecting a bundle. - Install Base UI projects from `/r/jguang-ui/base.json`. - Install Radix UI projects from `/r/jguang-ui/radix.json`. - Read documentation at `/systems/jguang-ui/docs`. - Read the machine manifest at `/agents/jguang-ui.json`. - Read the agent Skill at `/agents/skills/jguang-ui/SKILL.md`. The Registry copies editable component source, theme guidance, license notices, and agent Skills into the consuming project. Do not mix Base UI and Radix UI primitive APIs accidentally. --- # Kinetics in JGuang Kinetics is a bilingual interface-animation catalog containing original JGuang React, Tailwind, and CSS implementations. The catalog references public Kinetics and transitions.dev behavior names, but JGuang does not copy or redistribute their restricted implementation source. ## Use it - Browse interactive patterns at `/systems/kinetics/components`. - Read the machine manifest at `/agents/kinetics.json`. - Read the agent Skill at `/agents/skills/kinetics/SKILL.md`. - Preserve reduced-motion behavior, keyboard access, cleanup, and performance. Treat JGuang, HeroUI, and Kinetics as isolated implementations. Motion may wrap a design-system component but must not silently replace its primitive API or accessibility behavior. --- # Libraries.dev for JGuang Seven public React effect packages, with canvas, WebGL, border, voice and avatar previews. Pro content is not included. Human page: /resources/libraries-dev Components: /resources/libraries-dev/components Documentation: /resources/libraries-dev/docs Inventory: /resources/libraries-dev/catalog.json Skill: /agents/skills/libraries-dev/SKILL.md - npm install border-beam@1.4.1 - npm install thinking-orbs@0.3.2 - npm install bot-avatars@0.2.2 - npm install liquid-gooey@0.2.2 - npm install voice-glow@0.3.0 - npm install metal-fx@2.0.11 - npm install img-fx@0.5.1 three@0.182.0 1. Inspect package.json, framework, React version, Tailwind version, aliases and existing components. Preserve user changes. 2. Use the versioned native installation in the resource manifest. Never substitute Base UI or Radix APIs. 3. Use browser-only Canvas/WebGL effects with SSR guards, offscreen cleanup and static fallbacks. Do not request a microphone without a user gesture. 4. Preserve light/dark themes, focus, keyboard behavior, responsive layouts and reduced motion. 5. Run typecheck, tests and build. Inspect the resulting UI; do not claim verification without running it. License: MIT. Source: https://github.com/Jakubantalik/Libraries.dev @ b7f44b8744f4e09ff088d824719636a513110e2a. Paid templates, Studio presets and commercial Central Icons are excluded. Preview demo data is not a backend service. ## Native npm examples / 原生 npm 示例 - Read each local bilingual practical guide and source-backed parameter reference before adapting. Copy examples/.tsx and shared.tsx together from /resources/libraries-dev/.json; install the pinned native npm version, not a guessed Registry URL. Example helpers are MIT and not extra component packages. - Explicitly pass the app's light/dark value where native auto only follows OS preference. Keep browser-only Canvas/WebGL guards, reduced-motion alternatives and cleanup. Image FX needs the pinned three peer dependency and a nonempty image pool for reveal. Regenerate is visual, not an AI generation API. - Voice level demos never acquire a microphone; a real MediaStream is a separate, consented integration and takes precedence over level. Do not invoke useMicrophone/getUserMedia on mount. MetalText and MetalFx have different APIs; do not pass an unsupported paused prop to MetalText. - 模拟声音、光球状态、头像和图像重新生成都只是原生视觉状态，不代表真实后端服务。按实际类型使用参数，示例名称不是组件属性。保留原生库 MIT 和 JGuang UI 示例 MIT，排除 Pro Studio、付费预设和商业素材。 --- # JGuang LOGO libraries JGuang exposes independent LOGO libraries through a visual browser and a bounded read-only search API. Results include available static SVG variants and licensing metadata. ## Search `GET /api/logos/search?q=openai&library=lobe-icons&limit=20` - `q` is required. - `library` is optional; omit it to search every installed LOGO library. - `limit` defaults to 20 and is capped at 100. - Results include titles, aliases, categories, homepage, color, license, and available SVG variant URLs. Discover installed libraries in `/agents/logos.json`. Browse and download visually at `/logos`. Respect per-asset licenses and trademark restrictions. --- # Magic UI for JGuang The free Magic UI Registry: animated components, effects and public examples. Paid templates are excluded. Human page: /resources/magic-ui Components: /resources/magic-ui/components Documentation: /resources/magic-ui/docs Inventory: /resources/magic-ui/catalog.json Skill: /agents/skills/magic-ui/SKILL.md - npx shadcn@latest add {origin}/r/magic-ui/magic-card.json 1. Inspect package.json, framework, React version, Tailwind version, aliases and existing components. Preserve user changes. 2. Use the versioned native installation in the resource manifest. Never substitute Base UI or Radix APIs. 3. Install the selected namespaced Registry item. Review the included foundation CSS and preserve upstream license notices. 4. Preserve light/dark themes, focus, keyboard behavior, responsive layouts and reduced motion. 5. Run typecheck, tests and build. Inspect the resulting UI; do not claim verification without running it. License: MIT. Source: https://github.com/magicuidesign/magicui @ cdb348cb4c72a9b54b554d8617801e479fbc8714. Paid templates, Studio presets and commercial Central Icons are excluded. Preview demo data is not a backend service. ## Complete examples / 完整示例 - A core component item is not an entire demo. Use the `examples` array in `/resources/magic-ui/.json` or `/r/magic-ui/examples/index.json` to find the exact bundled demo command; never guess an example name. Each bundle includes native support UI, utilities, dependent effects and pinned dependencies. Helpers are not additional components. - Initialize Tailwind v4 semantic CSS variables and the dark variant. Reuse the existing next-themes ThemeProvider; do not add a competing provider. Next Link demos require Next.js, while the native component API stays independent. - Read the source-generated parameter reference, preserving discriminated unions and never exclusions. Review online-media requirements. Example forms and mock data are not an authentication/backend implementation. - 组件安装与完整示例安装不同；按组件详情的 examples 清单选择真实命令，不猜测路径。保留原生 Provider、联合类型、主题与许可证，安装后实际检查类型、构建和交互。 ## Practical native guidance / 实用原生指南 - Read the bilingual practical guide in /resources/magic-ui/.json before installing. Prop explanations are extracted from all actual example JSX and grouped by imported module and owner. terminal.tsx TypingAnimation is not the standalone typing-animation.tsx API. Example keys select bundled entry points, not universal variant props. - Preserve MagicCard's gradient/orb discriminated union, actual AnimatedBeam DOM refs, and native timing units. Do not mix CoolMode options with ConfettiButton options. The TweetCard browser gallery uses ClientTweetCard; the async server API needs a compatible server runtime. - Canvas/WebGL and external image/video/tweet failures need real fallback paths. Honor reduced motion, mount only when relevant, and verify timers/RAF/observers/listeners are released on unmount. CSS-only pauses are not evidence that a graphics engine stopped. Never inject remote tweet text as raw HTML. - 本地实用指南及示例标签已适配中文；上游详细参考与演示文本仍保留原文。动画终端不执行命令，光束不传输数据，图像特效不提供 AI 生成服务，庆祝动画不证明业务成功。使用完整示例的真实命令并保留 MIT 来源。 --- # Mantine Core for JGuang The stable @mantine/core component catalog, isolated theme previews and native npm installation. Extra packages are separate. Human page: /resources/mantine Components: /resources/mantine/components Documentation: /resources/mantine/docs Inventory: /resources/mantine/catalog.json Skill: /agents/skills/mantine/SKILL.md - npm install @mantine/core@9.7.1 @mantine/hooks@9.7.1 1. Inspect package.json, framework, React version, Tailwind version, aliases and existing components. Preserve user changes. 2. Use the versioned native installation in the resource manifest. Never substitute Base UI or Radix APIs. 3. Import @mantine/core/styles.css once and wrap the application in MantineProvider. This resource covers @mantine/core only; dates/charts/forms need separate packages. 4. Preserve light/dark themes, focus, keyboard behavior, responsive layouts and reduced motion. 5. Run typecheck, tests and build. Inspect the resulting UI; do not claim verification without running it. License: MIT. Source: https://github.com/mantinedev/mantine @ f0e2bc6d28b0f0b8aaefb5b859937bf77f539df7. Paid templates, Studio presets and commercial Central Icons are excluded. Preview demo data is not a backend service. ## Native Core guidance / 原生 Core 指南 - Read /resources/mantine/.json and its local bilingual practical guide for purpose, actual prop owners, controlled callback types and business boundaries. Copy the documented examples/.tsx if useful; install the pinned official npm packages. Do not copy vendor internals as standalone engines. - The example's variant/theme props belong to its host, not to every Mantine component. Use only the scenarios listed in the resource catalog; preserve native compound children, stores, controlled values and nullable selection/file callbacks. Source references retain shared Box/Input/ColorSlider types and explicit external inheritance. - Import native styles once and retain MantineProvider.forceColorScheme. Keep website controls separate from this native preview runtime. For a standalone removable Pill, expose and label its removal control; compound PillsInput follows its own native keyboard behavior. Provide exits for FocusTrap and keep loading reset controls outside their overlay. - 本地实用指南已适配中英文；上游详细正文与类型注释仍保留英文，不宣称全文翻译。示例状态只是本地演示，没有上传、后端保存或自动校验服务。仅覆盖 Core；日期、图表和表单扩展包需要另行评估安装。保留固定源码来源与 MIT 许可。 ## Peer compatibility guard / 兼容性检查 Mantine Core 9.7.1 requires React and React DOM ^19.2.0 plus @mantine/hooks 9.7.1. Verify these peers before installing. Never use --force/--legacy-peer-deps to hide a mismatch or silently upgrade the host React major version. Explain impact and obtain the project owner's decision first. Enable native theme.respectReducedMotion and synchronize forceColorScheme. React 18 不满足当前固定版本要求；先说明兼容冲突和升级影响，不强行安装或擅自升级宿主。 --- # Material UI Core for JGuang This is the prepared native installation guide. Check `/agents/material-ui.json` before proceeding: only `ready` resources expose verified public capabilities. Private staging does not constitute public availability. - Components: `/resources/material-ui/components` - Bilingual practical docs: `/resources/material-ui/docs` - Source/example catalog: `/resources/material-ui/catalog.json` - Bilingual setup: `/resources/material-ui/setup.json` - Project Skill: `/agents/skills/material-ui/SKILL.md` Use the manifest's fixed official npm installation, not an invented Registry URL. Read the Skill and relevant local component guide before adapting native props, compound children, slots, callbacks or SSR. Example dependency installation does not copy its source: preserve every listed local helper/data file and MIT license. Existing host React/themes/user files take precedence over a demo's setup. Native default Emotion Core only. MUI X, Lab, Pigment and framework-specific SSR cache integration require separate acceptance. Original upstream source and comments are retained; practical prose and labels are bilingual. Copying an installation prompt is not evidence of installation success. 中文：先读取资源清单，只有 ready 状态才开放经验证的公众接入能力。按固定版本 npm 安装，并复制完整示例源码闭包；不要猜测 Registry 地址、覆盖用户文件或强制忽略 React 兼容冲突。请阅读双语初始化与组件指南，保留 Material UI 原生组合、主题和类型语义。MUI X、Lab、Pigment 与特定框架 SSR 缓存另行验收；实用文档的中文化不代表上游全部源码注释已翻译。 --- # Motion Primitives / 智能体接入指南 Check the supplied resource manifest before installing. Only a ready entry with Registry capability authorizes treating its URLs as available installation artifacts. Planned or missing entries must not be treated as accepted integration. 先读取资源清单。只有状态为 ready 且提供 Registry 能力的条目，才能作为可用安装来源。 计划中、缺失或信息不一致时停止安装；Skill 文件存在不代表接入已验收。 ## Select and inspect / 选择并检查 Read the resource's setup guide, selected component/example and project Skill. The verified source is commit 120f64f6ca60348e251f929e9c81f11ccbe45eda from https://github.com/ibelick/motion-primitives . Baseline: React/ReactDOM 18.3.1, Motion 11.12.0, Tailwind 4.0.0. Inspect package manager, lockfile, framework, client boundary, components alias, CSS entry and theme first. 读取初始化指南、所选组件或完整示例及项目级 Skill。先检查包管理器、锁文件、框架、 客户端边界、组件别名、CSS 和主题。验证基线不是强制降级要求：React 19、Tailwind 3 或其他 Motion 版本需要单独验证，不能直接覆盖已有配置或绕过依赖冲突。 ## Install selected source / 按需安装 Use the catalog's exact installation URL and trusted origin with shadcn add. Core and complete-example items differ; use the selected item's actual ID. Install only required source and dependencies, without cloning the repository or downloading every demo. Inspect Registry file targets before writing; they must remain under the resolved components alias's motion-primitives namespace. Do not use --overwrite, --force or --legacy-peer-deps. Preserve existing files. 使用目录中对应条目的真实安装地址，不猜测示例 ID，不执行未替换的域名占位符。 核心组件与完整示例是不同安装项；只安装用户选择的内容，不下载整个仓库或演示站。 先检查目标路径，禁止越出 motion-primitives 命名空间，不覆盖已有文件、不强制解决冲突。 React 由目标项目管理，安装后核对源码和锁文件变更。 ## Initialize / 初始化 Use actual exported APIs, not similarly named primitives from another system. No global library Provider is required. Add client boundaries where appropriate. Reuse Tailwind and merge semantic tokens; ensure installed source is scanned. Read the setup guide before using the old Tailwind 4.0 baseline: its node/oxide packages need alignment, not loose upgrades. Preserve host theme and overrides. 按源码导出的真实 API 使用，不混用其他设计系统的同名组件。按需增加客户端边界， 不要求额外全局 Provider。复用 Tailwind、合并语义变量并扫描安装源码，不能把指南中 的变量示意当成完整主题。采用旧版 Tailwind 4.0 基线时需按指南对齐 node/oxide， 其他兼容管线不应因此被替换。 ## Verify / 验收 Run relevant types and production build, verify generated styles and the selected interaction in light/dark, mobile and keyboard use. Test dialog Escape/focus return, carousel arrow space and continuous-motion cleanup where applicable. Host preview pause controls are not part of installed component source; MotionConfig alone does not stop every timer. Add real reduced-motion/pause behavior as needed. Report failed or untested checks honestly. 执行类型检查和生产构建，实际验证样式、所选交互、深浅色、手机和键盘。相关组件需检查 对话框 Escape/焦点返回、轮播箭头空间、连续动画暂停与卸载清理。官网预览宿主的暂停 按钮不会随组件安装；MotionConfig 也不会自动停止所有计时器。复制提示词、命令成功 或静态截图都不能单独证明安装完成。 Preserve MIT, local adaptation records, applicable Adobe Apache-2.0 and dependency notices. Geometric demo media is authored replacement artwork. Mock forms are not backend services. No deployment, accounts or unrelated edits are included. 保留 MIT、本地修改记录、适用的 Adobe Apache-2.0 与依赖声明。几何演示图片为替代素材， 示例表单不提供后端服务。本指南不包含部署、账号创建或无关修改。 --- # Open Doodles Editable hand-drawn illustrations for products and posters. ## Delivery scope Local CC0 mirror: 33 SVG doodles downloaded from the official site, with per-file source URLs and SHA-256 hashes. PNG and GIF versions remain on the official site. ## Interactive previews 33 illustrations, each with bilingual notes and license details: /resources/open-doodles/components ## Get started Download SVG illustrations, adjust their palette and composition, and export at the target dimensions. ## Validation Open the downloaded source in its target editor. Inspect dimensions, font substitution, licensing and the exported file. Examples demonstrate native APIs; they are not a verified integration into your host. Native apps and Mini Programs require their own toolchains. ## Source and license - Official source: https://www.opendoodles.com/ - Upstream license: CC0-1.0 - License reference: https://www.opendoodles.com/about - Checked: 2026-10-18 - Original JGuang examples and guides: MIT Marks and fonts may have separate rights. Preserve licenses and attribution included with downloaded files; tool licenses do not automatically cover assets. ## Files Local bilingual guidance and Agent Skill; obtain assets or commercial SDKs from the official source. --- # Open Doodles 适合产品与海报的可编辑手绘插画。 ## 交付范围 本地 CC0 镜像：从官网下载的 33 幅 SVG 插画，逐个记录来源地址和 SHA-256；PNG 和 GIF 版本请从官网获取。 ## 交互预览 33 幅插画，每项附双语说明与许可信息: /resources/open-doodles/components ## 开始使用 下载 SVG 插画，调整配色与构图，按目标尺寸导出。 ## 验证 在目标编辑器打开源文件，检查尺寸、字体替换、许可和导出文件。 示例文件展示原生 API 用法，不代表已完成你的宿主集成；原生 App 和小程序需要对应工具链。 ## 来源与许可 - 官方入口: https://www.opendoodles.com/ - 上游许可: CC0-1.0 - 许可依据: https://www.opendoodles.com/about - 核验日期: 2026-10-18 - 本站原创示例与指南: MIT 品牌标志与字体可能另有权利限制。保留下载文件自带的许可证和署名，不把工具许可当成素材许可。 ## 交付文件 本地双语使用指南和 Agent Skill；素材或商业 SDK 从官方获取。 --- # Open Peeps Mix-and-match hand-drawn characters and expressions. ## Delivery scope Local CC0 mirror: 93 ready-made SVG peeps downloaded from the official site, with per-file source URLs and SHA-256 hashes. Get the complete mix-and-match library from the official site. ## Interactive previews 93 illustrations, each with bilingual notes and license details: /resources/open-peeps/components ## Get started Download the library from its official page, assemble body, expression and accessories, and keep a consistent palette across outputs. ## Validation Open the downloaded source in its target editor. Inspect dimensions, font substitution, licensing and the exported file. Examples demonstrate native APIs; they are not a verified integration into your host. Native apps and Mini Programs require their own toolchains. ## Source and license - Official source: https://www.openpeeps.com/ - Upstream license: CC0-1.0 - License reference: https://www.openpeeps.com/ - Checked: 2026-10-18 - Original JGuang examples and guides: MIT Shared characters are not an exclusive brand IP. Marks and fonts may have separate rights. Preserve licenses and attribution included with downloaded files; tool licenses do not automatically cover assets. ## Files Local bilingual guidance and Agent Skill; obtain assets or commercial SDKs from the official source. --- # Open Peeps 可组合的手绘人物和表情。 ## 交付范围 本地 CC0 镜像：从官网下载的 93 个成品人物 SVG，逐个记录来源地址和 SHA-256；可自由组合的完整素材库请从官网获取。 ## 交互预览 93 幅插画，每项附双语说明与许可信息: /resources/open-peeps/components ## 开始使用 从官网获取素材库，组合身体、表情和配饰，保持输出间配色一致。 ## 验证 在目标编辑器打开源文件，检查尺寸、字体替换、许可和导出文件。 示例文件展示原生 API 用法，不代表已完成你的宿主集成；原生 App 和小程序需要对应工具链。 ## 来源与许可 - 官方入口: https://www.openpeeps.com/ - 上游许可: CC0-1.0 - 许可依据: https://www.openpeeps.com/ - 核验日期: 2026-10-18 - 本站原创示例与指南: MIT 共享角色不构成独占品牌 IP。 品牌标志与字体可能另有权利限制。保留下载文件自带的许可证和署名，不把工具许可当成素材许可。 ## 交付文件 本地双语使用指南和 Agent Skill；素材或商业 SDK 从官方获取。 --- # tldraw Canvas SDK with trial, commercial and hobby licensing. ## Delivery scope Official-service integration: the gallery embeds 212 examples hosted by tldraw (examples.tldraw.com), with bilingual notes and links to their source. JGuang bundles no tldraw code; production use of the SDK needs a license key. ## Interactive previews 212 official examples, each with bilingual notes and license details: /resources/tldraw/components ## Get started Read the production licensing guide and obtain the appropriate key before deploying. Treat SDK source availability separately from example licenses. ## Validation Run the target project build and check the selected behavior, keyboard focus, narrow screens, themes and reduced motion where applicable. Examples demonstrate native APIs; they are not a verified integration into your host. Native apps and Mini Programs require their own toolchains. ## Source and license - Official source: https://tldraw.dev/ - Upstream license: tldraw License - License reference: https://tldraw.dev/community/license - Checked: 2026-10-18 - Original JGuang examples and guides: MIT SDK production use requires a valid applicable license. Marks and fonts may have separate rights. Preserve licenses and attribution included with downloaded files; tool licenses do not automatically cover assets. ## Files Local bilingual guidance and Agent Skill; obtain assets or commercial SDKs from the official source. --- # tldraw 提供试用、商业和爱好者许可的画布 SDK。 ## 交付范围 官方服务接入：图库嵌入 tldraw 托管的 212 个官方示例（examples.tldraw.com），附双语说明和源码链接；本站不打包 tldraw 代码，SDK 生产使用需要许可密钥。 ## 交互预览 212 个官方示例，每项附双语说明与许可信息: /resources/tldraw/components ## 开始使用 部署前阅读生产许可指南并获取相应密钥；SDK 源码可见与示例许可分别判断。 ## 验证 运行目标项目构建，按适用范围检查交互、键盘焦点、窄屏、主题与减少动态效果。 示例文件展示原生 API 用法，不代表已完成你的宿主集成；原生 App 和小程序需要对应工具链。 ## 来源与许可 - 官方入口: https://tldraw.dev/ - 上游许可: tldraw License - 许可依据: https://tldraw.dev/community/license - 核验日期: 2026-10-18 - 本站原创示例与指南: MIT SDK 生产使用需要有效且适用的许可证。 品牌标志与字体可能另有权利限制。保留下载文件自带的许可证和署名，不把工具许可当成素材许可。 ## 交付文件 本地双语使用指南和 Agent Skill；素材或商业 SDK 从官方获取。