Frequently asked questions

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 <name> copies the TypeScript/HTML source into your project, where you own and edit it. There is no npm library package.

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.

Angular teams that want Tailwind-native, signal-first, zoneless-ready components they can modify, without a runtime dependency on a vendor package.

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.

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.

No. Pro is a one-time license per developer; no recurring fees. Lifetime updates are included — re-run npx ply-ui-cli update to pull newer versions.

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.

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.

Server-side at download time only. Copied component source contains no license checks, telemetry, or phone-home code.

Node.js 22.22+ or 24.15+, a standalone Angular 22 app (Angular 19 is on the compat/angular-19 branch), Tailwind CSS 4, and the Angular CDK. No custom theme is required.

npx ply-ui-cli init once per project, then npx ply-ui-cli add <name>. 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/<name>/ by default and are yours.

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.

npx ply-ui-cli diff shows upstream changes per file. update applies them: untouched files always take upstream; files you edited while upstream stayed the same are skipped unless you pass --overwrite-local; files both sides changed are conflicts — prompt (Merge first), --yes to skip, --force to take upstream, or --merge for a 3-way merge using .ply-ui/snapshots. Tracked via ply-ui-lock.json.

Yes. The docs site prerenders every catalog route to static HTML, and a blocking CI job fails the build if any route stops rendering.

Yes — class-based dark mode on <html>, components pair light/dark classes (bg-white dark:bg-slate-800).

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.

Components ship with ARIA and focus states. Axe-core in CI opens combobox, dropdown menu, menubar, and dialog. Data-table key specs are Enter and Space. An Accessibility Conformance Report is at /accessibility/.

27 controls implement ControlValueAccessor, including mention-input, file-upload, and password-input. color-picker provides NG_VALUE_ACCESSOR and the four methods without an implements clause. The same hosts bind Angular 22 [formField]. See /cookbooks/signal-forms/.

Yes. Free table (npx ply-ui-cli add table) styles native thead, tbody, tfoot, and caption. Pro data-table adds server paging, sorting, selection, resize, and cell templates via ng-template plyTableCell. See /base-elements/table/ and /base-elements/data-table/.

Yes. Pro date-range-picker binds a start and end date. Set showTime to choose a time for each day in the same popup; hourCycle is 12 or 24. datepicker showTime does the same for one datetime. Time of day only is the free time-picker. Install with npx ply-ui-cli add date-range-picker. Walkthrough: /learn/angular-date-range-with-time/. Live demo: /base-elements/datepicker/.

Yes. Free lightbox opens images, video, and PDF, and one gallery can mix those thumbs. Set mediaType, or leave it empty so a viewer URL ending in .mp4, .webm, or .pdf picks the preview. A poster image can open a clip. Images get flip, rotate, and zoom. Video uses native controls. PDF opens in a viewer. Install with npx ply-ui-cli add lightbox. Live demo: /base-elements/lightbox/.

Yes. Project ng-template plyTableCell="columnKey" into ply-data-table for badges or row actions. Combobox and custom-select take ng-template plyComboboxOption and plySelectOption. Default cells still interpolate row[column.key]. See /base-elements/data-table/ and /cookbooks/invoice-table/.

Yes. Call provideBaseUiI18n() in app.config.ts to override chrome strings (empty states, paginator, dialog close, previous, next, toolbar labels, and the command palette). Per-instance inputs like emptyMessage still win. Layout and form-block marketing copy stays out of this dictionary. See /configuration/#i18n.

Yes. Set dir="rtl" on <html>, or plyDir="rtl" (or plyDir="auto") on a section. Components follow that direction: logical spacing, mirrored left/right icons, start/end overlays, and horizontal keyboard, scroll, drawer, and shell behavior. left and right placements stay on those physical edges. Install: npx ply-ui-cli add direction (also pulled in by tabs, drawer, icon, and shell). See /configuration/#rtl.

Call provideBaseUI({ iconPath: 'assets/icons.svg', filledIconPath: 'assets/icons-filled.svg' }) in app.config.ts. Per-instance [path] and [filledPath] on ply-icon still win. defaultSize applies only when [size] and w-*/h-* classes are omitted. Install: npx ply-ui-cli add config (also pulled in by icon).

Yes. data-table, custom-select, and dialog ship ComponentHarness classes copied with the component. Load with TestbedHarnessEnvironment.loader(fixture). Dialogs need documentRootLoader because the overlay is appended to body. See /configuration/#testing.

Yes. Toast is free: inject ToastService and call success, error, or show. Multiple toasts stack like a deck; hover or focus expands the stack; swipe dismisses; hover pauses auto-dismiss. prefers-reduced-motion falls back to a static list. Install with npx ply-ui-cli add toast. Do not place ply-toast-container in templates.

392 outline symbols in icons.svg (389 unique names). The filled sprite has star and heart only.

Standalone components, signals, new control flow, zoneless-ready; no zone.js dependency. Native inputs and CVA controls bind Angular 22 signal forms via [formField].

Yes. Bind httpResource.value() to ply-data-table (serverSide), combobox (filterMode none), or virtual-scroll. Cookbook: /cookbooks/http-resource/.

Yes. Copy-in components have no vendor UI runtime package, so @defer splits only the widget you wrap. Use ply-skeleton as the placeholder. Cookbook: /cookbooks/defer/.

Yes. Dialog boxes set view-transition-name: ply-dialog. Wrap DialogService.open() in document.startViewTransition(), or add withViewTransitions() to the router. Cookbook: /cookbooks/view-transitions/.

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.

Material is an npm component library with Google's Material Design look. Ply copies Tailwind-styled source into your repo — edit the markup directly, no ::ng-deep overrides, no theme API to fight.

PrimeNG 21 and earlier stay MIT. PrimeNG 22 and later ship as compiled npm packages under the PrimeUI license. Ply is copy-in: you own every file, and the CLI tracks upstream updates. Choose Ply when design control, Tailwind, and auditable source matter. Write-up: /learn/component-lives-in-your-repo/.

NG-ZORRO is Ant Design as an npm library. Ply copies Tailwind-styled source into your repo. Pick NG-ZORRO for the Ant Design language at enterprise scale; pick Ply when you want to edit Tailwind markup and own every file.

Taiga UI is a modern Apache-2 npm kit with strong accessibility and CSS-variable theming. Ply is copy-in Tailwind. Pick Taiga for a full OSS npm library; pick Ply when Tailwind-native ownership, CLI diff/update, and MCP installs matter.

Spartan is a shadcn port: Helm styles are copied in; Brain primitives stay on npm as @spartan-ng/brain. Ply copies behavior and Tailwind markup into your repo — there is no runtime UI package. Choose Spartan for headless Brain + shadcn visuals; choose Ply for full copy-in source, CLI updates, and Pro blocks.

Tailwind UI is a React/Vue/HTML markup kit; Flowbite ships HTML plus community ports. Ply components are native Angular — signals, form integration, SSR, real TypeScript behavior — installed as source you own, not markup snippets to paste.

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.

Install Tailwind CSS 4 and @angular/cdk, run npx ply-ui-cli init, then npx ply-ui-cli add card (or add with no name to pick from the catalog). The steps, MCP setup for AI tools, and a StackBlitz starter are at /getting-started/. Brand color, translated strings, and right-to-left layouts are at /configuration/.

The docs site is the live catalog: each component page shows a rendered preview, Preview/Code examples, and often a knob playground with Open in StackBlitz. Free pages have a View source link to github.com/ply-ui-ng/ply. The free dashboard starter is at github.com/ply-ui-ng/ply-free-dashboard; Motif demos run at commerce-template.ply-ui.com and dashboard-template.ply-ui.com.

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.

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/.

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.

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.

Yes — the free Ply Design System Figma file with primitives, typography, and the component kit at https://www.figma.com/design/hsUvEI3YXLCqrlwo6ENY4f/Ply-Design-System.

Yes — Relay (team workspace), Motif (storefront), Motif Admin (operations dashboard), and the free open-source dashboard starter (ply-free-dashboard). Each paid template includes a Ply Pro license.

GitHub issues at https://github.com/ply-ui-ng/ply.