@primereact/mcp 11.0.0-rc.2 → 11.0.0-rc.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (61) hide show
  1. package/README.md +10 -9
  2. package/data/llms/headless/components/carousel/api.json +1 -1
  3. package/data/llms/headless/components/contextmenu/api.json +2 -2
  4. package/data/llms/headless/components/inputcolor/api.json +1 -1
  5. package/data/llms/headless/components/menu/api.json +2 -2
  6. package/data/llms/headless/components/textarea/api.json +6 -0
  7. package/data/llms/headless/guides/ai/mcp.md +113 -0
  8. package/data/llms/headless/guides/ai/plugin.md +139 -0
  9. package/data/llms/headless/guides/installation.md +1 -1
  10. package/data/llms/hooks/use-filter.md +2 -5
  11. package/data/llms/llms-full.txt +1199 -266
  12. package/data/llms/llms.txt +8 -0
  13. package/data/llms/primitive/components/carousel/api.json +1 -1
  14. package/data/llms/primitive/components/contextmenu/api.json +2 -2
  15. package/data/llms/primitive/components/inputcolor/api.json +1 -1
  16. package/data/llms/primitive/components/menu/api.json +8 -8
  17. package/data/llms/primitive/components/textarea/api.json +6 -6
  18. package/data/llms/primitive/guides/ai/mcp.md +113 -0
  19. package/data/llms/primitive/guides/ai/plugin.md +139 -0
  20. package/data/llms/primitive/guides/icons/primeicons.md +3 -3
  21. package/data/llms/primitive/guides/installation.md +1 -1
  22. package/data/llms/styled/components/datatable.md +20 -40
  23. package/data/llms/styled/components/dataview.md +12 -17
  24. package/data/llms/styled/components/dialog.md +11 -17
  25. package/data/llms/styled/components/fileupload.md +3 -3
  26. package/data/llms/styled/components/inputgroup.md +0 -65
  27. package/data/llms/styled/components/select.md +3 -5
  28. package/data/llms/styled/components/slider.md +1 -2
  29. package/data/llms/styled/components/stepper.md +1 -2
  30. package/data/llms/styled/components/toolbar.md +10 -10
  31. package/data/llms/styled/components/tooltip.md +46 -0
  32. package/data/llms/styled/guides/ai/mcp.md +113 -0
  33. package/data/llms/styled/guides/ai/plugin.md +139 -0
  34. package/data/llms/styled/guides/icons/primeicons.md +3 -3
  35. package/data/llms/styled/guides/installation/astro.md +1 -1
  36. package/data/llms/styled/guides/installation/configuration.md +135 -0
  37. package/data/llms/styled/guides/installation/nextjs.md +1 -1
  38. package/data/llms/styled/guides/installation/react-router.md +1 -1
  39. package/data/llms/styled/guides/installation/tanstack.md +1 -1
  40. package/data/llms/styled/guides/installation/vite.md +1 -1
  41. package/data/llms/tailwind/components/datatable.md +17 -34
  42. package/data/llms/tailwind/components/dataview.md +12 -17
  43. package/data/llms/tailwind/components/dialog.md +12 -17
  44. package/data/llms/tailwind/components/select.md +1 -2
  45. package/data/llms/tailwind/components/slider.md +1 -2
  46. package/data/llms/tailwind/components/toolbar.md +10 -7
  47. package/data/llms/tailwind/guides/ai/mcp.md +113 -0
  48. package/data/llms/tailwind/guides/ai/plugin.md +139 -0
  49. package/data/llms/tailwind/guides/icons/primeicons.md +3 -3
  50. package/data/llms/tailwind/guides/installation/astro.md +1 -1
  51. package/data/llms/tailwind/guides/installation/nextjs.md +1 -1
  52. package/data/llms/tailwind/guides/installation/react-router.md +1 -1
  53. package/data/llms/tailwind/guides/installation/tanstack.md +1 -1
  54. package/data/llms/tailwind/guides/installation/vite.md +1 -1
  55. package/data/manifest.json +2400 -1694
  56. package/data/mcp-data.json +1375 -542
  57. package/dist/index.d.ts +2 -3
  58. package/dist/index.js +1 -1
  59. package/package.json +9 -4
  60. package/data/llms/manifest.json +0 -12409
  61. package/data/llms/mcp-data.json +0 -14481
@@ -319,6 +319,8 @@
319
319
  - [useVisibilityChange](primeui://primereact/hooks/use-visibility-change.md): Reactive boolean that reflects the document's Page Visibility state.
320
320
  - [Add-Ons](primeui://primereact/headless/add-ons/introduction.md): Premium templates, UI blocks and design tooling that build on top of PrimeReact.
321
321
  - [LLMs.txt](primeui://primereact/headless/guides/ai/llms.md): LLMs.txt is a file that contains the LLMs for the PrimeReact documentation.
322
+ - [MCP Server](primeui://primereact/headless/guides/ai/mcp.md): Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
323
+ - [Plugin](primeui://primereact/headless/guides/ai/plugin.md): Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
322
324
  - [Installation](primeui://primereact/headless/guides/installation.md): Install PrimeReact's headless hooks and build fully custom components in your React project.
323
325
  - [Headless](primeui://primereact/headless/guides/introduction.md): React hooks that handle logic and accessibility. You bring your own markup and styles.
324
326
  - [Accessibility](primeui://primereact/headless/guides/misc/accessibility.md): PrimeReact has WCAG level compliance, refer to the accessibility documentation of each component for detailed information.
@@ -328,6 +330,8 @@
328
330
  - [Setup](primeui://primereact/hooks/gettingstarted/setup.md): Install @primereact/hooks and start using it in any React project.
329
331
  - [Add-Ons](primeui://primereact/primitive/add-ons/introduction.md): Premium templates, UI blocks and design tooling that build on top of PrimeReact.
330
332
  - [LLMs.txt](primeui://primereact/primitive/guides/ai/llms.md): LLMs.txt is a file that contains the LLMs for the PrimeReact documentation.
333
+ - [MCP Server](primeui://primereact/primitive/guides/ai/mcp.md): Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
334
+ - [Plugin](primeui://primereact/primitive/guides/ai/plugin.md): Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
331
335
  - [Custom Icons](primeui://primereact/primitive/guides/icons/customicons.md): PrimeReact components can be used with any icon library using the templating features.
332
336
  - [Prime Icons](primeui://primereact/primitive/guides/icons/primeicons.md): PrimeIcons is the default icon library of PrimeReact with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeReact components can use any icon with templating.
333
337
  - [Installation](primeui://primereact/primitive/guides/installation.md): Install PrimeReact and compose unstyled primitive components in your React project.
@@ -340,6 +344,8 @@
340
344
  - [Add-Ons](primeui://primereact/styled/add-ons/introduction.md): Premium templates, UI blocks and design tooling that build on top of PrimeReact.
341
345
  - [Compare](primeui://primereact/styled/components/compare.md): Compare two items side by side with a slider.
342
346
  - [LLMs.txt](primeui://primereact/styled/guides/ai/llms.md): LLMs.txt is a file that contains the LLMs for the PrimeReact documentation.
347
+ - [MCP Server](primeui://primereact/styled/guides/ai/mcp.md): Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
348
+ - [Plugin](primeui://primereact/styled/guides/ai/plugin.md): Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
343
349
  - [Configuration](primeui://primereact/styled/guides/configuration.md): Application wide configuration for PrimeReact.
344
350
  - [Custom Icons](primeui://primereact/styled/guides/icons/customicons.md): PrimeReact components can be used with any icon library using the templating features.
345
351
  - [Prime Icons](primeui://primereact/styled/guides/icons/primeicons.md): PrimeIcons is the default icon library of PrimeReact with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeReact components can use any icon with templating.
@@ -361,6 +367,8 @@
361
367
  - [Resources](primeui://primereact/styled/resources/introduction.md): Support channels, legacy versions and places to discover more about PrimeReact.
362
368
  - [Add-Ons](primeui://primereact/tailwind/add-ons/introduction.md): Premium templates, UI blocks and design tooling that build on top of PrimeReact.
363
369
  - [LLMs.txt](primeui://primereact/tailwind/guides/ai/llms.md): LLMs.txt is a file that contains the LLMs for the PrimeReact documentation.
370
+ - [MCP Server](primeui://primereact/tailwind/guides/ai/mcp.md): Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
371
+ - [Plugin](primeui://primereact/tailwind/guides/ai/plugin.md): Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
364
372
  - [Custom Icons](primeui://primereact/tailwind/guides/icons/customicons.md): PrimeReact components can be used with any icon library using the templating features.
365
373
  - [Prime Icons](primeui://primereact/tailwind/guides/icons/primeicons.md): PrimeIcons is the default icon library of PrimeReact with over 250 open source icons developed by PrimeTek. PrimeIcons library is optional as PrimeReact components can use any icon with templating.
366
374
  - [Installation](primeui://primereact/tailwind/guides/installation.md): How to set up PrimeReact in your project. Select your framework to get started.
@@ -1312,7 +1312,7 @@
1312
1312
  },
1313
1313
  {
1314
1314
  "name": "getItemProps",
1315
- "type": "(value: unknown, index?: number, total?: number) => UseCarouselItemProps",
1315
+ "type": "(value: unknown) => UseCarouselItemProps",
1316
1316
  "default": "",
1317
1317
  "description": "Returns props for an individual carousel item."
1318
1318
  },
@@ -1781,7 +1781,7 @@
1781
1781
  "description": "The original browser event that triggered the change."
1782
1782
  },
1783
1783
  {
1784
- "name": "open",
1784
+ "name": "value",
1785
1785
  "type": "boolean",
1786
1786
  "default": "",
1787
1787
  "description": "The open state of the menu."
@@ -2298,7 +2298,7 @@
2298
2298
  "description": "The original browser event that triggered the change."
2299
2299
  },
2300
2300
  {
2301
- "name": "open",
2301
+ "name": "value",
2302
2302
  "type": "boolean",
2303
2303
  "default": "",
2304
2304
  "description": "The open state of the submenu."
@@ -1176,7 +1176,7 @@
1176
1176
  },
1177
1177
  {
1178
1178
  "name": "getInputProps",
1179
- "type": "(options?: { channel?: ColorInputChannel; disabled?: boolean }) => { data-scope: \"inputcolor\"; data-part: \"input\"; type: \"number\" | \"text\"; spellCheck: boolean; autoComplete: \"off\"; disabled: boolean; data-channel: ColorInputChannel; aria-label: ColorInputChannel; min: number; max: number; step: number; channelValue: string | number; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onBlur: (event: FocusEvent<HTMLInputElement>) => void; onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void }",
1179
+ "type": "(options?: { channel?: ColorInputChannel; disabled?: boolean }) => { data-scope: \"inputcolor\"; data-part: \"input\"; type: \"number\" | \"text\"; spellCheck: boolean; autoComplete: \"off\"; disabled: boolean; data-channel: ColorInputChannel; aria-label: ColorInputChannel; min: number; max: number; step: number; value: string | number; onChange: (event: ChangeEvent<HTMLInputElement>) => void; onBlur: (event: FocusEvent<HTMLInputElement>) => void; onKeyDown: (event: KeyboardEvent<HTMLInputElement>) => void }",
1180
1180
  "default": "",
1181
1181
  "description": "Provides input props for a color channel."
1182
1182
  },
@@ -2582,7 +2582,7 @@
2582
2582
  "description": "The original browser event that triggered the change."
2583
2583
  },
2584
2584
  {
2585
- "name": "open",
2585
+ "name": "value",
2586
2586
  "type": "boolean",
2587
2587
  "default": "",
2588
2588
  "description": "The open state of the menu."
@@ -3217,7 +3217,7 @@
3217
3217
  "description": "The original browser event that triggered the change."
3218
3218
  },
3219
3219
  {
3220
- "name": "open",
3220
+ "name": "value",
3221
3221
  "type": "boolean",
3222
3222
  "default": "",
3223
3223
  "description": "The open state of the submenu."
@@ -3326,6 +3326,12 @@
3326
3326
  "default": "false",
3327
3327
  "description": "Default open state for uncontrolled mode."
3328
3328
  },
3329
+ {
3330
+ "name": "disabled",
3331
+ "type": "boolean",
3332
+ "default": "false",
3333
+ "description": "Whether the submenu is disabled."
3334
+ },
3329
3335
  {
3330
3336
  "name": "openDelay",
3331
3337
  "type": "number",
@@ -3344,12 +3350,6 @@
3344
3350
  "default": "true",
3345
3351
  "description": "When true, the submenu opens on pointer hover over the subtrigger."
3346
3352
  },
3347
- {
3348
- "name": "disabled",
3349
- "type": "boolean",
3350
- "default": "false",
3351
- "description": "Whether the submenu is disabled."
3352
- },
3353
3353
  {
3354
3354
  "name": "onOpenChange",
3355
3355
  "type": "(event: MenuSubmenuOpenChangeEvent) => void",
@@ -113,6 +113,12 @@
113
113
  "default": "false",
114
114
  "description": "When present, height of textarea changes as being typed."
115
115
  },
116
+ {
117
+ "name": "invalid",
118
+ "type": "boolean",
119
+ "default": "false",
120
+ "description": "When present, it marks the textarea as invalid."
121
+ },
116
122
  {
117
123
  "name": "size",
118
124
  "type": "\"small\" | \"large\"",
@@ -131,12 +137,6 @@
131
137
  "default": "",
132
138
  "description": "When enabled, the component will stretch to occupy the full width of its container."
133
139
  },
134
- {
135
- "name": "invalid",
136
- "type": "boolean",
137
- "default": "false",
138
- "description": "When present, it specifies that the component should have invalid state style."
139
- },
140
140
  {
141
141
  "name": "[key: string]",
142
142
  "type": "any",
@@ -0,0 +1,113 @@
1
+ # MCP Server
2
+
3
+ Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
4
+
5
+ ## Introduction
6
+
7
+ [Model Context Protocol (MCP)](https://modelcontextprotocol.io/) lets AI assistants call external tools. The `@primereact/mcp` package uses those tools to search and read the PrimeReact documentation included with the package.
8
+
9
+ - Find components, guides, examples, setup instructions, and hooks.
10
+ - Read mode-scoped component APIs and documentation sections.
11
+ - Check component usage against documented properties and callbacks.
12
+ - Return links to the related PrimeReact documentation when available.
13
+
14
+ The server requires Node.js 22 or newer. It is read-only and does not change your project files or PrimeReact configuration.
15
+
16
+ ## CLI Setup
17
+
18
+ The recommended setup is the [PrimeReact Plugin](./plugin). It installs this MCP server together with the PrimeReact skills for implementation, setup, theming, accessibility, and troubleshooting.
19
+
20
+ ```bash
21
+ pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
22
+ pnpm dlx @primeui/cli doctor --tool copilot --library primereact
23
+ ```
24
+
25
+ Replace `copilot` with `claude`, `codex`, `gemini`, or `cursor` for another supported assistant. Use Manual Setup when you want the MCP server without the plugin skills.
26
+
27
+ ## Manual Setup
28
+
29
+ ### Claude Code
30
+
31
+ Add the server to your user configuration to use it in every project, or omit `-s user` for the current project only.
32
+
33
+ ```bash
34
+ claude mcp add primereact -s user -- npx -y @primereact/mcp
35
+ ```
36
+
37
+ See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for client-specific options.
38
+
39
+ ### VS Code
40
+
41
+ Create `.vscode/mcp.json` for project-level setup. To use the server across projects, add the same `servers` entry to your VS Code user MCP configuration.
42
+
43
+ ```json
44
+ {
45
+ "servers": {
46
+ "primereact": {
47
+ "command": "npx",
48
+ "args": ["-y", "@primereact/mcp"]
49
+ }
50
+ }
51
+ }
52
+ ```
53
+
54
+ See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
55
+
56
+ ### OpenAI Codex
57
+
58
+ Add the server with the Codex CLI, or add the same configuration to `~/.codex/config.toml`.
59
+
60
+ ```bash
61
+ codex mcp add primereact -- npx -y @primereact/mcp
62
+ ```
63
+
64
+ ```toml
65
+ [mcp_servers.primereact]
66
+ command = "npx"
67
+ args = ["-y", "@primereact/mcp"]
68
+ ```
69
+
70
+ See the [OpenAI Codex MCP documentation](https://developers.openai.com/codex/mcp/) for more details.
71
+
72
+ ### Cursor
73
+
74
+ Create `.cursor/mcp.json` in your project or `~/.cursor/mcp.json` for global configuration.
75
+
76
+ ```json
77
+ {
78
+ "mcpServers": {
79
+ "primereact": {
80
+ "command": "npx",
81
+ "args": ["-y", "@primereact/mcp"]
82
+ }
83
+ }
84
+ }
85
+ ```
86
+
87
+ See the [Cursor MCP documentation](https://docs.cursor.com/context/model-context-protocol) for more details.
88
+
89
+ ## Tools
90
+
91
+ The PrimeReact MCP server provides eight tools.
92
+
93
+ | Tool | Purpose |
94
+ | ---------------- | ----------------------------------------------------------------------------------------- |
95
+ | `list` | List available components, guides, examples, resources, or modes. |
96
+ | `search` | Search generated component, guide, section, API, hook, and example text. |
97
+ | `get_component` | Read mode-scoped component or hook documentation, API metadata, and available sections. |
98
+ | `get_guide` | Read a generated PrimeReact guide and its source metadata. |
99
+ | `get_example` | Return an example from a documented component or hook section. |
100
+ | `get_setup` | Return setup guidance for a supported PrimeReact mode and environment. |
101
+ | `validate_usage` | Validate component usage against generated PrimeReact API metadata in one selected mode. |
102
+ | `version` | Report the server version and the status of its documentation data, tools, and resources. |
103
+
104
+ ## Data and Validation
105
+
106
+ The MCP package includes a generated copy of the PrimeReact documentation. This keeps the server usable without a PrimeReact source checkout and makes its answers match the installed package version. Results include a `primeui://primereact` resource URI and, when available, a link to the public documentation.
107
+
108
+ - The tools do not edit files, install dependencies, or update configuration.
109
+ - Component, setup, example, and validation calls stay in one selected mode: `styled`, `tailwind`, `primitive`, `headless`, or `hooks` where supported.
110
+ - `validate_usage` checks documented API metadata. If the required metadata is unavailable or the mode is ambiguous, it reports that limitation instead of guessing.
111
+ - Run your project type checks, tests, and browser checks after making changes. MCP validation does not replace them.
112
+
113
+ If you installed the PrimeReact Plugin, do not register the MCP server again with a manual configuration. Run the CLI `doctor` command if the server is missing or appears more than once.
@@ -0,0 +1,139 @@
1
+ # Plugin
2
+
3
+ Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
4
+
5
+ ## Introduction
6
+
7
+ The PrimeReact Plugin adds PrimeReact skills and the PrimeReact MCP server to Claude Code, Codex, GitHub Copilot, Cursor, or Gemini CLI. Plugins installed through GitHub Copilot CLI are also available in VS Code. Install the plugin when you want the assistant to follow PrimeReact-specific, mode-aware workflows as well as read the current component documentation.
8
+
9
+ The plugin is published from the [primefaces/primeui-plugins](https://github.com/primefaces/primeui-plugins) repository. Use `@primeui/cli` for the same installation flow across supported assistants, or follow the manual setup for your client.
10
+
11
+ ## What It Installs
12
+
13
+ Installing the PrimeReact Plugin adds:
14
+
15
+ - Six focused skills covering routing, implementation, setup, theming, accessibility, and troubleshooting.
16
+ - The PrimeReact MCP server, configured with `@primereact/mcp`.
17
+ - The manifest required by the selected assistant.
18
+
19
+ PrimeVue and PrimeNG are separate plugins. Installing this plugin does not change your application or install PrimeReact dependencies in the project.
20
+
21
+ ## Skills
22
+
23
+ Each skill covers one type of PrimeReact work. The skills use `@primereact/mcp` when they need mode-scoped component APIs, examples, setup guides, hooks, or usage validation.
24
+
25
+ | Skill | Use it for |
26
+ | ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
27
+ | `primereact-router` | Select the PrimeReact mode and choose the skill that matches the task. |
28
+ | `primereact-component-implementation` | Choose and implement components, composition, properties, callbacks, and documented hooks. |
29
+ | `primereact-setup-installation` | Configure a supported React environment in `styled`, `tailwind`, `primitive`, or `headless` mode. |
30
+ | `primereact-theming-customization` | Work with styled presets and tokens, Tailwind-owned components, primitives, headless markup, or pass-through APIs without mixing modes. |
31
+ | `primereact-accessibility-icons` | Review semantics, keyboard behavior, focus, accessible names, PrimeIcons, and custom icons in the selected mode. |
32
+ | `primereact-audit-troubleshooting` | Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations. |
33
+
34
+ The current PrimeReact v11 documentation does not provide a supported version migration guide, so the plugin does not advertise a migration workflow.
35
+
36
+ Skill names use the `primereact-` prefix because assistants may keep skills from several plugins in one shared namespace.
37
+
38
+ ## How Skills Work
39
+
40
+ You do not need to select a skill manually. Describe the PrimeReact task and the router chooses the relevant workflow.
41
+
42
+ - The router checks that the project uses React and PrimeReact, then selects `styled`, `tailwind`, `primitive`, or `headless` from project evidence. It uses `hooks` only for a documented standalone hook.
43
+ - The selected skill reads only the component or guide information needed for that mode.
44
+ - When component metadata is available, the skill validates the final PrimeReact usage in the same mode.
45
+ - If project evidence is ambiguous or the documentation does not confirm an API, the skill reports the limitation instead of borrowing guidance from another mode.
46
+
47
+ After implementation, run the checks required by your project, including type checking, tests, browser behavior, accessibility, and visual review where applicable.
48
+
49
+ ## CLI Setup
50
+
51
+ Set `--tool` to the assistant you use. Keep `--library primereact` when you run the command outside a project or from a project that uses more than one PrimeUI library.
52
+
53
+ ```bash
54
+ pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
55
+ ```
56
+
57
+ Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`. Use `copilot` for GitHub Copilot CLI and VS Code.
58
+
59
+ ## Lifecycle and Doctor
60
+
61
+ Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeReact in the selected assistant.
62
+
63
+ ```bash
64
+ pnpm dlx @primeui/cli plugin status --tool copilot --library primereact
65
+ pnpm dlx @primeui/cli plugin update --tool copilot --library primereact
66
+ pnpm dlx @primeui/cli plugin remove --tool copilot --library primereact
67
+ pnpm dlx @primeui/cli doctor --tool copilot --library primereact
68
+
69
+ # Machine-readable diagnostics
70
+ pnpm dlx @primeui/cli doctor --tool copilot --library primereact --json
71
+ ```
72
+
73
+ Run `doctor` when the plugin or MCP server is not working as expected. It checks the installation, starts the MCP server, confirms the available tools, and tests documentation retrieval and component validation. Checks that an assistant does not expose are reported as unsupported.
74
+
75
+ ## Manual Setup
76
+
77
+ ### Source
78
+
79
+ Claude Code, Codex, and GitHub Copilot can install the plugin directly from the public marketplace. For manual Cursor or Gemini CLI setup, clone the repository to a location you intend to keep because those clients use the selected `plugins/primereact` directory after installation.
80
+
81
+ ```bash
82
+ git clone --branch main https://github.com/primefaces/primeui-plugins.git ~/primeui-plugins
83
+ ls ~/primeui-plugins/plugins/primereact
84
+ ```
85
+
86
+ ### Claude Code
87
+
88
+ Add the PrimeUI marketplace, then install only the PrimeReact plugin.
89
+
90
+ ```bash
91
+ claude plugin marketplace add primefaces/primeui-plugins
92
+ claude plugin install primereact@primeui
93
+ claude plugin list --json
94
+ ```
95
+
96
+ ### Codex
97
+
98
+ Add the PrimeUI marketplace, inspect its catalog, then install only the PrimeReact plugin. Use the interactive plugin browser to manage enablement.
99
+
100
+ ```bash
101
+ codex plugin marketplace add primefaces/primeui-plugins
102
+ codex plugin list --available
103
+ codex plugin add primereact@primeui
104
+ codex plugin list
105
+ ```
106
+
107
+ ### VS Code Copilot
108
+
109
+ Install the PrimeReact Plugin through GitHub Copilot CLI. VS Code automatically discovers plugins installed by Copilot CLI, so it does not need a separate plugin configuration.
110
+
111
+ ```bash
112
+ copilot plugin marketplace add primefaces/primeui-plugins
113
+ copilot plugin install primereact@primeui
114
+ ```
115
+
116
+ The installation includes the seven PrimeReact skills and the PrimeReact MCP server. See the [VS Code Agent Plugins](https://code.visualstudio.com/docs/agent-customization/agent-plugins) and [GitHub Copilot CLI Plugins](https://docs.github.com/en/copilot/how-tos/copilot-cli/customize-copilot/plugins-finding-installing) documentation for client-specific details.
117
+
118
+ ### Cursor
119
+
120
+ For local setup, link the PrimeReact plugin directory into Cursor's local-plugin directory. Restart Cursor or run `Developer: Reload Window` after creating the link.
121
+
122
+ ```bash
123
+ mkdir -p ~/.cursor/plugins/local
124
+ ln -s ~/primeui-plugins/plugins/primereact ~/.cursor/plugins/local/primereact
125
+ ```
126
+
127
+ Use Cursor's Customize screen to manage the plugin, its skills, and its MCP server.
128
+
129
+ ### Gemini CLI
130
+
131
+ Validate the PrimeReact extension directory, then install it from the persistent checkout. Do not install from the repository root because it contains plugins for all three PrimeUI libraries.
132
+
133
+ ```bash
134
+ gemini extensions validate ~/primeui-plugins/plugins/primereact
135
+ gemini extensions install ~/primeui-plugins/plugins/primereact --consent
136
+ gemini extensions list --output-format json
137
+ ```
138
+
139
+ Gemini CLI 0.29.3 requires `experimental.extensionManagement` to be enabled. The installed extension contains the seven PrimeReact skills and the PrimeReact MCP server.
@@ -95,7 +95,7 @@ export default function ColorDemo() {
95
95
 
96
96
  ## Spin
97
97
 
98
- Use a spin animation utility like `animate-spin` from Tailwind apply rotation.
98
+ Use the `spin` property to apply a rotation animation to an icon. Alternatively, a spin animation utility such as `animate-spin` from Tailwind can also be used.
99
99
 
100
100
  ```tsx
101
101
  import { Cog } from '@primeicons/react/cog';
@@ -104,8 +104,8 @@ import { Spinner } from '@primeicons/react/spinner';
104
104
  export default function SpinDemo() {
105
105
  return (
106
106
  <div className="flex justify-center gap-4">
107
- <Spinner className="animate-spin" size={32} />
108
- <Cog className="animate-spin" size={32} />
107
+ <Spinner spin size={32} />
108
+ <Cog spin size={32} />
109
109
  </div>
110
110
  );
111
111
  }
@@ -16,7 +16,7 @@ Primitive components ship **unstyled** — you compose the behavior and bring yo
16
16
  Install PrimeReact using your favorite package manager:
17
17
 
18
18
  ```bash
19
- npm install primereact@11.0.0-rc.2
19
+ npm install primereact
20
20
  ```
21
21
 
22
22
  </DocStep>