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

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 (52) hide show
  1. package/README.md +10 -8
  2. package/data/llms/headless/components/textarea/api.json +6 -0
  3. package/data/llms/headless/guides/ai/mcp.md +113 -0
  4. package/data/llms/headless/guides/ai/plugin.md +138 -0
  5. package/data/llms/headless/guides/installation.md +1 -1
  6. package/data/llms/hooks/use-filter.md +2 -5
  7. package/data/llms/llms-full.txt +1170 -247
  8. package/data/llms/llms.txt +8 -0
  9. package/data/llms/primitive/components/textarea/api.json +6 -6
  10. package/data/llms/primitive/guides/ai/mcp.md +113 -0
  11. package/data/llms/primitive/guides/ai/plugin.md +138 -0
  12. package/data/llms/primitive/guides/icons/primeicons.md +3 -3
  13. package/data/llms/primitive/guides/installation.md +1 -1
  14. package/data/llms/styled/components/datatable.md +20 -40
  15. package/data/llms/styled/components/dataview.md +12 -17
  16. package/data/llms/styled/components/dialog.md +0 -9
  17. package/data/llms/styled/components/inputgroup.md +0 -65
  18. package/data/llms/styled/components/select.md +3 -5
  19. package/data/llms/styled/components/slider.md +1 -2
  20. package/data/llms/styled/components/stepper.md +1 -2
  21. package/data/llms/styled/components/toolbar.md +10 -10
  22. package/data/llms/styled/components/tooltip.md +46 -0
  23. package/data/llms/styled/guides/ai/mcp.md +113 -0
  24. package/data/llms/styled/guides/ai/plugin.md +138 -0
  25. package/data/llms/styled/guides/icons/primeicons.md +3 -3
  26. package/data/llms/styled/guides/installation/astro.md +1 -1
  27. package/data/llms/styled/guides/installation/configuration.md +135 -0
  28. package/data/llms/styled/guides/installation/nextjs.md +1 -1
  29. package/data/llms/styled/guides/installation/react-router.md +1 -1
  30. package/data/llms/styled/guides/installation/tanstack.md +1 -1
  31. package/data/llms/styled/guides/installation/vite.md +1 -1
  32. package/data/llms/tailwind/components/datatable.md +17 -34
  33. package/data/llms/tailwind/components/dataview.md +12 -17
  34. package/data/llms/tailwind/components/dialog.md +1 -9
  35. package/data/llms/tailwind/components/select.md +1 -2
  36. package/data/llms/tailwind/components/slider.md +1 -2
  37. package/data/llms/tailwind/components/toolbar.md +10 -7
  38. package/data/llms/tailwind/guides/ai/mcp.md +113 -0
  39. package/data/llms/tailwind/guides/ai/plugin.md +138 -0
  40. package/data/llms/tailwind/guides/icons/primeicons.md +3 -3
  41. package/data/llms/tailwind/guides/installation/astro.md +1 -1
  42. package/data/llms/tailwind/guides/installation/nextjs.md +1 -1
  43. package/data/llms/tailwind/guides/installation/react-router.md +1 -1
  44. package/data/llms/tailwind/guides/installation/tanstack.md +1 -1
  45. package/data/llms/tailwind/guides/installation/vite.md +1 -1
  46. package/data/manifest.json +2379 -1673
  47. package/data/mcp-data.json +1375 -542
  48. package/dist/index.d.ts +2 -3
  49. package/dist/index.js +1 -1
  50. package/package.json +4 -3
  51. package/data/llms/manifest.json +0 -12409
  52. package/data/llms/mcp-data.json +0 -14481
@@ -363,7 +363,6 @@ Image filter implementation using multiple sliders.
363
363
  import { Slider } from '@primereact/ui/slider';
364
364
  import { ToggleButton } from '@primereact/ui/togglebutton';
365
365
  import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
366
- import Image from 'next/image';
367
366
  import { SliderRootChangeEvent } from '@primereact/ui/slider';
368
367
  import * as React from 'react';
369
368
 
@@ -379,7 +378,7 @@ export default function FilterDemo() {
379
378
 
380
379
  return (
381
380
  <div className="flex flex-col items-center justify-center">
382
- <Image
381
+ <img
383
382
  alt="user header"
384
383
  className="w-80 rounded mb-6"
385
384
  src="https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg"
@@ -384,7 +384,6 @@ import { Divider } from '@primereact/ui/divider';
384
384
  import { InputText } from '@primereact/ui/inputtext';
385
385
  import { Stepper } from '@primereact/ui/stepper';
386
386
  import { ToggleButton } from '@primereact/ui/togglebutton';
387
- import Image from 'next/image';
388
387
 
389
388
  export default function TemplateDemo() {
390
389
  return (
@@ -559,7 +558,7 @@ export default function TemplateDemo() {
559
558
  <div className="flex flex-col gap-2 mx-auto" style={{ minHeight: '16rem', maxWidth: '24rem' }}>
560
559
  <div className="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
561
560
  <div className="flex justify-center">
562
- <Image
561
+ <img
563
562
  alt="logo"
564
563
  width={240}
565
564
  height={160}
@@ -113,34 +113,34 @@ import { Search } from '@primeicons/react/search';
113
113
  export default function CustomDemo() {
114
114
  return (
115
115
  <Toolbar.Root
116
- className="max-[768px]:flex-col max-[768px]:items-start"
116
+ className="@container"
117
117
  style={{ borderRadius: '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }}
118
118
  >
119
- <Toolbar.Start className="max-[768px]:flex-wrap gap-y-2">
119
+ <Toolbar.Start>
120
120
  <div className="flex items-center gap-1">
121
121
  <i className="pi pi-prime text-xl" style={{ color: 'var(--p-primary-400)' }} />
122
122
  <span className="font-bold text-lg ml-2" style={{ color: 'var(--p-surface-0)' }}>
123
123
  Brand
124
124
  </span>
125
125
  </div>
126
- <div className="ml-6 flex gap-1 flex-wrap max-[768px]:ml-0">
127
- <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
126
+ <div className="ml-6 hidden @min-[620px]:flex gap-1">
127
+ <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
128
128
  Products
129
129
  </Button>
130
- <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
130
+ <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
131
131
  Solutions
132
132
  </Button>
133
- <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
133
+ <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
134
134
  Resources
135
135
  </Button>
136
- <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
136
+ <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
137
137
  Pricing
138
138
  </Button>
139
139
  </div>
140
140
  </Toolbar.Start>
141
- <Toolbar.End className="max-[768px]:w-full">
142
- <div className="flex items-center gap-2 flex-wrap">
143
- <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
141
+ <Toolbar.End>
142
+ <div className="flex items-center gap-2">
143
+ <Button variant="text" size="small" iconOnly aria-label="Search" className="text-surface-0! hover:bg-surface-700!">
144
144
  <Search />
145
145
  </Button>
146
146
  <Button severity="contrast" size="small">
@@ -138,6 +138,52 @@ export default function BasicDemo() {
138
138
  }
139
139
  ```
140
140
 
141
+ ### Standalone
142
+
143
+ `Tooltip.Manager` only coordinates a group of tooltips, so moving between adjacent ones skips the open delay. A single tooltip doesn't need it, wrap just the `Tooltip.Root` and its `openDelay` is honored on its own.
144
+
145
+ ```tsx
146
+ import { Button } from '@primereact/ui/button';
147
+ import { Tooltip } from '@primereact/ui/tooltip';
148
+
149
+ export default function StandaloneDemo() {
150
+ return (
151
+ <div className="flex items-center justify-center gap-4">
152
+ {/* No Tooltip.Manager wrapper — each Tooltip.Root works on its own */}
153
+ <Tooltip.Root>
154
+ <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
155
+ Default delays
156
+ </Tooltip.Trigger>
157
+ <Tooltip.Portal>
158
+ <Tooltip.Positioner sideOffset={8}>
159
+ <Tooltip.Popup>
160
+ <Tooltip.Arrow />
161
+ <div className="font-semibold text-sm">No manager needed</div>
162
+ <div className="opacity-75 text-sm mt-1">Used standalone, without a Tooltip.Manager.</div>
163
+ </Tooltip.Popup>
164
+ </Tooltip.Positioner>
165
+ </Tooltip.Portal>
166
+ </Tooltip.Root>
167
+
168
+ <Tooltip.Root openDelay={1200} closeDelay={800}>
169
+ <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
170
+ 1200ms open · 800ms close
171
+ </Tooltip.Trigger>
172
+ <Tooltip.Portal>
173
+ <Tooltip.Positioner sideOffset={8}>
174
+ <Tooltip.Popup>
175
+ <Tooltip.Arrow />
176
+ <div className="font-semibold text-sm">Independent timing</div>
177
+ <div className="opacity-75 text-sm mt-1">Waits 1200ms to open, lingers 800ms after you leave.</div>
178
+ </Tooltip.Popup>
179
+ </Tooltip.Positioner>
180
+ </Tooltip.Portal>
181
+ </Tooltip.Root>
182
+ </div>
183
+ );
184
+ }
185
+ ```
186
+
141
187
  ### Arrow
142
188
 
143
189
  Use `Tooltip.Arrow` to display an arrow on the tooltip.
@@ -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@11.0.0` 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, migration, and troubleshooting.
19
+
20
+ ```bash
21
+ pnpm dlx @primeui/cli@1.0.0 plugin install --tool copilot --library primereact
22
+ pnpm dlx @primeui/cli@1.0.0 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@11.0.0
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@11.0.0"]
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@11.0.0
62
+ ```
63
+
64
+ ```toml
65
+ [mcp_servers.primereact]
66
+ command = "npx"
67
+ args = ["-y", "@primereact/mcp@11.0.0"]
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@11.0.0"]
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,138 @@
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@1.0.0` 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
+ - Seven skills for PrimeReact implementation, setup, theming, accessibility, migration, and troubleshooting.
16
+ - The PrimeReact MCP server, configured with `@primereact/mcp@11.0.0`.
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@11.0.0` 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-migration` | Plan and apply source-backed version or mode changes using current PrimeReact guides. |
33
+ | `primereact-audit-troubleshooting` | Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations. |
34
+
35
+ Skill names use the `primereact-` prefix because assistants may keep skills from several plugins in one shared namespace.
36
+
37
+ ## How Skills Work
38
+
39
+ You do not need to select a skill manually. Describe the PrimeReact task and the router chooses the relevant workflow.
40
+
41
+ - 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.
42
+ - The selected skill reads only the component or guide information needed for that mode.
43
+ - When component metadata is available, the skill validates the final PrimeReact usage in the same mode.
44
+ - 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.
45
+
46
+ After implementation, run the checks required by your project, including type checking, tests, browser behavior, accessibility, and visual review where applicable.
47
+
48
+ ## CLI Setup
49
+
50
+ 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.
51
+
52
+ ```bash
53
+ pnpm dlx @primeui/cli@1.0.0 plugin install --tool copilot --library primereact
54
+ ```
55
+
56
+ Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`. Use `copilot` for GitHub Copilot CLI and VS Code.
57
+
58
+ ## Lifecycle and Doctor
59
+
60
+ Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeReact in the selected assistant.
61
+
62
+ ```bash
63
+ pnpm dlx @primeui/cli@1.0.0 plugin status --tool copilot --library primereact
64
+ pnpm dlx @primeui/cli@1.0.0 plugin update --tool copilot --library primereact
65
+ pnpm dlx @primeui/cli@1.0.0 plugin remove --tool copilot --library primereact
66
+ pnpm dlx @primeui/cli@1.0.0 doctor --tool copilot --library primereact
67
+
68
+ # Machine-readable diagnostics
69
+ pnpm dlx @primeui/cli@1.0.0 doctor --tool copilot --library primereact --json
70
+ ```
71
+
72
+ 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.
73
+
74
+ ## Manual Setup
75
+
76
+ ### Source
77
+
78
+ 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.
79
+
80
+ ```bash
81
+ git clone --branch main https://github.com/primefaces/primeui-plugins.git ~/primeui-plugins
82
+ ls ~/primeui-plugins/plugins/primereact
83
+ ```
84
+
85
+ ### Claude Code
86
+
87
+ Add the PrimeUI marketplace, then install only the PrimeReact plugin.
88
+
89
+ ```bash
90
+ claude plugin marketplace add primefaces/primeui-plugins
91
+ claude plugin install primereact@primeui
92
+ claude plugin list --json
93
+ ```
94
+
95
+ ### Codex
96
+
97
+ Add the PrimeUI marketplace, inspect its catalog, then install only the PrimeReact plugin. Use the interactive plugin browser to manage enablement.
98
+
99
+ ```bash
100
+ codex plugin marketplace add primefaces/primeui-plugins
101
+ codex plugin list --available
102
+ codex plugin add primereact@primeui
103
+ codex plugin list
104
+ ```
105
+
106
+ ### VS Code Copilot
107
+
108
+ 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.
109
+
110
+ ```bash
111
+ copilot plugin marketplace add primefaces/primeui-plugins
112
+ copilot plugin install primereact@primeui
113
+ ```
114
+
115
+ 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.
116
+
117
+ ### Cursor
118
+
119
+ 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.
120
+
121
+ ```bash
122
+ mkdir -p ~/.cursor/plugins/local
123
+ ln -s ~/primeui-plugins/plugins/primereact ~/.cursor/plugins/local/primereact
124
+ ```
125
+
126
+ Use Cursor's Customize screen to manage the plugin, its skills, and its MCP server.
127
+
128
+ ### Gemini CLI
129
+
130
+ 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.
131
+
132
+ ```bash
133
+ gemini extensions validate ~/primeui-plugins/plugins/primereact
134
+ gemini extensions install ~/primeui-plugins/plugins/primereact --consent
135
+ gemini extensions list --output-format json
136
+ ```
137
+
138
+ 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 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
16
16
  Install PrimeReact and a theme package using your favorite package manager:
17
17
 
18
18
  ```bash
19
- npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
19
+ npm install @primereact/ui @primeuix/themes @primeicons/react
20
20
  ```
21
21
 
22
22
  </DocStep>
@@ -0,0 +1,135 @@
1
+ # Configuration
2
+
3
+ Application wide configuration for PrimeReact.
4
+
5
+ ## Provider
6
+
7
+ Wrap your app with `PrimeReactProvider` in your main file (like `main.tsx` or `App.tsx`). This enables PrimeReact features everywhere in your app:
8
+
9
+ ```tsx showLineNumbers {10, 12}
10
+ import { StrictMode } from 'react'
11
+ import { createRoot } from 'react-dom/client'
12
+ import App from './App.tsx'
13
+ import { PrimeReactProvider } from "@primereact/core";
14
+
15
+ ...
16
+
17
+ createRoot(document.getElementById('root')!).render(
18
+ <StrictMode>
19
+ <PrimeReactProvider>
20
+ <App />
21
+ </PrimeReactProvider>
22
+ </StrictMode>,
23
+ )
24
+
25
+ ```
26
+
27
+ ## Theme
28
+
29
+ Style mode offers theming based on a design token based architecture. See the [styled mode](/docs/theming/styled) documentation for details such as building your own theme.
30
+
31
+ ```tsx full showLineNumbers {2,5-12,16}
32
+ ...
33
+ import Aura from '@primeuix/themes/aura';
34
+ import { PrimeReactProvider } from '@primereact/core';
35
+
36
+ const theme = {
37
+ preset: Aura,
38
+ options: {
39
+ prefix: 'p',
40
+ darkModeSelector: 'system',
41
+ cssLayer: false
42
+ }
43
+ };
44
+
45
+ ReactDOM.createRoot(document.getElementById('root')).render(
46
+ <React.StrictMode>
47
+ <PrimeReactProvider theme={theme}>
48
+ <App />
49
+ </PrimeReactProvider>
50
+ </React.StrictMode>
51
+ );
52
+ ```
53
+
54
+ ## Unstyled
55
+
56
+ Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind and Bootstrap. Visit Unstyled mode documentation for more information.
57
+
58
+ ```tsx showLineNumbers {6}
59
+ import { PrimeReactProvider } from '@primereact/core';
60
+ ...
61
+
62
+ ReactDOM.createRoot(document.getElementById('root')).render(
63
+ <React.StrictMode>
64
+ <PrimeReactProvider unstyled>
65
+ <App />
66
+ </PrimeReactProvider>
67
+ </React.StrictMode>
68
+ );
69
+ ```
70
+
71
+ ## PassThrough
72
+
73
+ Defines the shared pass through properties per component type. Visit the [Pass Through Props](/docs/passthrough) documentation for more information.
74
+
75
+ ```tsx showLineNumbers {4-8,12}
76
+ import { PrimeReactProvider } from '@primereact/core';
77
+ ...
78
+
79
+ const pt = {
80
+ slider: {
81
+ handle: { className: 'bg-primary text-primary-contrast' }
82
+ }
83
+ };
84
+
85
+ ReactDOM.createRoot(document.getElementById('root')).render(
86
+ <React.StrictMode>
87
+ <PrimeReactProvider pt={pt}>
88
+ <App />
89
+ </PrimeReactProvider>
90
+ </React.StrictMode>
91
+ );
92
+ ```
93
+
94
+ ## PassThrough Options
95
+
96
+ Used to configure the `ptOptions` properties of components. The `mergeSections` defines whether the sections from the main configuration gets added and the `mergeProps` controls whether to override or merge the defined props.
97
+ Defaults are `true` for `mergeSections` and `false` for `mergeProps`.
98
+
99
+ ```tsx showLineNumbers {4-7,11}
100
+ import { PrimeReactProvider } from '@primereact/core';
101
+ ...
102
+
103
+ const ptOptions = {
104
+ mergeSections: true,
105
+ mergeProps: false
106
+ };
107
+
108
+ ReactDOM.createRoot(document.getElementById('root')).render(
109
+ <React.StrictMode>
110
+ <PrimeReactProvider ptOptions={ptOptions}>
111
+ <App />
112
+ </PrimeReactProvider>
113
+ </React.StrictMode>
114
+ );
115
+ ```
116
+
117
+ ## InputVariant
118
+
119
+ Input fields come in two styles, default is `outlined` with borders around the field whereas `filled` alternative adds a background color to the field.
120
+ Applying `p-variant-filled` to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class.
121
+ Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree,
122
+ to resolve this case set inputVariant to `filled` at PrimeReactProvider as well.
123
+
124
+ ```tsx showLineNumbers {6}
125
+ import { PrimeReactProvider } from '@primereact/core';
126
+ ...
127
+
128
+ ReactDOM.createRoot(document.getElementById('root')).render(
129
+ <React.StrictMode>
130
+ <PrimeReactProvider inputVariant="filled">
131
+ <App />
132
+ </PrimeReactProvider>
133
+ </React.StrictMode>
134
+ );
135
+ ```
@@ -16,7 +16,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
16
16
  Install PrimeReact and a theme package using your favorite package manager:
17
17
 
18
18
  ```bash
19
- npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
19
+ npm install @primereact/ui @primeuix/themes @primeicons/react
20
20
  ```
21
21
 
22
22
  </DocStep>
@@ -16,7 +16,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
16
16
  Install PrimeReact and a theme package using your favorite package manager:
17
17
 
18
18
  ```bash
19
- npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
19
+ npm install @primereact/ui @primeuix/themes @primeicons/react
20
20
  ```
21
21
 
22
22
  </DocStep>
@@ -16,7 +16,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
16
16
  Install PrimeReact and a theme package using your favorite package manager:
17
17
 
18
18
  ```bash
19
- npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
19
+ npm install @primereact/ui @primeuix/themes @primeicons/react
20
20
  ```
21
21
 
22
22
  </DocStep>
@@ -16,7 +16,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
16
16
  Install PrimeReact and a theme package using your favorite package manager:
17
17
 
18
18
  ```bash
19
- npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
19
+ npm install @primereact/ui @primeuix/themes @primeicons/react
20
20
  ```
21
21
 
22
22
  </DocStep>