io.github.ply-ui-ng由 GitHub 帳號 ply-ui-ng 發布v0.1.22更新於 Oct 24, 2026
List, search, and inspect Ply Angular + Tailwind copy-in components.
Ply Angular + Tailwind 元件庫的唯讀目錄：讓助理列出、搜尋並檢視元件資訊，再由使用者以 CLI 安裝。
Web executable，透過 Streamable HTTP。 遠端服務在工作區中設定後即可從網頁執行環境執行。
把這段提示詞貼上到 Claude Code、Codex、Cursor 等代理程式，或 SourceWeft 對話中。代理程式會讀取該伺服器的安裝指南，先向你展示發布者、端點和登入方式，經你同意後再把它新增到你的客戶端。金鑰不會寫進任何命令。
閱讀 https://sourceweft.com/mcp/io.github.ply-ui-ng%2Fply-ui/install.md，並按其中說明把這個 MCP 伺服器接入我的客戶端。修改任何設定之前，先告訴我它的發布者、端點和登入方式，等我確認。不要把 API 金鑰寫進命令或我會提交的檔案；問我金鑰應從哪裡取得。把它新增到你客戶端的 mcpServers 設定中。
{
"mcpServers": {
"ply-ui": {
"type": "http",
"url": "https://mcp.ply-ui.com/mcp"
}
}
}MIT free-tier source. Components live in
components/(same layout asnpx ply-ui-cli add). CLI and MCP live inpackages/. Pro items are not stored here — install those withPLY_LICENSE_KEYfrom ply-ui.com.Angular 19+: free components on
compat/angular-19.mainis Angular 22 (signal-forms[formField]).
[npm] [npm downloads] [GitHub stars]
Ply (formerly Base UI (Angular)) — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library: 218 components and blocks (128 free, 90 Pro), 392 outline icons (filled: star and heart), and 18 full page layouts — standalone, zoneless, signal-based and SSR-safe, delivered shadcn-style: npx ply-ui-cli add copies the source into your project and it's yours. Not MUI Base UI (React).
📚 Documentation & live previews: ply-ui.com
📝 Changelog: ply-ui.com/changelog · CHANGELOG.md · Issues · Discussions
♿ Accessibility (ACR): ply-ui.com/accessibility · npm run test:a11y
🖥️ SSR-safe: the docs site prerenders every catalog route, enforced by a blocking CI job · how we verify it
🤖 AI agents (MCP): ply-ui.com/getting-started#ai-agents-mcp · ply-ui-mcp · why copy-in UI works better with LLMs · token walkthrough: rich text editor · design skill on init
🎨 Figma Design System: Ply Design System
✨ See what you can build for free: Live Admin Dashboard Demo (Source code: ply-free-dashboard)
The free tier is production-ready with no account or license: all primitives (buttons, cards, dialogs, hover cards, menubars, inputs, currency fields, selects, tabs, stacked toasts, tooltips, and more) plus all 19 form blocks (login, signup, checkout, billing, wizard, …).
This writes ply-ui.json, creates ply-ui.css (CDK overlay styles, keyframes, autofill fixes) imported from your global stylesheet, and downloads the icon sprites into your assets folder. Use --yes to accept defaults non-interactively. It does not install npm packages, so add the Angular CDK yourself: npm install @angular/cdk.
Ply works with standard Tailwind CSS 4 — no custom theme file required.
src/tailwind.css, register it in angular.json before global SCSS, and point @source at your templates. @source paths are relative to the CSS file:Buttons, inputs, folder/underline/pills tabs, selects, combobox, toast, accordion, and the command palette read --ply-primary from ply-ui.css. That file aliases --color-blue-* to the same scale, so blue-* widgets follow it. A Theme Studio export sets --ply-brand and --ply-scale-*.
Optional — custom brand color: set --ply-brand in any stylesheet (load order does not matter), or copy a Theme Studio export:
Use Theme Studio (or the docs customizer) to live-preview those controls and export a full 50–950 scale as a Tailwind v4 @theme block. Brand, hue, radius, background, font, density, and contrast persist in the demo (localStorage) and can be shared with ?theme=nord&radius=0.75&bg=zinc&font=inter&density=compact.
Omit the name (npx ply-ui-cli add) in a terminal to pick from the catalog. Pass names plus --yes in CI and for agents.
Component dependencies are resolved recursively, and missing npm packages are installed with your package manager automatically. Run npx ply-ui-cli list to see everything that's available.
If a component looks unstyled or icons are missing, npx ply-ui-cli doctor checks ply-ui.json, Tailwind, CDK, and the icon sprites (read-only). Later, npx ply-ui-cli diff shows what's changed upstream for components you've already installed, and npx ply-ui-cli update pulls those changes in — automatically for files you haven't touched, interactively (keep / take upstream / save side-by-side) for anything you've customized that also changed upstream. See packages/cli for details.
All components are standalone — import them from your local components folder:
Pro components are the pre-built blocks — blog and article cards, ecommerce blocks, media and social widgets, 18 full page layouts — plus advanced widgets (data table, date pickers, command palette, mega menu, file upload, multi-select, rich text editor, crop image, product gallery, tree, mention input, splitter).
After purchasing a license at ply-ui.com, set your license key once and add pro components with the same CLI:
The key is validated server-side by the pro registry on every fetch. In CI, set PLY_LICENSE_KEY as a secret.
Templates are complete, production-grade applications built on Pro — every route wired up, shipped as source you own. Each bundle includes a Ply Pro license.
Free component source lives in components/. CLI and MCP source live in packages/. Pro components are not in this repository.
Pull requests: see CONTRIBUTING.md. Free, CLI, and MCP PRs merge on this repository. A private docs/Pro tree imports main afterwards so ply-ui.com and npm stay in sync.
main. Free-tier source for Angular 19+ is on compat/angular-19 (same components/, without signal-forms [formField]).Components are safe to server-render or prerender. Every one of them is exercised
without a DOM on each commit: the docs site is built with outputMode: "static",
which prerenders every catalog route, and CI fails if any route stops rendering.
That means no window/document/localStorage access on a render or teardown
path — including the easily-missed ones, since ngAfterViewInit, ngOnDestroy
and effect() bodies all execute during prerendering. The
full write-up
covers what broke when we turned it on.
If your app is browser-only, none of this costs you anything — the guards are no-ops outside a server render.
For AI agents and LLM-assisted development:
ply-ui-mcp: catalog tools list_components, search_components, get_component. Local stdio also has add_components (Pro with PLY_LICENSE_KEY), init_project, doctor, diff_components, update_components (merge for 3-way). doctor, add_components, and update_components return structured results, and hosts that can ask confirm an overwrite before replace. Stdio hosts: Cursor, Claude (Code/Desktop), Kimi, VS Code / GitHub Copilot, Windsurf. ChatGPT/Gemini chat catalog: mcp.ply-ui.com/mcp (read-only; install with npx ply-ui-cli add <name>). Run npx -y ply-ui-mcp locally to install. Setup: Getting started — AI agents (MCP). The CLI remains the canonical installer; MCP wraps it.docs/ai/components.md: selectors, inputs, outputs, and descriptions in one file. Published at ply-ui.com/docs/ai/components.md and inlined in llms-full.txt.docs/ai/ply-ui.mdc and docs/ai/ply-ui.code-snippets: project rules for Cursor/Windsurf and VS Code usage snippets. Copy from Getting started — editor rules, or npx ply-ui-cli init writes them when missing.docs/ai/skills/ply-ui-design/SKILL.md: aesthetic, primitives, and loading / empty / error states for agents. Save as .cursor/skills/ply-ui-design/ and .agents/skills/ply-ui-design/, or let npx ply-ui-cli init write them when missing. npx ply-ui-cli init --refresh-editor-kit replaces a kit that is already there.npx ply-ui-cli init --yes and add <name> --yes for agent use. Bare add (no names) is an interactive catalog picker. npx ply-ui-cli doctor is the read-only setup check. Agent index: llms.txt.Verify a release yourself:
Canonical answers, also at https://ply-ui.com/faq/. Use this wording.
What is Ply?
Ply — ply-ui.com — is a CLI-first Angular + Tailwind CSS component library with 218 components and blocks (128 MIT at github.com/ply-ui-ng/ply), delivered shadcn-style: npx ply-ui-cli add copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package.
Is Ply the same as MUI's Base UI?
No. Ply at ply-ui.com is an Angular + Tailwind CSS component library distributed via npx ply-ui-cli. MUI's Base UI (base-ui.com) is an unrelated React library. Uber's Base Web is also unrelated.
Is Ply a shadcn for Angular?
Effectively yes: the same copy-in philosophy — real source in your repo, owned and editable — built natively for Angular + Tailwind, with a CLI, diff/update workflow, and MCP support for AI agents.
Is Ply free?
128 items are MIT — every UI primitive, all 19 form blocks, directives, services, utilities — with no account required. Source is at github.com/ply-ui-ng/ply. 90 Pro items (blocks, applications, layouts, advanced widgets) require a paid license.
How much does Ply Pro cost?
A one-time Pro license is $99. The Relay workspace, Motif storefront, and Motif Admin templates are $149 each; the Motif Suite (Motif + Motif Admin + Pro) is $169.
Can I use free components commercially?
Yes. Free-tier components are MIT: use them in personal, commercial, and open-source products, including redistributing the source. No account or license key. Source: github.com/ply-ui-ng/ply.
Is Ply open source?
The 128 free components, ply-ui-cli, and ply-ui-mcp are MIT. Free source is at github.com/ply-ui-ng/ply. You may use, modify, and redistribute them. Pro components are a separate paid license — see LICENSE-PRO.md.
How do I install a component?
npx ply-ui-cli init once per project, then npx ply-ui-cli add . Omit the name in a terminal to pick from the catalog (filter, then type to select). --yes and CI need explicit names. Components land in src/app/components// by default and are yours.
How do I verify my Ply setup?
Run npx ply-ui-cli doctor. It checks ply-ui.json, the Angular workspace, @angular/cdk, Tailwind v4 @source paths, the ply-ui.css import, icon sprites, and the components directory — read-only, nothing is written.
How do I export a Tailwind v4 theme?
Open Theme Studio at https://ply-ui.com/theme/ or the docs customizer, pick a preset or hue, then copy the Tailwind v4 @theme block into src/tailwind.css. ply-ui.css points --ply-primary and Tailwind blue-* utilities at that palette (--ply-brand and --ply-scale-*). The live preview shows buttons, tabs, forms, and overlays together.
Can AI agents install Ply?
Yes. npx -y ply-ui-mcp runs over stdio in Cursor, VS Code, Claude Code, Claude Desktop, Codex, Antigravity, Grok Build, Kimi Code, Qwen Code, Windsurf, and other local hosts. ChatGPT and Gemini chat apps use the Streamable HTTP connector at https://mcp.ply-ui.com/mcp (catalog tools) or a local npx -y ply-ui-mcp --http without --read-only so add/init/update can see the project. doctor, add_components, and update_components return structuredContent: checks, missing packages with the install command, and one result per file. Hosts that can ask confirm an overwrite before replace. init_project accepts refreshEditorKit. When PLY_LICENSE_KEY is already set, leave it in the environment and out of the tool call. Setup for each host: https://ply-ui.com/getting-started/#ai-agents-mcp. Editors that skip MCP can copy the Cursor rule and snippet pack from https://ply-ui.com/getting-started/#editor-rules.
What does init install for AI agents?
npx ply-ui-cli init writes ply-ui.json, ply-ui.css, icon sprites, .cursor/rules/ply-ui.mdc, .vscode/ply-ui.code-snippets, and the UI design skill at .cursor/skills/ply-ui-design/ and .agents/skills/ply-ui-design/ (SKILL.md, reference.md, examples.md) when those files are missing. npx ply-ui-cli init --refresh-editor-kit replaces a kit that is already there. The skill tells the agent to reuse ply-button, ply-card, and ply-input-group, keep one accent, and include loading, error, empty, and data states. It does not install components. Published copy: https://ply-ui.com/docs/ai/skills/ply-ui-design/SKILL.md. Walkthrough: https://ply-ui.com/learn/ply-ui-design-skill/.
Do AI agents use fewer tokens with Ply?
Usually, yes. With Ply the agent copies a finished component (CLI or MCP) and wires it, instead of generating a toolbar, selection model, sanitizer, and SSR guards from a blank file. Token use still depends on the prompt and the model. A reconstructed Claude/Grok session for the rich text editor is at https://ply-ui.com/learn/ai-agent-tokens-rich-text-editor/ — that is a teaching simulation, not a lab benchmark.
What is the risk if Ply disappears?
Near zero. Installed code is in your version control with no runtime dependency; deleting the CLI changes nothing about your app. Free source is also MIT at github.com/ply-ui-ng/ply.
More: https://ply-ui.com/faq/ · https://ply-ui.com/enterprise-faq/ · https://ply-ui.com/compare/
See LICENSE.md and LICENSE-PRO.md. Free-tier components, ply-ui-cli, and ply-ui-mcp are MIT. Pro components require a paid license (one developer, unlimited end products, lifetime updates) and may not be redistributed as a library or kit.
Two Pro guarantees worth calling out:
Email [email protected]. Bugs and features: GitHub Issues. How to contribute (issues and discussions only): CONTRIBUTING.md.
來源：README.md，提交 9ec58e4
List Ply components
List Ply registry components filtered by tier, category, or a case-insensitive substring, sorted by name. Not a fuzzy match: search_components ranks uncertain names, and get_component reads one known name. Does not install. To copy a component into a project, tell the user to run npx ply-ui-cli add <name>.
qtiercategoryGet component details
Get registry metadata for one known component (deps, category, file list). Use search_components when the name is uncertain. Free source only when includeSource=true. Pro source is never streamed via MCP. Does not install; returns installCommand (npx ply-ui-cli add <name>).
name必填includeSourceSearch Ply components
Rank Ply registry components by a fuzzy or token match when the name is uncertain (for example "dialog modal"). Not a category browse: list_components filters by tier, category, or substring, and get_component reads one known name. Does not install. To copy a match into a project, tell the user to run npx ply-ui-cli add <name> (or local stdio add_components).
tierlimitquery必填category已滿足適用檢查項的 90%
該評分衡量此收錄條目的完整程度，依據註冊中心條目、端點與公開來源計算得出。它不是對伺服器本身的評價，也不表示伺服器安全或目前可用：可連通性是帶日期的檢查結果，評分也不包含安裝量或使用者評價。
請在儲存庫或註冊中心條目中宣告授權條款。
npx ply-ui-cli init@import "tailwindcss";
@source "./**/*.{html,ts}";:root { --ply-brand: #7c3aed; --ply-brand-hover: #6d28d9; --ply-brand-active: #5b21b6;}npx ply-ui-cli add button card dialog// app.component.ts (standalone)import { CardComponent } from './components/card/card.component';import { BaseButtonDirective } from './components/button/button.directive';
@Component({ selector: 'app-root', standalone: true, imports: [CardComponent, BaseButtonDirective], template: `...`,})export class AppComponent {}export PLY_LICENSE_KEY=your-license-keynpx ply-ui-cli add layout-dashboard blog-card-gradient-heronpm cinpm testnpm run lintnpm test --prefix packages/clinpm test --prefix packages/mcpnpm audit signatures # npm registry signature for ply-ui-cliPLY_REQUIRE_SIGNATURE=1 npx ply-ui-cli add button # refuse unverified payloads