@primereact/mcp 11.0.0-rc.2

package/data/llms/tailwind/guides/installation/astro.md

@@ -0,0 +1,165 @@
+# With Astro
+
+Setting up PrimeReact Tailwind components in an Astro project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/astro-tailwind-quickstart" target="_blank" rel="noopener noreferrer">Astro + Tailwind template</a>, pre-configured with PrimeReact.
+</DocMessage>
+
+## Install via CLI
+
+PrimeReact's Tailwind components ship as a shadcn-compatible registry, so the shadcn CLI can scaffold everything for you. You need a project with Tailwind CSS v4 already set up.
+
+<DocStepper>
+    <DocStep>
+
+### Initialize
+
+Run `init` with the PrimeReact theme. This creates `components.json`, installs the base packages, adds the `cn` helper, and writes the design tokens (`--p-primary-*`, `--p-surface-*`) and the `tailwindcss-primeui` plugin to your global stylesheet:
+
+```bash
+npx shadcn@latest init -t astro https://primereact.dev/r/theme.json
+```
+
+    </DocStep>
+    <DocStep>
+
+### Wrap with PrimeReactProvider
+
+Wrap your components with `PrimeReactProvider` so component behavior and your [PrimeUI](https://primeui.dev/pricing) license are available — see the [PrimeReactProvider](#primereactprovider) snippet below (in Astro, render it as a React island).
+
+    </DocStep>
+    <DocStep>
+
+### Add Components
+
+Add any component by its registry URL:
+
+```bash
+npx shadcn@latest add https://primereact.dev/r/button.json
+```
+
+Then pick your colors — see [Theming](/docs/tailwind/guides/theming).
+
+    </DocStep>
+
+</DocStepper>
+
+## Manual installation
+
+PrimeReact Tailwind components are distributed through a shadcn-compatible registry, each component is copied into your codebase, so there is no theme file or runtime theme provider to set up. In Astro, render the components as React islands.
+
+<DocStepper>
+    <DocStep>
+
+### Install Packages
+
+Install PrimeReact along with the icon package and the Tailwind utilities the components rely on:
+
+```bash
+npm install primereact@11.0.0-rc.2 @primeicons/react@8.0.0-rc.1 tailwindcss-primeui tailwind-merge
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add the `cn` Helper
+
+The components rely on a `cn` utility to merge class names. Create `lib/utils.ts` and add the helper:
+
+```ts showLineNumbers title="lib/utils.ts"
+import { cn as _cn } from '@primeuix/utils';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: unknown[]) {
+    return twMerge(_cn(...inputs));
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Set up Global Styles
+
+Import Tailwind and the `tailwindcss-primeui` plugin in your global stylesheet, and register the `dark` variant so utilities and components respond to a `.dark` class:
+
+```css showLineNumbers title="src/styles/global.css" {4}
+@import 'tailwindcss';
+@import 'tailwindcss-primeui';
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+The PrimeReact design tokens (`--p-primary-*`, `--p-surface-*`, …) live under `:root` and `.dark`. Add them by running `npx shadcn@latest add https://primereact.dev/r/theme.json`, or copy them from the [Theming](/docs/tailwind/guides/theming) guide.
+
+    </DocStep>
+    <DocStep>
+
+### PrimeReactProvider
+
+Wrap your components with `PrimeReactProvider` so component behavior and your [PrimeUI](https://primeui.dev/pricing) license are available. Set `darkModeSelector` to the same `.dark` class used above:
+
+```tsx showLineNumbers title="src/components/Providers.tsx" {7,10}
+import { PrimeReactProvider } from '@primereact/core';
+import type { ReactNode } from 'react';
+
+const primereact = {
+    theme: {
+        options: {
+            darkModeSelector: '.dark'
+        }
+    },
+    license: 'PrimeUI-Commercial-Key...'
+};
+
+export default function Providers({ children }: { children: ReactNode }) {
+    return <PrimeReactProvider {...primereact}>{children}</PrimeReactProvider>;
+}
+```
+
+Render it as an island in your `.astro` page with a `client:*` directive so it hydrates on the client:
+
+```astro showLineNumbers title="src/pages/index.astro"
+---
+import Providers from '../components/Providers';
+---
+
+<Providers client:load>
+    <!-- render PrimeReact components here -->
+</Providers>
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add Components
+
+You can add a component with the shadcn CLI, or add it manually. For example, to add the Button component with the CLI:
+
+```bash
+npx shadcn@latest add https://primereact.dev/r/button.json
+```
+
+To add it manually instead, head to the [Button](/docs/tailwind/components/button) component page and follow the install steps there.
+
+Once added, import the component into a React island and render it with a `client:*` directive to verify your setup:
+
+```tsx showLineNumbers {1}
+import { Button } from '@/components/ui/button';
+
+export default function VerifyInstallation() {
+    return (
+        <div className="card flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+    </DocStep>
+
+</DocStepper>
+
+## Next Steps
+
+[Theme your components](/docs/tailwind/guides/theming) with CSS variables, then [browse the components](/docs/tailwind/components/button) to add and customize the ones you need.

package/data/llms/tailwind/guides/installation/manual.md

@@ -0,0 +1,3 @@
+# Manual
+
+Setting up PrimeReact Tailwind components manually in any project.

package/data/llms/tailwind/guides/installation/nextjs.md

@@ -0,0 +1,169 @@
+# With Next.js
+
+Setting up PrimeReact Tailwind components in a Next.js project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/nextjs-tailwind-quickstart" target="_blank" rel="noopener noreferrer">Next.js + Tailwind template</a>, pre-configured with PrimeReact.
+</DocMessage>
+
+## Install via CLI
+
+PrimeReact's Tailwind components ship as a shadcn-compatible registry, so the shadcn CLI can scaffold everything for you. You need a project with Tailwind CSS v4 already set up.
+
+<DocStepper>
+    <DocStep>
+
+### Initialize
+
+Run `init` with the PrimeReact theme. This creates `components.json`, installs the base packages, adds the `cn` helper, and writes the design tokens (`--p-primary-*`, `--p-surface-*`) and the `tailwindcss-primeui` plugin to your global stylesheet:
+
+```bash
+npx shadcn@latest init -t next https://primereact.dev/r/theme.json
+```
+
+    </DocStep>
+    <DocStep>
+
+### Wrap with PrimeReactProvider
+
+Wrap your app with `PrimeReactProvider` so component behavior and your [PrimeUI](https://primeui.dev/pricing) license are available everywhere — see the [PrimeReactProvider](#primereactprovider) snippet below.
+
+    </DocStep>
+    <DocStep>
+
+### Add Components
+
+Add any component by its registry URL:
+
+```bash
+npx shadcn@latest add https://primereact.dev/r/button.json
+```
+
+Then pick your colors — see [Theming](/docs/tailwind/guides/theming).
+
+    </DocStep>
+
+</DocStepper>
+
+## Manual installation
+
+PrimeReact Tailwind components are distributed through a shadcn-compatible registry, each component is copied into your codebase and themed with CSS variables.
+
+<DocStepper>
+    <DocStep>
+
+### Install Packages
+
+Install PrimeReact along with the icon package and the Tailwind utilities the components rely on:
+
+```bash
+npm install primereact@11.0.0-rc.2 @primeicons/react@8.0.0-rc.1 tailwindcss-primeui tailwind-merge
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add the `cn` Helper
+
+The components rely on a `cn` utility to merge class names. Create `lib/utils.ts` and add the helper:
+
+```ts showLineNumbers title="lib/utils.ts"
+import { cn as _cn } from '@primeuix/utils';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: unknown[]) {
+    return twMerge(_cn(...inputs));
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Set up Global Styles
+
+Import Tailwind and the `tailwindcss-primeui` plugin in your global stylesheet, and register the `dark` variant so utilities and components respond to a `.dark` class:
+
+```css showLineNumbers title="app/globals.css" {4}
+@import 'tailwindcss';
+@import 'tailwindcss-primeui';
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+The PrimeReact design tokens (`--p-primary-*`, `--p-surface-*`, …) live under `:root` and `.dark`. Add them by running `npx shadcn@latest add https://primereact.dev/r/theme.json`, or copy them from the [Theming](/docs/tailwind/guides/theming) guide.
+
+    </DocStep>
+    <DocStep>
+
+### PrimeReactProvider
+
+Even in Tailwind mode, wrap your app with `PrimeReactProvider` so component behavior and your [PrimeUI](https://primeui.dev/pricing) license are available everywhere. Set `darkModeSelector` to the same `.dark` class used above:
+
+```tsx showLineNumbers title="components/prime-provider.tsx" {7,10}
+'use client';
+import { PrimeReactProvider } from '@primereact/core';
+
+const primereact = {
+    theme: {
+        options: {
+            darkModeSelector: '.dark'
+        }
+    },
+    license: 'PrimeUI-Commercial-Key...'
+};
+
+export function PrimeProvider({ children }: { children: React.ReactNode }) {
+    return <PrimeReactProvider {...primereact}>{children}</PrimeReactProvider>;
+}
+```
+
+Then wrap your app with it in `app/layout.tsx`:
+
+```tsx showLineNumbers title="app/layout.tsx" {1,6}
+import { PrimeProvider } from '@/components/prime-provider';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <body>
+                <PrimeProvider>{children}</PrimeProvider>
+            </body>
+        </html>
+    );
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add Components
+
+You can add a component with the shadcn CLI, or add it manually. For example, to add the Button component with the CLI:
+
+```bash
+npx shadcn@latest add https://primereact.dev/r/button.json
+```
+
+To add it manually instead, head to the [Button](/docs/tailwind/components/button) component page and follow the install steps there.
+
+Once added, import the component and render it to verify your setup:
+
+```tsx showLineNumbers {1}
+import { Button } from '@/components/ui/button';
+
+export default function VerifyInstallation() {
+    return (
+        <div className="card flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+    </DocStep>
+
+</DocStepper>
+
+## Next Steps
+
+[Theme your components](/docs/tailwind/guides/theming) with CSS variables, then [browse the components](/docs/tailwind/components/button) to add and customize the ones you need.

package/data/llms/tailwind/guides/installation/react-router.md

@@ -0,0 +1,157 @@
+# With React Router
+
+Setting up PrimeReact Tailwind components in a React Router project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/react-router-tailwind-quickstart" target="_blank" rel="noopener noreferrer">React Router + Tailwind template</a>, pre-configured with PrimeReact.
+</DocMessage>
+
+## Install via CLI
+
+PrimeReact's Tailwind components ship as a shadcn-compatible registry, so the shadcn CLI can scaffold everything for you. You need a project with Tailwind CSS v4 already set up.
+
+<DocStepper>
+    <DocStep>
+
+### Initialize
+
+Run `init` with the PrimeReact theme. This creates `components.json`, installs the base packages, adds the `cn` helper, and writes the design tokens (`--p-primary-*`, `--p-surface-*`) and the `tailwindcss-primeui` plugin to your global stylesheet:
+
+```bash
+npx shadcn@latest init -t react-router https://primereact.dev/r/theme.json
+```
+
+    </DocStep>
+    <DocStep>
+
+### Wrap with PrimeReactProvider
+
+Wrap your app with `PrimeReactProvider` so component behavior and your [PrimeUI](https://primeui.dev/pricing) license are available everywhere — see the [PrimeReactProvider](#primereactprovider) snippet below.
+
+    </DocStep>
+    <DocStep>
+
+### Add Components
+
+Add any component by its registry URL:
+
+```bash
+npx shadcn@latest add https://primereact.dev/r/button.json
+```
+
+Then pick your colors — see [Theming](/docs/tailwind/guides/theming).
+
+    </DocStep>
+
+</DocStepper>
+
+## Manual installation
+
+PrimeReact Tailwind components are distributed through a shadcn-compatible registry, each component is copied into your codebase, so there is no theme file or runtime theme provider to set up.
+
+<DocStepper>
+    <DocStep>
+
+### Install Packages
+
+Install PrimeReact along with the icon package and the Tailwind utilities the components rely on:
+
+```bash
+npm install primereact@11.0.0-rc.2 @primeicons/react@8.0.0-rc.1 tailwindcss-primeui tailwind-merge
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add the `cn` Helper
+
+The components rely on a `cn` utility to merge class names. Create `lib/utils.ts` and add the helper:
+
+```ts showLineNumbers title="lib/utils.ts"
+import { cn as _cn } from '@primeuix/utils';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: unknown[]) {
+    return twMerge(_cn(...inputs));
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Set up Global Styles
+
+Import Tailwind and the `tailwindcss-primeui` plugin in your global stylesheet, and register the `dark` variant so utilities and components respond to a `.dark` class:
+
+```css showLineNumbers title="app/app.css" {4}
+@import 'tailwindcss';
+@import 'tailwindcss-primeui';
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+The PrimeReact design tokens (`--p-primary-*`, `--p-surface-*`, …) live under `:root` and `.dark`. Add them by running `npx shadcn@latest add https://primereact.dev/r/theme.json`, or copy them from the [Theming](/docs/tailwind/guides/theming) guide.
+
+    </DocStep>
+    <DocStep>
+
+### PrimeReactProvider
+
+Wrap your app with `PrimeReactProvider` in `app/root.tsx` so component behavior and your [PrimeUI](https://primeui.dev/pricing) license are available everywhere. Set `darkModeSelector` to the same `.dark` class used above:
+
+```tsx showLineNumbers title="app/root.tsx" {7,10}
+import { Outlet } from 'react-router';
+import { PrimeReactProvider } from '@primereact/core';
+
+const primereact = {
+    theme: {
+        options: {
+            darkModeSelector: '.dark'
+        }
+    },
+    license: 'PrimeUI-Commercial-Key...'
+};
+
+export default function App() {
+    return (
+        <PrimeReactProvider {...primereact}>
+            <Outlet />
+        </PrimeReactProvider>
+    );
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add Components
+
+You can add a component with the shadcn CLI, or add it manually. For example, to add the Button component with the CLI:
+
+```bash
+npx shadcn@latest add https://primereact.dev/r/button.json
+```
+
+To add it manually instead, head to the [Button](/docs/tailwind/components/button) component page and follow the install steps there.
+
+Once added, import the component and render it to verify your setup:
+
+```tsx showLineNumbers {1}
+import { Button } from '@/components/ui/button';
+
+export default function VerifyInstallation() {
+    return (
+        <div className="card flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+    </DocStep>
+
+</DocStepper>
+
+## Next Steps
+
+[Theme your components](/docs/tailwind/guides/theming) with CSS variables, then [browse the components](/docs/tailwind/components/button) to add and customize the ones you need.

package/data/llms/tailwind/guides/installation/tanstack.md

@@ -0,0 +1,161 @@
+# With TanStack
+
+Setting up PrimeReact Tailwind components in a TanStack Start project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/tanstack-tailwind-quickstart" target="_blank" rel="noopener noreferrer">TanStack + Tailwind template</a>, pre-configured with PrimeReact.
+</DocMessage>
+
+## Install via CLI
+
+PrimeReact's Tailwind components ship as a shadcn-compatible registry, so the shadcn CLI can scaffold everything for you. You need a project with Tailwind CSS v4 already set up.
+
+<DocStepper>
+    <DocStep>
+
+### Initialize
+
+Run `init` with the PrimeReact theme. This creates `components.json`, installs the base packages, adds the `cn` helper, and writes the design tokens (`--p-primary-*`, `--p-surface-*`) and the `tailwindcss-primeui` plugin to your global stylesheet:
+
+```bash
+npx shadcn@latest init -t start https://primereact.dev/r/theme.json
+```
+
+    </DocStep>
+    <DocStep>
+
+### Wrap with PrimeReactProvider
+
+Wrap your app with `PrimeReactProvider` so component behavior and your [PrimeUI](https://primeui.dev/pricing) license are available everywhere — see the [PrimeReactProvider](#primereactprovider) snippet below.
+
+    </DocStep>
+    <DocStep>
+
+### Add Components
+
+Add any component by its registry URL:
+
+```bash
+npx shadcn@latest add https://primereact.dev/r/button.json
+```
+
+Then pick your colors — see [Theming](/docs/tailwind/guides/theming).
+
+    </DocStep>
+
+</DocStepper>
+
+## Manual installation
+
+PrimeReact Tailwind components are distributed through a shadcn-compatible registry, each component is copied into your codebase, so there is no theme file or runtime theme provider to set up.
+
+<DocStepper>
+    <DocStep>
+
+### Install Packages
+
+Install PrimeReact along with the icon package and the Tailwind utilities the components rely on:
+
+```bash
+npm install primereact@11.0.0-rc.2 @primeicons/react@8.0.0-rc.1 tailwindcss-primeui tailwind-merge
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add the `cn` Helper
+
+The components rely on a `cn` utility to merge class names. Create `lib/utils.ts` and add the helper:
+
+```ts showLineNumbers title="lib/utils.ts"
+import { cn as _cn } from '@primeuix/utils';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: unknown[]) {
+    return twMerge(_cn(...inputs));
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Set up Global Styles
+
+Import Tailwind and the `tailwindcss-primeui` plugin in your global stylesheet, and register the `dark` variant so utilities and components respond to a `.dark` class:
+
+```css showLineNumbers title="src/styles.css" {4}
+@import 'tailwindcss';
+@import 'tailwindcss-primeui';
+
+@custom-variant dark (&:where(.dark, .dark *));
+```
+
+The PrimeReact design tokens (`--p-primary-*`, `--p-surface-*`, …) live under `:root` and `.dark`. Add them by running `npx shadcn@latest add https://primereact.dev/r/theme.json`, or copy them from the [Theming](/docs/tailwind/guides/theming) guide.
+
+    </DocStep>
+    <DocStep>
+
+### PrimeReactProvider
+
+Wrap your app with `PrimeReactProvider` in your root route (`src/routes/__root.tsx`) so component behavior and your [PrimeUI](https://primeui.dev/pricing) license are available everywhere. Set `darkModeSelector` to the same `.dark` class used above:
+
+```tsx showLineNumbers title="src/routes/__root.tsx" {7,10}
+import { Outlet, createRootRoute } from '@tanstack/react-router';
+import { PrimeReactProvider } from '@primereact/core';
+
+const primereact = {
+    theme: {
+        options: {
+            darkModeSelector: '.dark'
+        }
+    },
+    license: 'PrimeUI-Commercial-Key...'
+};
+
+export const Route = createRootRoute({
+    component: RootComponent
+});
+
+function RootComponent() {
+    return (
+        <PrimeReactProvider {...primereact}>
+            <Outlet />
+        </PrimeReactProvider>
+    );
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add Components
+
+You can add a component with the shadcn CLI, or add it manually. For example, to add the Button component with the CLI:
+
+```bash
+npx shadcn@latest add https://primereact.dev/r/button.json
+```
+
+To add it manually instead, head to the [Button](/docs/tailwind/components/button) component page and follow the install steps there.
+
+Once added, import the component and render it to verify your setup:
+
+```tsx showLineNumbers {1}
+import { Button } from '@/components/ui/button';
+
+export default function VerifyInstallation() {
+    return (
+        <div className="card flex justify-center">
+            <Button>Verify</Button>
+        </div>
+    );
+}
+```
+
+    </DocStep>
+
+</DocStepper>
+
+## Next Steps
+
+[Theme your components](/docs/tailwind/guides/theming) with CSS variables, then [browse the components](/docs/tailwind/components/button) to add and customize the ones you need.