@primereact/mcp 11.0.0-rc.2

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

@@ -0,0 +1,160 @@
+# With Vite
+
+Setting up PrimeReact Tailwind components in a Vite project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/vite-tailwind-quickstart" target="_blank" rel="noopener noreferrer">Vite + 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 vite 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/index.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 `src/main.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/main.tsx" {10,13}
+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import { PrimeReactProvider } from '@primereact/core';
+import './index.css';
+
+const primereact = {
+    theme: {
+        options: {
+            darkModeSelector: '.dark'
+        }
+    },
+    license: 'PrimeUI-Commercial-Key...'
+};
+
+createRoot(document.getElementById('root')!).render(
+    <StrictMode>
+        <PrimeReactProvider {...primereact}>
+            <App />
+        </PrimeReactProvider>
+    </StrictMode>
+);
+```
+
+    </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.md

@@ -0,0 +1,42 @@
+# Installation
+
+How to set up PrimeReact in your project. Select your framework to get started.
+
+<div className="mb-16 mt-2 p-1.75 grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-2 flex-wrap rounded-[14px] bg-surface-100 dark:bg-surface-800/60 shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.2)] m-px">
+    <NextLink href="/docs/tailwind/guides/installation/nextjs" className="flex relative items-center justify-between gap-6 pb-2 pt-8 flex-col overflow-hidden bg-(--code-figure-background) rounded-lg shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.15)] group transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_var(--p-primary-color)] dark:hover:shadow-[0_0_0_1px_var(--p-primary-color)]">
+        <svg className="size-12 text-surface-700 dark:text-surface-200 transition-transform duration-200 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-label="Next.js" >
+            <path d="M18.665 21.978C16.758 23.255 14.465 24 12 24 5.377 24 0 18.623 0 12S5.377 0 12 0s12 5.377 12 12c0 3.583-1.574 6.801-4.067 9.001L9.219 7.2H7.2v9.596h1.615V9.251l9.85 12.727Zm-3.332-8.533 1.6 2.061V7.2h-1.6v6.245Z" />
+        </svg>
+        <span className="px-2 py-1.5 rounded-md bg-surface-100 dark:bg-surface-800/75 font-mono text-sm uppercase text-surface-400 dark:text-surface-500 whitespace-nowrap leading-3 tracking-tight transition-colors group-hover:text-(--high-contrast-text-color)">next.js</span>
+    </NextLink>
+    <NextLink href="/docs/tailwind/guides/installation/vite" className="flex relative items-center justify-between gap-6 pb-2 pt-8 flex-col overflow-hidden bg-(--code-figure-background) rounded-lg shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.15)] group transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_var(--p-primary-color)] dark:hover:shadow-[0_0_0_1px_var(--p-primary-color)]">
+        <svg className="size-12 text-surface-700 dark:text-surface-200 transition-transform duration-200 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-label="Vite" >
+            <path d="M13.056 23.238a.57.57 0 0 1-1.02-.355v-5.202c0-.63-.512-1.143-1.144-1.143H5.148a.57.57 0 0 1-.464-.903l3.777-5.29c.54-.753 0-1.804-.93-1.804H.57a.574.574 0 0 1-.543-.746.6.6 0 0 1 .08-.157L5.008.78a.57.57 0 0 1 .467-.24h14.589a.57.57 0 0 1 .466.903l-3.778 5.29c-.54.755 0 1.806.93 1.806h5.745c.238 0 .424.138.513.322a.56.56 0 0 1-.063.603z" />
+        </svg>
+        <span className="px-2 py-1.5 rounded-md bg-surface-100 dark:bg-surface-800/75 font-mono text-sm uppercase text-surface-400 dark:text-surface-500 whitespace-nowrap leading-3 tracking-tight transition-colors group-hover:text-(--high-contrast-text-color)">vite</span>
+    </NextLink>
+    <NextLink href="/docs/tailwind/guides/installation/tanstack" className="flex relative items-center justify-between gap-6 pb-2 pt-8 flex-col overflow-hidden bg-(--code-figure-background) rounded-lg shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.15)] group transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_var(--p-primary-color)] dark:hover:shadow-[0_0_0_1px_var(--p-primary-color)]">
+        <svg className="size-12 text-surface-700 dark:text-surface-200 transition-transform duration-200 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="currentColor" aria-label="TanStack" >
+            <path d="M11.078.042c.316-.042.65-.014.97-.014 1.181 0 2.341.184 3.472.532a12.3 12.3 0 0 1 3.973 2.086 11.9 11.9 0 0 1 3.432 4.33c1.446 3.15 1.436 6.97-.046 10.107-.958 2.029-2.495 3.727-4.356 4.965-1.518 1.01-3.293 1.629-5.1 1.848-2.298.279-4.784-.129-6.85-1.188-3.88-1.99-6.518-5.994-6.57-10.382-.01-.846.003-1.697.17-2.534.273-1.365.748-2.683 1.463-3.88a12 12 0 0 1 2.966-3.36A12.3 12.3 0 0 1 9.357.3a12 12 0 0 1 1.255-.2l.133-.016zM7.064 19.99c-.535.057-1.098.154-1.557.454.103.025.222 0 .33 0 .258 0 .52-.01.778.002.647.028 1.32.131 1.945.303.8.22 1.505.65 2.275.942.813.307 1.622.402 2.484.402.435 0 .866-.001 1.287-.12-.22-.117-.534-.095-.778-.144a11 11 0 0 1-1.556-.416 12 12 0 0 1-1.093-.467l-.23-.108a15 15 0 0 0-1.012-.44c-.905-.343-1.908-.512-2.873-.408m.808-2.274c-1.059 0-2.13.187-3.083.667q-.346.177-.659.41c-.063.046-.175.106-.199.188s.061.151.11.204c.238-.127.464-.261.718-.357 1.64-.624 3.63-.493 5.268.078.817.285 1.569.712 2.365 1.046.89.374 1.798.616 2.753.74 1.127.147 2.412.028 3.442-.48.362-.179.865-.451 1.018-.847-.189.017-.36.098-.539.154a9 9 0 0 1-.868.222c-.994.2-2.052.24-3.053.06-.943-.17-1.82-.513-2.693-.873l-.111-.046-.223-.092-.112-.046a26 26 0 0 0-1.35-.527c-.89-.31-1.842-.5-2.784-.5M9.728 1.452c-1.27.28-2.407.826-3.502 1.514-.637.4-1.245.81-1.796 1.323-.82.765-1.447 1.695-1.993 2.666-.563 1-.924 2.166-1.098 3.297-.172 1.11-.2 2.277-.004 3.388.245 1.388.712 2.691 1.448 3.897.248-.116.424-.38.629-.557.414-.359.85-.691 1.317-.978a3.5 3.5 0 0 1 .539-.264c.07-.029.187-.055.22-.132.053-.124-.045-.34-.062-.468a7 7 0 0 1-.068-1.109 9.7 9.7 0 0 1 .61-3.177c.29-.76.73-1.45 1.254-2.069.177-.21.365-.405.56-.6.115-.114.258-.212.33-.359-.376 0-.751.108-1.108.218-.769.237-1.518.588-2.155 1.084-.291.226-.504.522-.779.76-.084.073-.235.17-.352.116-.176-.083-.149-.43-.169-.59-.078-.612.154-1.387.45-1.918.473-.852 1.348-1.58 2.376-1.555.444.011.833.166 1.257.266-.107-.153-.252-.264-.389-.39a5.4 5.4 0 0 0-1.107-.8c-.163-.085-.338-.136-.509-.2-.086-.03-.195-.074-.227-.17-.06-.177.26-.342.377-.417.453-.289 1.01-.527 1.556-.54.854-.021 1.688.452 2.04 1.258.123.284.16.583.184.885l.004.057.006.085.002.029.005.057.004.056c.268-.218.457-.54.718-.774.612-.547 1.45-.79 2.245-.544a2.97 2.97 0 0 1 1.71 1.378c.097.173.365.595.171.767-.152.134-.344.03-.504-.026a3 3 0 0 0-.372-.094l-.068-.014-.069-.013a3.9 3.9 0 0 0-1.377-.002c-.282.05-.557.15-.838.192v.06c.768.006 1.51.444 1.89 1.109.157.275.235.59.295.9.075.38.022.796-.082 1.168-.035.125-.098.336-.247.365-.106.02-.195-.085-.256-.155a4.6 4.6 0 0 0-.492-.522 20 20 0 0 0-1.467-1.14c-.267-.19-.56-.44-.868-.556.087.208.171.402.2.63.088.667-.192 1.296-.612 1.798a2.6 2.6 0 0 1-.426.427c-.067.05-.151.114-.24.1-.277-.044-.31-.463-.353-.677-.144-.726-.086-1.447.114-2.158-.178.09-.307.287-.418.45a5.3 5.3 0 0 0-.612 1.138c-.61 1.617-.604 3.51.186 5.066.088.174.221.15.395.15h.157a3 3 0 0 1 .472.018c.08.01.193 0 .257.06.077.072.036.194.018.282-.05.246-.066.469-.066.72.328-.051.419-.576.535-.84.131-.298.265-.597.387-.9.06-.148.14-.314.119-.479-.024-.185-.157-.381-.25-.54-.177-.298-.378-.606-.508-.929-.104-.258-.007-.58.286-.672.161-.05.334.049.439.166.22.244.363.609.523.896l1.249 2.248q.159.286.32.57c.043.074.086.188.173.219.077.028.182-.012.26-.027.198-.04.398-.083.598-.12.24-.043.605-.035.778-.222-.253-.08-.545-.075-.808-.057-.158.01-.333.067-.479-.025-.216-.137-.36-.455-.492-.667-.326-.525-.633-1.057-.945-1.59l-.05-.084-.1-.17q-.075-.126-.149-.255c-.037-.066-.092-.153-.039-.227.056-.076.179-.08.29-.081h.021q.066.001.117-.004a10 10 0 0 1 1.347-.107c-.035-.122-.135-.26-.103-.39.071-.292.49-.383.686-.174.131.14.207.334.292.504.113.223.24.44.361.66.211.383.441.757.658 1.138l.055.094.028.047c.093.156.187.314.238.489-.753-.035-1.318-.909-1.646-1.499-.027.095.016.179.05.27q.103.282.262.54c.152.244.326.495.556.673.408.315.945.317 1.436.283.315-.022.708-.165 1.018-.068s.434.438.25.7c-.138.196-.321.27-.55.3.162.346.373.667.527 1.02.064.146.13.37.283.448.102.051.248.003.358 0-.11-.292-.317-.54-.419-.839.31.015.61.176.898.28.567.202 1.128.424 1.687.648l.258.104c.23.092.462.183.689.283.083.037.198.123.29.07.074-.043.123-.146.169-.215a10.3 10.3 0 0 0 1.393-3.208c.75-2.989.106-6.287-1.695-8.783-.692-.96-1.562-1.789-2.522-2.476-2.401-1.718-5.551-2.407-8.44-1.768m4.908 14.904c-.636.166-1.292.317-1.945.401.086.293.296.577.45.84.059.101.122.237.24.281.132.05.292-.03.417-.072-.058-.158-.155-.3-.235-.45-.033-.06-.084-.133-.056-.206.05-.137.263-.13.381-.153.31-.063.617-.142.928-.204.114-.023.274-.085.389-.047.086.03.138.1.187.174l.022.033q.043.07.097.122c.125.113.313.13.472.162-.097-.219-.259-.41-.362-.63-.06-.127-.11-.315-.242-.388-.182-.102-.557.089-.743.137m-4.01-1.457c-.03.38-.147.689-.33 1.019.21.026.423.036.629.087.154.038.296.11.449.153-.082-.224-.233-.423-.35-.63-.12-.208-.226-.462-.398-.63" />
+        </svg>
+        <span className="px-2 py-1.5 rounded-md bg-surface-100 dark:bg-surface-800/75 font-mono text-sm uppercase text-surface-400 dark:text-surface-500 whitespace-nowrap leading-3 tracking-tight transition-colors group-hover:text-(--high-contrast-text-color)">tanstack</span>
+    </NextLink>
+    <NextLink href="/docs/tailwind/guides/installation/astro" className="flex relative items-center justify-between gap-6 pb-2 pt-8 flex-col overflow-hidden bg-(--code-figure-background) rounded-lg shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.15)] group transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_var(--p-primary-color)] dark:hover:shadow-[0_0_0_1px_var(--p-primary-color)]">
+        <svg className="size-12 text-surface-700 dark:text-surface-200 transition-transform duration-200 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"  fill="currentColor" aria-label="Astro" >
+            <path d="M8.358 20.162c-1.186-1.07-1.532-3.316-1.038-4.944.856 1.026 2.043 1.352 3.272 1.535 1.897.283 3.76.177 5.522-.678.202-.098.388-.229.608-.36.166.473.209.95.151 1.437-.14 1.185-.738 2.1-1.688 2.794-.38.277-.782.525-1.175.787-1.205.804-1.531 1.747-1.078 3.119l.044.148a3.158 3.158 0 0 1-1.407-1.188 3.31 3.31 0 0 1-.544-1.815c-.004-.32-.004-.642-.048-.958-.106-.769-.472-1.113-1.161-1.133-.707-.02-1.267.411-1.415 1.09-.012.053-.028.104-.045.165h.002zm-5.961-4.445s3.24-1.575 6.49-1.575l2.451-7.565c.092-.366.36-.614.662-.614.302 0 .57.248.662.614l2.45 7.565c3.85 0 6.491 1.575 6.491 1.575L16.088.727C15.93.285 15.663 0 15.303 0H8.697c-.36 0-.615.285-.784.727l-5.516 14.99z" />
+        </svg>
+       <span className="px-2 py-1.5 rounded-md bg-surface-100 dark:bg-surface-800/75 font-mono text-sm uppercase text-surface-400 dark:text-surface-500 whitespace-nowrap leading-3 tracking-tight transition-colors group-hover:text-(--high-contrast-text-color)">astro</span>
+    </NextLink>
+    <NextLink href="/docs/tailwind/guides/installation/react-router" className="flex relative items-center justify-between gap-6 pb-2 pt-8 flex-col overflow-hidden bg-(--code-figure-background) rounded-lg shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.15)] group transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_var(--p-primary-color)] dark:hover:shadow-[0_0_0_1px_var(--p-primary-color)]">
+        <svg className="size-12 text-surface-700 dark:text-surface-200 transition-transform duration-200 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-label="React Router" >
+            <path d="M12.118 5.466a2.306 2.306 0 00-.623.08c-.278.067-.702.332-.953.583-.41.423-.49.609-.662 1.469-.08.423.41 1.43.847 1.734.45.317 1.085.502 2.065.608 1.429.16 1.84.636 1.84 2.197 0 1.377-.385 1.747-1.96 1.906-1.707.172-2.58.834-2.765 2.117-.106.781.41 1.76 1.125 2.091 1.627.768 3.15-.198 3.467-2.196.211-1.284.622-1.642 1.998-1.747 1.588-.133 2.409-.675 2.713-1.787.278-1.02-.304-2.157-1.297-2.554-.264-.106-.873-.238-1.35-.291-1.495-.16-1.879-.424-2.038-1.39-.225-1.337-.317-1.562-.794-2.09a2.174 2.174 0 00-1.613-.73zm-4.785 4.36a2.145 2.145 0 00-.497.048c-1.469.318-2.17 2.051-1.35 3.295 1.178 1.774 3.944.953 3.97-1.177.012-1.193-.98-2.143-2.123-2.166zM2.089 14.19a2.22 2.22 0 00-.427.052c-2.158.476-2.237 3.626-.106 4.182.53.145.582.145 1.111.013 1.191-.318 1.866-1.456 1.549-2.607-.278-1.02-1.144-1.664-2.127-1.64zm19.824.008c-.233.002-.477.058-.784.162-1.39.477-1.866 2.092-.98 3.336.557.794 1.96 1.058 2.82.516 1.416-.874 1.363-3.057-.093-3.746-.38-.186-.663-.271-.963-.268z" />
+        </svg>
+        <span className="px-2 py-1.5 rounded-md bg-surface-100 dark:bg-surface-800/75 font-mono text-sm uppercase text-surface-400 dark:text-surface-500 whitespace-nowrap leading-3 tracking-tight transition-colors group-hover:text-(--high-contrast-text-color)">react router</span>
+    </NextLink>
+    {/* <NextLink href="/docs/tailwind/guides/installation/manual" className="flex relative items-center justify-between gap-6 pb-2 pt-8 flex-col overflow-hidden bg-(--code-figure-background) rounded-lg shadow-[0_0_0_0.5px_rgba(0,0,0,0.2)] dark:shadow-[0_0_0_0.5px_rgba(255,255,255,0.15)] group transition duration-200 hover:-translate-y-0.5 hover:shadow-[0_0_0_1px_var(--p-primary-color)] dark:hover:shadow-[0_0_0_1px_var(--p-primary-color)]">
+        <svg className="size-12 text-surface-700 dark:text-surface-200 transition-transform duration-200 group-hover:scale-110" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" aria-label="React" >
+            <path d="M14.23 12.004a2.236 2.236 0 0 1-2.235 2.236 2.236 2.236 0 0 1-2.236-2.236 2.236 2.236 0 0 1 2.235-2.236 2.236 2.236 0 0 1 2.236 2.236zm2.648-10.69c-1.346 0-3.107.96-4.888 2.622-1.78-1.653-3.542-2.602-4.887-2.602-.41 0-.783.093-1.106.278-1.375.793-1.683 3.264-.973 6.365C1.98 8.917 0 10.42 0 12.004c0 1.59 1.99 3.097 5.043 4.03-.704 3.113-.39 5.588.988 6.38.32.187.69.275 1.102.275 1.345 0 3.107-.96 4.888-2.624 1.78 1.654 3.542 2.603 4.887 2.603.41 0 .783-.09 1.106-.275 1.374-.792 1.683-3.263.973-6.365C22.02 15.096 24 13.59 24 12.004c0-1.59-1.99-3.097-5.043-4.032.704-3.11.39-5.587-.988-6.38-.318-.184-.688-.277-1.092-.278zm-.005 1.09v.006c.225 0 .406.044.558.127.666.382.955 1.835.73 3.704-.054.46-.142.945-.25 1.44-.96-.236-2.006-.417-3.107-.534-.66-.905-1.345-1.727-2.035-2.447 1.592-1.48 3.087-2.292 4.105-2.295zm-9.77.02c1.012 0 2.514.808 4.11 2.28-.686.72-1.37 1.537-2.02 2.442-1.107.117-2.154.298-3.113.538-.112-.49-.195-.964-.254-1.42-.23-1.868.054-3.32.714-3.707.19-.09.4-.127.563-.132zm4.882 3.05c.455.468.91.992 1.36 1.564-.44-.02-.89-.034-1.345-.034-.46 0-.915.01-1.36.034.44-.572.895-1.096 1.345-1.565zM12 8.1c.74 0 1.477.034 2.202.093.406.582.802 1.203 1.183 1.86.372.64.71 1.29 1.018 1.946-.308.655-.646 1.31-1.013 1.95-.38.66-.773 1.288-1.18 1.87-.728.063-1.466.098-2.21.098-.74 0-1.477-.035-2.202-.093-.406-.582-.802-1.204-1.183-1.86-.372-.64-.71-1.29-1.018-1.946.303-.657.646-1.313 1.013-1.954.38-.66.773-1.286 1.18-1.868.728-.064 1.466-.098 2.21-.098zm-3.635.254c-.24.377-.48.763-.704 1.16-.225.39-.435.782-.635 1.174-.265-.656-.49-1.31-.676-1.947.64-.15 1.315-.283 2.015-.386zm7.26 0c.695.103 1.365.23 2.006.387-.18.632-.405 1.282-.66 1.933-.2-.39-.41-.783-.64-1.174-.225-.392-.465-.774-.705-1.146zm3.063.675c.484.15.944.317 1.375.498 1.732.74 2.852 1.708 2.852 2.476-.005.768-1.125 1.74-2.857 2.475-.42.18-.88.342-1.355.493-.28-.958-.646-1.956-1.1-2.98.45-1.017.81-2.01 1.085-2.964zm-13.395.004c.278.96.645 1.957 1.1 2.98-.45 1.017-.812 2.01-1.086 2.964-.484-.15-.944-.318-1.37-.5-1.732-.737-2.852-1.706-2.852-2.474 0-.768 1.12-1.742 2.852-2.476.42-.18.88-.342 1.356-.494zm11.678 4.28c.265.657.49 1.312.676 1.948-.64.157-1.316.29-2.016.39.24-.375.48-.762.705-1.158.225-.39.435-.788.636-1.18zm-9.945.02c.2.392.41.783.64 1.175.23.39.465.772.705 1.143-.695-.102-1.365-.23-2.006-.386.18-.63.406-1.282.66-1.933zM17.92 16.32c.112.493.2.968.254 1.423.23 1.868-.054 3.32-.714 3.708-.147.09-.338.128-.563.128-1.012 0-2.514-.807-4.11-2.28.686-.72 1.37-1.536 2.02-2.44 1.107-.118 2.154-.3 3.113-.54zm-11.83.01c.96.234 2.006.415 3.107.532.66.905 1.345 1.727 2.035 2.446-1.595 1.483-3.092 2.295-4.11 2.295-.22-.005-.406-.05-.553-.132-.666-.38-.955-1.834-.73-3.703.054-.46.142-.944.25-1.438zm4.56.64c.44.02.89.034 1.345.034.46 0 .915-.01 1.36-.034-.44.572-.895 1.095-1.345 1.565-.455-.47-.91-.993-1.36-1.565z" />
+        </svg>
+        <span className="px-2 py-1.5 rounded-md bg-surface-100 dark:bg-surface-800/75 font-mono text-sm uppercase text-surface-400 dark:text-surface-500 whitespace-nowrap leading-3 tracking-tight transition-colors group-hover:text-(--high-contrast-text-color)">manual</span>
+    </NextLink> */}
+</div>

package/data/llms/tailwind/guides/introduction.md

@@ -0,0 +1,20 @@
+# Tailwind
+
+Copy-paste React components styled with Tailwind CSS. Own the code, customize everything.
+
+## Overview
+
+Tailwind components are built with Tailwind CSS utility classes, no theme file, no runtime dependency. You copy the component file into your project and modify it however you want. Inspired by the shadcn/ui approach.
+
+Use Tailwind mode when you want full ownership of your components and prefer styling with utility classes. Every component is a single file you control.
+
+## What you get
+
+- 50+ components written in plain Tailwind CSS
+- Installable via CLI, components live in your codebase
+- Composable API powered by the primitive layer
+- Accessibility handled automatically
+
+## Next steps
+
+Start with [Installation](/docs/tailwind/guides/installation/nextjs) or open any component page to see the install command.

package/data/llms/tailwind/guides/misc/accessibility.md

@@ -0,0 +1,205 @@
+# Accessibility
+
+PrimeReact has WCAG level compliance, refer to the accessibility documentation of each component for detailed information.
+
+import { CheckCircle } from '@primeicons/react/check-circle'
+import { TimesCircle } from '@primeicons/react/times-circle'
+
+## Introduction
+
+According to the World Health Organization, 15% of the world population has a disability to some degree. As a result, accessibility features in any context such as a ramp for wheelchair users or a multimedia with captions are crucial to ensure content can be consumed by anyone.
+
+Types of disabilities are diverse so you need to know your audience well and how they interact with the content created. There four main categories;
+
+### Visual Impairments
+
+Blindness, low-level vision or color blindness are the common types of visual impairments. Screen magnifiers and the color blind mode are usually built-in features of the browsers whereas for people who rely on screen readers, page developers are required to make sure content is readable by the readers. Popular readers are NVDA , JAWS and ChromeVox .
+
+### Hearing Impairments
+
+Deafness or hearing loss refers to the inability to hear sounds totally or partially. People with hearing impairments use assistive devices however it may not be enough when interacting with a web page. Common implementation is providing textual alternatives, transcripts and captions for content with audio.
+
+### Mobility Impairments
+
+People with mobility impairments have disabilities related to movement due to loss of a limb, paralysis or other varying reasons. Assistive technologies like a head pointer is a device to interact with a screen whereas keyboard or a trackpad remain as solutions for people who are not able to utilize a mouse.
+
+### Cognitive Impairments
+
+Cognitive impairments have a wider range that includes people with learning disabilities, depression and dyslexia. A well designed content also leads to better user experience for people without disabilities so designing for cognitive impairments result in better design for any user.
+
+## WCAG
+
+Correct page structure with the aid of assistive technologies are the core ingridients for an accessible web content. HTML is based on an accessible foundation, form controls can be used by keyboard by default and semantic HTML is easier to be processed by a screen reader.
+
+[WCAG](https://www.w3.org/WAI/standards-guidelines/wcag/) refers to **Web Content Accessibility Guideline**, a standard managed by the WAI (Web Accessibility Initiative) of W3C (World Wide Web Consortium). WCAG consists of recommendations for making the web content more accessible. PrimeReact components aim high level of WCAG compliancy in the near future.
+
+Various countries around the globe have governmental policies regarding web accessibility as well. Most well known of these are Section 508 in the US and [Web Accessibility Directive](https://digital-strategy.ec.europa.eu/en/policies/web-accessibility) of the European Union.
+
+## Form Controls
+
+Native form elements should be preferred instead of elements that are meant for other purposes like presentation. As an example, button below is rendered as a form control by the browser, can receive focus via tabbing and can be used with space key as well to trigger.
+
+```tsx
+<button onClick={(event) => onButtonClick(event)}>Click</button>
+```
+
+On the other hand, a fancy css based button using a div has no keyboard or screen reader support.
+
+```tsx
+<div className="fancy-button" onClick={(event) => onButtonClick(event)}>
+    Click
+</div>
+```
+
+`tabIndex` is required to make a div element accessible in addition to use a keydown to bring the keyboard support back. To avoid the overload and implementing functionality that is already provided by the browser, native form controls should be preferred.
+
+```tsx
+<div className="fancy-button" onClick={(event) => onClick(event)} onKeyDown={(event) => onKeyDown(event)} tabIndex="0">
+    Click
+</div>
+```
+
+Form components must be related to another element that describes what the form element is used for. This is usually achieved with the `label` element.
+
+```tsx
+<label htmlFor="myinput">Username:</label>
+<input id="myinput" type="text" name="username" />
+```
+
+## Semantic HTML
+
+HTML offers various element to organize content on a web page that screen readers are aware of. Preferring Semantic HTML for good semantics provide out of the box support for reader which is not possible when regular `div` elements with classes are used. Consider the following example that do not mean too much for readers.
+
+```tsx
+<div className="header">
+    <div className="header-text">Header</div>
+</div>
+
+<div className="nav"></div>
+
+<div className="main">
+    <div className="content">
+    </div>
+
+    <div className="sidebar">
+    </div>
+</div>
+
+<div className="footer"></div>
+```
+
+Same layout can be achieved using the semantic elements with screen reader support built-in.
+
+```tsx
+<header>
+    <h1>Header</h1>
+</header>
+
+<nav></nav>
+
+<main>
+    <article></article>
+
+    <aside></aside>
+
+</main>
+
+<footer></footer>
+```
+
+## WAI ARIA
+
+ARIA refers to "Accessible Rich Internet Applications" is a suite to fill the gap where semantic HTML is inadequate. These cases are mainly related to rich UI components/widgets. Although browser support for rich UI components such as a datepicker or inputcolor has been improved over the past years many web developers still utilize UI components derived from standard HTML elements created by them or by other projects like PrimeReact. These types of components must provide keyboard and screen reader support, the latter case is where the WAI-ARIA is utilized.
+
+ARIA consists of roles, properties and attributes. **Roles** define what the element is mainly used for e.g. `checkbox`, `dialog`, `tablist` whereas **States** and **Properties** define the metadata of the element like `aria-checked`, `aria-disabled`.
+
+Consider the following case of a native checkbox. It has built-in keyboard and screen reader support.
+
+```tsx
+<input type="checkbox" value="Prime" name="ui" checked />
+```
+
+A fancy checkbox with css animations might look more appealing but accessibility might be lacking. Checkbox below may display a checked font icon with animations however it is not tabbable, cannot be checked with space key and cannot be read by a reader.
+
+```tsx
+<div className="fancy-checkbox">{checked && <i className="checked-icon" />}</div>
+```
+
+One alternative is using ARIA roles for readers and use javascript for keyboard support. Notice the usage of `aria-labelledby` as a replacement of the `label` tag with `htmlFor`.
+
+```tsx
+<span id="chk-label">Remember Me</span>
+<div className="fancy-checkbox" role="checkbox" aria-checked="false" tabIndex="0" aria-labelledby="chk-label"
+    onClick={toggle} onKeyDown={(event) => onKeyDown(event)}>
+    {checked && <i className="checked-icon" />}
+</div>
+```
+
+However the best practice is combining semantic HTML for accessibility while keeping the design for UX. This approach involves hiding a native checkbox for accessibility and using javascript events to update its state. Notice the usage of `p-hidden-accessible` that hides the elements from the user but not from the screen reader.
+
+```tsx
+<label htmlFor="chkbox">Remember Me</label>
+<div className="fancy-checkbox" onClick={toggle}>
+    <input className="p-hidden-accessible" type="checkbox" id="chkbox" onFocus={updateParentVisuals} onBlur={updateParentVisuals}
+        onKeyDown={(event) => onKeyDown(event)} />
+    {checked && <i className="checked-icon" />}
+</div>
+```
+
+A working sample is the PrimeReact checkbox that is tabbable, keyboard accessible and is compliant with a screen reader. Instead of ARIA roles it relies on a hidden native checkbox.
+
+```tsx
+import { Checkbox } from '@/components/ui/checkbox';
+import { Label } from '@/components/ui/label';
+
+export default function AccessibilityCheckboxDemo() {
+    return (
+        <div className="flex items-center justify-center gap-2">
+            <Checkbox inputId="chkbox" />
+            <Label htmlFor="chkbox">Remember Me</Label>
+        </div>
+    );
+}
+```
+
+## Colors
+
+Colors on a web page should aim a contrast ratio of at least 4.5:1 and consider a selection of colors that do not cause vibration.
+
+### Good Contrast
+
+Color contrast between the background and the foreground content should be sufficient enough to ensure readability. Example below displays two cases with good and bad samples.
+
+<div className="flex">
+    <div className="h-32 w-32 flex justify-center items-center mr-8 font-bold bg-blue-600 rounded-lg">
+        <span className="text-white">GOOD</span>
+    </div>
+    <div className="h-32 w-32 flex justify-center items-center mr-8 font-bold bg-blue-400 rounded-lg">
+        <span className="text-white">BAD</span>
+    </div>
+</div>
+
+### Vibration
+
+Color vibration is leads to an illusion of motion due to choosing colors that have low visibility against each other. Color combinations need to be picked with caution to avoid vibration.
+
+<div className="flex">
+    <div className="h-32 w-32 flex justify-center items-center mr-8 font-bold bg-pink-500 rounded-lg">
+        <span className="text-blue-500">VIBRATE</span>
+    </div>
+</div>
+
+### Dark Mode
+
+Highly saturated colors should be avoided when used within a dark design scheme as they cause eye strain. Instead desaturated colors should be preferred.
+
+<div className="flex">
+    <div className="h-32 w-32 flex flex-col justify-center items-center mr-8 font-bold bg-gray-900 rounded-lg">
+        <span className="text-indigo-500">Indigo 500</span>
+        <TimesCircle className="text-indigo-500 mt-4 text-xl" />
+    </div>
+    <div className="h-32 w-32 flex flex-col justify-center items-center mr-8 font-bold bg-gray-900 rounded-lg">
+        <span className="text-indigo-200">Indigo 200</span>
+        <CheckCircle className="text-indigo-200 mt-4 text-xl" />
+    </div>
+</div>

package/data/llms/tailwind/guides/misc/passthrough.md

@@ -0,0 +1,95 @@
+# Pass Through
+
+The Pass Through attributes is an API to access the internal DOM Structure of the components.
+
+## Introduction
+
+In traditional 3rd party UI libraries, users are limited to the API provided by component author. This API commonly consists of props, events and slots. Whenever a requirement emerges for a new customization option in the API, the component
+author needs to develop and publish it with a new release.
+
+Vision of PrimeTek is _Your components, not ours_. The pass through feature is a key element to implement this vision by exposing the component internals in order to apply arbitrary attributes and listeners to the DOM elements. The primary
+advantage of this approach is that it frees you from being restricted by the main component API. We recommend considering the pass-through feature whenever you need to tailor a component that lacks a built-in feature for your specific
+requirement.
+
+## Basic
+
+Each component has a special `pt` property to define an object with keys corresponding to the available DOM elements. Each value can either be a string, an object or a function that returns a string or an object to define the
+arbitrary properties to apply to the element such as styling, aria, data-\* or custom attributes. If the value is a string or a function that returns a string, it is considered as a className definition and added to the className attribute of the
+element. Every component documentation has a dedicated section to document the available section names exposed via PT.
+
+Most common usage of `pt` is styling and customization. Example below styles an unstyled Panel component with Tailwind CSS library.
+
+```tsx
+import { Panel } from 'primereact/panel';
+
+export default function BasicDemo() {
+    return (
+        <div>
+            <Panel.Root
+                pt={{
+                    root: 'border border-primary rounded-xl p-4',
+                    header: {
+                        id: 'myPanelHeader',
+                        style: {
+                            userSelect: 'none'
+                        },
+                        className: 'flex items-center justify-between text-primary font-bold'
+                    },
+                    content: { className: 'text-primary-700 dark:text-primary-200 mt-4' },
+                    title: 'text-xl'
+                }}
+            >
+                <Panel.Header>
+                    <Panel.Title> Header</Panel.Title>
+                </Panel.Header>
+                <Panel.Content>
+                    <p>
+                        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                        enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
+                        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
+                        proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+                    </p>
+                </Panel.Content>
+            </Panel.Root>
+        </div>
+    );
+}
+```
+
+## Global
+
+Defines the shared pass through properties per component type. For example, with the configuration below all panel headers have the `bg-primary` style class and the all autocomplete components have a fixed width. These settings can be overriden by a particular component as components `pt` property has higher precedence over global `pt`.
+
+```tsx
+pt: {
+    panel: {
+        header: {
+            className: 'bg-primary text-primary-contrast'
+        }
+    },
+    autocomplete: {
+        input: {
+            root: 'w-64' // OR { class: 'w-64' }
+        }
+    }
+}
+```
+
+## Custom CSS
+
+The `global` property has a `css` option to define custom css that belongs to a global `pt` configuration. Common use case of this feature is defining global styles and animations related to the pass through configuration.
+
+```tsx
+pt: {
+    global: {
+        css: `
+            .my-button {
+                border-width: 2px;
+            }
+        `
+    },
+    button: {
+        root: 'my-button'
+    }
+}
+```

package/data/llms/tailwind/guides/misc/rtl.md

@@ -0,0 +1,27 @@
+# RTL Support
+
+Right-to-left direction support of PrimeReact.
+
+## Configuration
+
+The PrimeReact components natively support Right-to-Left (RTL) text direction through a modern CSS implementation utilizing FlexBox and classes like `*-inline-start` and `*-block-end`. Consequently, no JavaScript configuration is necessary; setting the document's text direction to RTL is sufficient to enable this feature.
+
+The RTL setting can either be set using the `dir` attribute or with the `direction` style property.
+
+### With Markup
+
+```html
+<html dir="rtl"></html>
+```
+
+### With CSS
+
+```css
+html {
+    direction: rtl;
+}
+```
+
+## Limitations
+
+RTL is widely supported by the UI suite except the Galleria and Carousel components. These components will be enhanced with a modern implementation in upcoming versions with built-in support for RTL.