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

package/data/llms/llms-full.txt

@@ -35481,7 +35481,6 @@ import { StarFill } from '@primeicons/react/star-fill';
 import { DataTable } from '@primereact/ui/datatable';
 import { Rating } from '@primereact/ui/rating';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -35549,7 +35548,7 @@ export default function Preview() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={48}
@@ -36088,7 +36087,6 @@ One row at a time. Clicking a different row replaces the previous selection.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSelectionEvent } from '@primereact/ui/datatable';
@@ -36151,7 +36149,7 @@ export default function SingleSelectionDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -36211,7 +36209,6 @@ Multiple rows without a dedicated column. Pair with `metaKeySelection` so Ctrl/C
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { ShoppingCart } from '@primeicons/react/shopping-cart';
 import { Database } from '@primeicons/react/database';
@@ -36310,7 +36307,7 @@ export default function MultipleSelectionDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -36706,7 +36703,6 @@ Arrow Up/Down moves focus between rows, Space or Enter toggles the focused row,
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSelectionEvent } from '@primereact/ui/datatable';
@@ -36786,7 +36782,7 @@ export default function KeyboardDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -36861,7 +36857,6 @@ Clicking a column header cycles through ascending, descending, and unsorted.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -36958,7 +36953,7 @@ export default function SortDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -37018,7 +37013,6 @@ Hold Ctrl/Cmd and click multiple column headers to sort by several fields at onc
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -37115,7 +37109,7 @@ export default function MultiSortDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -37181,7 +37175,6 @@ Apply an initial sort on mount. Use `defaultSortField` + `defaultSortOrder` for
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from '@primereact/ui/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -37278,7 +37271,7 @@ export default function PresortDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -37360,7 +37353,6 @@ import { Badge } from '@primereact/ui/badge';
 import { DataTable } from '@primereact/ui/datatable';
 import { OverlayBadge } from '@primereact/ui/overlaybadge';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -37454,7 +37446,7 @@ export default function PresortMultiDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -37526,7 +37518,6 @@ import type { DataTablePaginationInstance } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
 import { Paginator } from '@primereact/ui/paginator';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import type { PaginatorPagesInstance } from '@primereact/ui/paginator';
 import * as React from 'react';
 
@@ -37578,7 +37569,7 @@ export default function PaginationDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -38633,7 +38624,6 @@ Inline cell editing with `CellEditor`, `CellEditorDisplay` and `CellEditorConten
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { ChevronDown } from '@primeicons/react/chevron-down';
 import { Database } from '@primeicons/react/database';
@@ -38721,7 +38711,7 @@ export default function CellEditDemo() {
                             {({ item, index }: { item: any; index: number }) => (
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                             alt={item.name}
                                             width={40}
@@ -38870,7 +38860,6 @@ Cell editing composes with row selection: clicks inside an editable cell start e
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Check } from '@primeicons/react/check';
 import { Database } from '@primeicons/react/database';
@@ -39023,7 +39012,7 @@ export default function CellEditSelectionDemo() {
                                         </DataTable.Selection>
                                     </DataTable.Cell>
                                     <DataTable.Cell>
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                             alt={item.name}
                                             width={36}
@@ -39174,7 +39163,6 @@ Row-level editing with `RowEditor`, `RowEditorInit`, `RowEditorSave` and `RowEdi
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Check } from '@primeicons/react/check';
 import { Database } from '@primeicons/react/database';
@@ -39283,7 +39271,7 @@ export default function RowEditDemo() {
                                                 <DataTable.CellEditor field="name" rowIndex={index} rowData={item}>
                                                     <DataTable.CellEditorDisplay>
                                                         <div className="flex items-center gap-3">
-                                                            <Image
+                                                            <img
                                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                                 alt={item.name}
                                                                 width={40}
@@ -39712,7 +39700,6 @@ import { ProductService, type Product } from '@/shared/services/product.service'
 import { Database } from '@primeicons/react/database';
 import { DataTable } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -39765,7 +39752,7 @@ export default function ResizeDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -39817,7 +39804,6 @@ export default function ResizeDemo() {
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { DataTable } from '@primereact/ui/datatable';
@@ -39877,7 +39863,7 @@ export default function ResizeExpandDemo() {
                                 <DataTable.Row key={item.id}>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -39942,7 +39928,6 @@ import { Database } from '@primeicons/react/database';
 import type { DataTableColumnReorderEvent } from '@primereact/ui/datatable';
 import { DataTable } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -39975,7 +39960,7 @@ function renderCell(field: string, item: Product) {
         case 'name':
             return (
                 <div className="flex items-center gap-3">
-                    <Image
+                    <img
                         src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                         alt={item.name}
                         width={36}
@@ -40084,7 +40069,6 @@ Drag and drop rows to reorder data.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Bars } from '@primeicons/react/bars';
 import { Database } from '@primeicons/react/database';
@@ -40149,7 +40133,7 @@ export default function RowReorderDemo() {
                                     </DataTable.Cell>
                                     <DataTable.Cell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -40220,7 +40204,6 @@ import { Checkbox } from '@primereact/ui/checkbox';
 import { DataTable } from '@primereact/ui/datatable';
 import { Popover } from '@primereact/ui/popover';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 interface ColumnDef {
@@ -40256,7 +40239,7 @@ function renderCell(field: string, item: Product) {
         case 'name':
             return (
                 <div className="flex items-center gap-3">
-                    <Image
+                    <img
                         src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                         alt={item.name}
                         width={36}
@@ -41998,7 +41981,6 @@ Export table data to CSV with customizable fields and headers.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { FileExport } from '@primeicons/react/file-export';
 import { Database } from '@primeicons/react/database';
@@ -42066,7 +42048,7 @@ export default function ExportDemo() {
                             <DataTable.Row key={item.id}>
                                 <DataTable.Cell>
                                     <div className="flex items-center gap-3">
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                             alt={item.name}
                                             width={36}
@@ -42425,7 +42407,6 @@ import { Spinner } from '@primeicons/react/spinner';
 import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -42490,7 +42471,7 @@ export default function LoadingOverlayDemo() {
                                     <DataTable.Row key={item.id}>
                                         <DataTable.Cell>
                                             <div className="flex items-center gap-3">
-                                                <Image
+                                                <img
                                                     src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                     alt={item.name}
                                                     width={40}
@@ -42542,7 +42523,6 @@ import { Button } from '@primereact/ui/button';
 import { DataTable } from '@primereact/ui/datatable';
 import { Skeleton } from '@primereact/ui/skeleton';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -42633,7 +42613,7 @@ export default function LoadingSkeletonDemo() {
                                     <DataTable.Row key={item.id}>
                                         <DataTable.Cell>
                                             <div className="flex items-center gap-3">
-                                                <Image
+                                                <img
                                                     src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                     alt={item.name}
                                                     width={40}
@@ -43737,7 +43717,6 @@ DataView displays data in grid or list layout with pagination and sorting featur
 import { ProductService } from '@/shared/services/product.service';
 import { Button } from '@primereact/ui/button';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 import { Heart } from '@primeicons/react/heart';
@@ -43791,14 +43770,14 @@ export default function Preview() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -43872,7 +43851,6 @@ Displays a list of items with support for layout switching.
 import { ProductService } from '@/shared/services/product.service';
 import { Button } from '@primereact/ui/button';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 import { Heart } from '@primeicons/react/heart';
@@ -43926,14 +43904,14 @@ export default function BasicDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -43999,7 +43977,6 @@ import { StarFill } from '@primeicons/react/star-fill';
 import { Button } from '@primereact/ui/button';
 import { Paginator, type PaginatorPagesInstance, type PaginatorRootChangeEvent } from '@primereact/ui/paginator';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 
@@ -44052,14 +44029,14 @@ export default function PaginationDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -44155,7 +44132,6 @@ import { Button } from '@primereact/ui/button';
 import { Tag } from '@primereact/ui/tag';
 import { ToggleButton } from '@primereact/ui/togglebutton';
 import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 import { Heart } from '@primeicons/react/heart';
@@ -44233,14 +44209,14 @@ export default function SortDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -44305,7 +44281,6 @@ import { Button } from '@primereact/ui/button';
 import { Tag } from '@primereact/ui/tag';
 import { ToggleButton } from '@primereact/ui/togglebutton';
 import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
-import Image from 'next/image';
 import { DataView } from '@primereact/ui/dataview';
 import * as React from 'react';
 
@@ -44355,14 +44330,14 @@ export default function LayoutDemo() {
                         className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                     >
                         <div className="md:w-40 relative">
-                            <Image
+                            <img
                                 className="mx-auto rounded w-full"
                                 src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                 alt={product.name}
                                 width={160}
                                 height={160}
                             />
-                            <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                            <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                 {product.inventoryStatus}
                             </Tag>
                         </div>
@@ -44416,14 +44391,14 @@ export default function LayoutDemo() {
                             <div className="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                                 <div className="flex justify-center">
                                     <div className="relative mx-auto">
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                             alt={product.name}
                                             width={300}
                                             height={200}
                                             className="rounded"
                                         />
-                                        <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                        <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                             {product.inventoryStatus}
                                         </Tag>
                                     </div>
@@ -47489,7 +47464,7 @@ export default function Preview() {
                                         <Label htmlFor="name" className="text-sm font-semibold">
                                             Name
                                         </Label>
-                                        <InputText id="name" defaultValue="Amanda Miller" />
+                                        <InputText data-autofocus id="name" defaultValue="Amanda Miller" />
                                     </div>
                                     <div className="flex flex-col gap-1">
                                         <Label htmlFor="username" className="text-sm font-semibold">
@@ -47583,7 +47558,7 @@ export default function BasicDemo() {
                                 <div className="flex flex-col gap-4">
                                     <div className="flex flex-col gap-1.5">
                                         <Label htmlFor="name">Name</Label>
-                                        <InputText id="name" defaultValue="Amanda Miller" />
+                                        <InputText id="name" defaultValue="Amanda Miller" data-autofocus />
                                     </div>
                                     <div className="flex flex-col gap-1.5">
                                         <Label htmlFor="email">Email</Label>
@@ -47615,6 +47590,7 @@ A dialog can be repositioned by dragging its header when the `draggable` prop is
 import { Times } from '@primeicons/react/times';
 import { Button } from '@primereact/ui/button';
 import { Dialog } from '@primereact/ui/dialog';
+import { Textarea } from '@primereact/ui/textarea';
 
 export default function DraggableDemo() {
     return (
@@ -47638,8 +47614,10 @@ export default function DraggableDemo() {
                                     <p className="text-sm text-surface-500 dark:text-surface-400 mt-0 mb-0">
                                         Drag this dialog by its header to reposition it anywhere on the screen.
                                     </p>
-                                    <textarea
-                                        className="w-full h-32 p-3 rounded-md border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary-500"
+                                    <Textarea
+                                        data-autofocus
+                                        rows={4}
+                                        className="w-full resize-none"
                                         placeholder="Type your note here..."
                                         defaultValue="Remember to review the design specs for the new dashboard layout before the meeting tomorrow."
                                     />
@@ -47666,7 +47644,6 @@ The position of the dialog can be customized with the `position` property. The a
 
 ```tsx
 'use client';
-import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight } from '@primeicons/react';
 import { Times } from '@primeicons/react/times';
 import { DialogRootChangeEvent, DialogRootProps } from '@primereact/ui/dialog';
 import { Button } from '@primereact/ui/button';
@@ -47689,39 +47666,31 @@ export default function PositionDemo() {
             <div className="flex flex-wrap justify-center gap-2 mb-2">
                 <Button onClick={() => openPosition('left')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Left
-                    <ArrowLeft />
                 </Button>
                 <Button onClick={() => openPosition('right')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Right
-                    <ArrowRight />
                 </Button>
             </div>
             <div className="flex flex-wrap justify-center gap-2 mb-2">
                 <Button onClick={() => openPosition('topleft')} severity="secondary" style={{ minWidth: '10rem' }}>
                     TopLeft
-                    <ArrowUpLeft />
                 </Button>
                 <Button onClick={() => openPosition('top')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Top
-                    <ArrowUp />
                 </Button>
                 <Button onClick={() => openPosition('topright')} severity="secondary" style={{ minWidth: '10rem' }}>
                     TopRight
-                    <ArrowUpRight />
                 </Button>
             </div>
             <div className="flex flex-wrap justify-center gap-2">
                 <Button onClick={() => openPosition('bottomleft')} severity="secondary" style={{ minWidth: '10rem' }}>
                     BottomLeft
-                    <ArrowDownLeft />
                 </Button>
                 <Button onClick={() => openPosition('bottom')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Bottom
-                    <ArrowDown />
                 </Button>
                 <Button onClick={() => openPosition('bottomright')} severity="secondary" style={{ minWidth: '10rem' }}>
                     BottomRight
-                    <ArrowDownRight />
                 </Button>
             </div>
             <Dialog.Root open={open} onOpenChange={(e: DialogRootChangeEvent) => setOpen(e.value as boolean)} position={position} draggable={false}>
@@ -47744,7 +47713,7 @@ export default function PositionDemo() {
                                         <Label htmlFor="username" className="font-semibold">
                                             Username
                                         </Label>
-                                        <InputText id="username" />
+                                        <InputText data-autofocus id="username" />
                                     </div>
                                     <div className="flex flex-col gap-1">
                                         <Label htmlFor="email" className="font-semibold">
@@ -47932,7 +47901,7 @@ export default function ModalDemo() {
                                         <Label htmlFor="username" className="font-semibold">
                                             Username
                                         </Label>
-                                        <InputText id="username" />
+                                        <InputText data-autofocus id="username" />
                                     </div>
                                     <div className="flex flex-col gap-1">
                                         <Label htmlFor="email" className="font-semibold">
@@ -47992,7 +47961,7 @@ export default function WithoutModalDemo() {
                                         <Label htmlFor="username" className="font-semibold">
                                             Username
                                         </Label>
-                                        <InputText id="username" />
+                                        <InputText data-autofocus id="username" />
                                     </div>
                                     <div className="flex flex-col gap-1">
                                         <Label htmlFor="email" className="font-semibold">
@@ -48418,7 +48387,7 @@ export default function ResponsiveDemo() {
                                         <Label htmlFor="eventName" className="text-sm font-semibold">
                                             Event Name
                                         </Label>
-                                        <InputText id="eventName" placeholder="e.g. Team Standup" />
+                                        <InputText data-autofocus id="eventName" placeholder="e.g. Team Standup" />
                                     </div>
                                     <div className="flex flex-col md:flex-row gap-4">
                                         <div className="flex flex-col gap-1 flex-1">
@@ -49983,7 +49952,7 @@ export default function InputGroupDemo() {
                             const { state, hasFiles } = instance;
 
                             return (
-                                <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-none!">
+                                <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
                                     <Upload className="mr-2" />
                                     {hasFiles ? state.files.map((file) => file.name).join(', ') : 'Choose file'}
                                 </FileUpload.Trigger>
@@ -50000,7 +49969,7 @@ export default function InputGroupDemo() {
                             const { state, hasFiles } = instance;
 
                             return (
-                                <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-none!">
+                                <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
                                     <Upload className="mr-2" />
                                     {hasFiles ? state.files.map((file) => file.name).join(', ') : 'Choose file'}
                                 </FileUpload.Trigger>
@@ -50026,7 +49995,7 @@ export default function InputGroupDemo() {
                             const { state, hasFiles } = instance;
 
                             return (
-                                <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-none!">
+                                <FileUpload.Trigger as={Button} severity="secondary" variant="outlined" className="border-transparent!">
                                     <Upload className="mr-2" />
                                     {hasFiles ? state.files.map((file) => file.name).join(', ') : 'Browse'}
                                 </FileUpload.Trigger>
@@ -53323,71 +53292,6 @@ export default function SelectDemo() {
 }
 ```
 
-### File Upload
-
-File upload functionality can be integrated within an InputGroup for inline file selection.
-
-```tsx
-'use client';
-import { Tag as TagIcon } from '@primeicons/react';
-import { CloudUpload } from '@primeicons/react/cloud-upload';
-import { Upload } from '@primeicons/react/upload';
-import { Button } from '@primereact/ui/button';
-import { FileUpload, FileUploadRootInstance } from '@primereact/ui/fileupload';
-import { InputGroup } from '@primereact/ui/inputgroup';
-import { InputText } from '@primereact/ui/inputtext';
-
-export default function FileUploadDemo() {
-    return (
-        <div className="flex flex-col items-center justify-center gap-4 max-w-93 mx-auto">
-            <div className="flex flex-wrap items-center justify-center gap-4 w-full">
-                <InputGroup.Root className="w-fit!">
-                    <FileUpload.Root as={InputGroup.Addon} name="demo2[]" accept="image/*" maxFileSize={1000000}>
-                        {(instance: FileUploadRootInstance) => (
-                            <Button severity="secondary" variant="text" onClick={instance.choose} className="justify-start border-none">
-                                <Upload />
-                                {instance.hasFiles ? instance.state.files.map((file) => file.name).join(', ') : 'Choose file'}
-                            </Button>
-                        )}
-                    </FileUpload.Root>
-                    <InputGroup.Addon>
-                        <Button severity="secondary" variant="text" iconOnly>
-                            <CloudUpload />
-                        </Button>
-                    </InputGroup.Addon>
-                </InputGroup.Root>
-                <InputGroup.Root className="flex-1! max-w-fit!">
-                    <InputGroup.Addon>Upload</InputGroup.Addon>
-                    <FileUpload.Root as={InputGroup.Addon} name="demo1[]" accept="image/*" maxFileSize={1000000}>
-                        {(instance: FileUploadRootInstance) => (
-                            <Button severity="secondary" variant="text" onClick={instance.choose} className="justify-start border-none">
-                                <Upload />
-                                {instance.hasFiles ? instance.state.files.map((file) => file.name).join(', ') : 'Choose file'}
-                            </Button>
-                        )}
-                    </FileUpload.Root>
-                </InputGroup.Root>
-            </div>
-
-            <InputGroup.Root>
-                <InputGroup.Addon>
-                    <TagIcon />
-                </InputGroup.Addon>
-                <InputText placeholder="Label" />
-                <FileUpload.Root as={InputGroup.Addon} name="demo3[]" accept="image/*" maxFileSize={1000000}>
-                    {(instance: FileUploadRootInstance) => (
-                        <Button severity="secondary" variant="text" onClick={instance.choose} className="border-none">
-                            <Upload />
-                            {instance.hasFiles ? instance.state.files.map((file) => file.name).join(', ') : 'Browse'}
-                        </Button>
-                    )}
-                </FileUpload.Root>
-            </InputGroup.Root>
-        </div>
-    );
-}
-```
-
 ### Float Label
 
 FloatLabel visually integrates a label with its form element. Visit [FloatLabel](/docs/components/floatlabel) documentation for more information.
@@ -67374,7 +67278,6 @@ import { Search } from '@primeicons/react/search';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Select, type SelectValueChangeEvent } from '@primereact/ui/select';
-import Image from 'next/image';
 import * as React from 'react';
 
 type Language = {
@@ -67416,7 +67319,7 @@ export default function Preview() {
                     <Select.Value placeholder="Select a language">
                         {language && (
                             <span className="flex items-center gap-2">
-                                <Image
+                                <img
                                     alt={language.label}
                                     src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                                     className={`flag flag-${language.code}`}
@@ -67453,7 +67356,7 @@ export default function Preview() {
                                 {filteredLanguages.map((l, index) => (
                                     <Select.Option key={l.value} index={index} uKey={l.value} className="justify-between">
                                         <div className="flex items-center gap-2">
-                                            <Image
+                                            <img
                                                 alt={l.label}
                                                 src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                                                 className={`flag flag-${l.code}`}
@@ -68029,7 +67932,6 @@ import { SelectValueChangeEvent } from '@primereact/ui/select';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Select } from '@primereact/ui/select';
-import Image from 'next/image';
 import * as React from 'react';
 
 type Country = {
@@ -68094,7 +67996,7 @@ export default function FilterDemo() {
                                 {filteredCountries.map((country, index) => (
                                     <Select.Option key={country.code} index={index} uKey={country.code}>
                                         <div className="flex items-center gap-2">
-                                            <Image
+                                            <img
                                                 alt={country.name}
                                                 src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                                                 className={`flag flag-${country.code.toLowerCase()} mr-2`}
@@ -71665,7 +71567,6 @@ Image filter implementation using multiple sliders.
 import { Slider } from '@primereact/ui/slider';
 import { ToggleButton } from '@primereact/ui/togglebutton';
 import { ToggleButtonGroup, type ToggleButtonGroupValueChangeEvent } from '@primereact/ui/togglebuttongroup';
-import Image from 'next/image';
 import { SliderRootChangeEvent } from '@primereact/ui/slider';
 import * as React from 'react';
 
@@ -71681,7 +71582,7 @@ export default function FilterDemo() {
 
     return (
         <div className="flex flex-col items-center justify-center">
-            <Image
+            <img
                 alt="user header"
                 className="w-80 rounded mb-6"
                 src="https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg"
@@ -73401,7 +73302,6 @@ import { Divider } from '@primereact/ui/divider';
 import { InputText } from '@primereact/ui/inputtext';
 import { Stepper } from '@primereact/ui/stepper';
 import { ToggleButton } from '@primereact/ui/togglebutton';
-import Image from 'next/image';
 
 export default function TemplateDemo() {
     return (
@@ -73576,7 +73476,7 @@ export default function TemplateDemo() {
                                     <div className="flex flex-col gap-2 mx-auto" style={{ minHeight: '16rem', maxWidth: '24rem' }}>
                                         <div className="text-center mt-4 mb-4 text-xl font-semibold">Account created successfully</div>
                                         <div className="flex justify-center">
-                                            <Image
+                                            <img
                                                 alt="logo"
                                                 width={240}
                                                 height={160}
@@ -77870,34 +77770,34 @@ import { Search } from '@primeicons/react/search';
 export default function CustomDemo() {
     return (
         <Toolbar.Root
-            className="max-[768px]:flex-col max-[768px]:items-start"
+            className="@container"
             style={{ borderRadius: '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }}
         >
-            <Toolbar.Start className="max-[768px]:flex-wrap gap-y-2">
+            <Toolbar.Start>
                 <div className="flex items-center gap-1">
                     <i className="pi pi-prime text-xl" style={{ color: 'var(--p-primary-400)' }} />
                     <span className="font-bold text-lg ml-2" style={{ color: 'var(--p-surface-0)' }}>
                         Brand
                     </span>
                 </div>
-                <div className="ml-6 flex gap-1 flex-wrap max-[768px]:ml-0">
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                <div className="ml-6 hidden @min-[620px]:flex gap-1">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Products
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Solutions
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Resources
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Pricing
                     </Button>
                 </div>
             </Toolbar.Start>
-            <Toolbar.End className="max-[768px]:w-full">
-                <div className="flex items-center gap-2 flex-wrap">
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+            <Toolbar.End>
+                <div className="flex items-center gap-2">
+                    <Button variant="text" size="small" iconOnly aria-label="Search" className="text-surface-0! hover:bg-surface-700!">
                         <Search />
                     </Button>
                     <Button severity="contrast" size="small">
@@ -78083,6 +77983,52 @@ export default function BasicDemo() {
 }
 ```
 
+### Standalone
+
+`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.
+
+```tsx
+import { Button } from '@primereact/ui/button';
+import { Tooltip } from '@primereact/ui/tooltip';
+
+export default function StandaloneDemo() {
+    return (
+        <div className="flex items-center justify-center gap-4">
+            {/* No Tooltip.Manager wrapper — each Tooltip.Root works on its own */}
+            <Tooltip.Root>
+                <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
+                    Default delays
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                    <Tooltip.Positioner sideOffset={8}>
+                        <Tooltip.Popup>
+                            <Tooltip.Arrow />
+                            <div className="font-semibold text-sm">No manager needed</div>
+                            <div className="opacity-75 text-sm mt-1">Used standalone, without a Tooltip.Manager.</div>
+                        </Tooltip.Popup>
+                    </Tooltip.Positioner>
+                </Tooltip.Portal>
+            </Tooltip.Root>
+
+            <Tooltip.Root openDelay={1200} closeDelay={800}>
+                <Tooltip.Trigger as={Button} variant="outlined" severity="secondary">
+                    1200ms open · 800ms close
+                </Tooltip.Trigger>
+                <Tooltip.Portal>
+                    <Tooltip.Positioner sideOffset={8}>
+                        <Tooltip.Popup>
+                            <Tooltip.Arrow />
+                            <div className="font-semibold text-sm">Independent timing</div>
+                            <div className="opacity-75 text-sm mt-1">Waits 1200ms to open, lingers 800ms after you leave.</div>
+                        </Tooltip.Popup>
+                    </Tooltip.Positioner>
+                </Tooltip.Portal>
+            </Tooltip.Root>
+        </div>
+    );
+}
+```
+
 ### Arrow
 
 Use `Tooltip.Arrow` to display an arrow on the tooltip.
@@ -92509,7 +92455,6 @@ import {
 import { Tag } from '@/components/ui/tag';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Database } from '@primeicons/react/database';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -92557,7 +92502,7 @@ export default function Preview() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={48}
@@ -92694,7 +92639,6 @@ import {
 } from '@/components/ui/datatable';
 import { Tag } from '@/components/ui/tag';
 import { ProductService, type Product } from '@/shared/services/product.service';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -92742,7 +92686,7 @@ export default function BasicDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -92885,7 +92829,6 @@ One row at a time. Clicking a different row replaces the previous selection.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSelectionEvent } from 'primereact/datatable';
@@ -92960,7 +92903,7 @@ export default function SingleSelectionDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -93020,7 +92963,6 @@ Multiple rows without a dedicated column. Pair with `metaKeySelection` so Ctrl/C
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { ShoppingCart } from '@primeicons/react/shopping-cart';
 import { Database } from '@primeicons/react/database';
@@ -93131,7 +93073,7 @@ export default function MultipleSelectionDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -93315,7 +93257,6 @@ Arrow Up/Down moves focus between rows, Space or Enter toggles the focused row,
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSelectionEvent } from 'primereact/datatable';
@@ -93407,7 +93348,7 @@ export default function KeyboardDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -93493,7 +93434,6 @@ import { SortAlt } from '@primeicons/react/sort-alt';
 import { SortAmountDown } from '@primeicons/react/sort-amount-down';
 import { SortAmountUpAlt } from '@primeicons/react/sort-amount-up-alt';
 import type { DataTableSortOrderInstance } from 'primereact/datatable';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -93580,7 +93520,7 @@ export default function SortDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -93640,7 +93580,6 @@ Hold Ctrl/Cmd and click multiple column headers to sort by several fields at onc
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from 'primereact/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -93752,7 +93691,7 @@ export default function MultiSortDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -93812,7 +93751,6 @@ Apply an initial sort on mount via `defaultSortField` + `defaultSortOrder`.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableSortOrderInstance } from 'primereact/datatable';
 import { SortAlt } from '@primeicons/react/sort-alt';
@@ -93924,7 +93862,7 @@ export default function PresortDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -94007,7 +93945,6 @@ import {
 } from '@/components/ui/datatable';
 import { OverlayBadge } from '@/components/ui/overlaybadge';
 import { Tag } from '@/components/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -94101,7 +94038,7 @@ export default function PresortMultiDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -94934,7 +94871,6 @@ import {
     DataTableTableContainer
 } from '@/components/ui/datatable';
 import { Tag } from '@/components/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -94987,7 +94923,7 @@ export default function ResizeDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -95041,7 +94977,6 @@ Dragging grows or shrinks the whole table; adjacent columns keep their widths.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { Database } from '@primeicons/react/database';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import {
@@ -95115,7 +95050,7 @@ export default function ResizeExpandDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -95172,7 +95107,6 @@ Drag and drop column headers to reorder columns.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import type { DataTableColumnReorderEvent } from 'primereact/datatable';
 import { ArrowDown } from '@primeicons/react/arrow-down';
@@ -95229,7 +95163,7 @@ function renderCell(field: string, item: Product) {
         case 'name':
             return (
                 <div className="flex items-center gap-3">
-                    <Image
+                    <img
                         src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                         alt={item.name}
                         width={36}
@@ -95338,7 +95272,6 @@ Drag and drop rows to reorder data.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { Bars } from '@primeicons/react/bars';
 import { Database } from '@primeicons/react/database';
@@ -95416,7 +95349,7 @@ export default function RowReorderDemo() {
                                     </DataTableCell>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -95950,7 +95883,6 @@ import {
 } from '@/components/ui/datatable';
 import { Tag } from '@/components/ui/tag';
 import { ProductService, type Product } from '@/shared/services/product.service';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -95996,7 +95928,7 @@ export default function TemplateDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={40}
@@ -96037,7 +95969,6 @@ Export table data to CSV with customizable fields and headers.
 
 ```tsx
 'use client';
-import Image from 'next/image';
 import { ProductService, type Product } from '@/shared/services/product.service';
 import { FileExport } from '@primeicons/react/file-export';
 import { Database } from '@primeicons/react/database';
@@ -96119,7 +96050,7 @@ export default function ExportDemo() {
                                 <DataTableRow key={item.id}>
                                     <DataTableCell>
                                         <div className="flex items-center gap-3">
-                                            <Image
+                                            <img
                                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                 alt={item.name}
                                                 width={36}
@@ -96199,7 +96130,6 @@ import {
     DataTableTableContainer
 } from '@/components/ui/datatable';
 import { Tag } from '@/components/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -96264,7 +96194,7 @@ export default function LoadingOverlayDemo() {
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
                                             <div className="flex items-center gap-3">
-                                                <Image
+                                                <img
                                                     src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                     alt={item.name}
                                                     width={40}
@@ -96327,7 +96257,6 @@ import {
 } from '@/components/ui/datatable';
 import { Skeleton } from '@/components/ui/skeleton';
 import { Tag } from '@/components/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -96418,7 +96347,7 @@ export default function LoadingSkeletonDemo() {
                                     <DataTableRow key={item.id}>
                                         <DataTableCell>
                                             <div className="flex items-center gap-3">
-                                                <Image
+                                                <img
                                                     src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                                     alt={item.name}
                                                     width={40}
@@ -96561,7 +96490,6 @@ import { DataView, DataViewContent } from '@/components/ui/dataview';
 import { Tag } from '@/components/ui/tag';
 import { ProductService } from '@/shared/services/product.service';
 import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
-import Image from 'next/image';
 import * as React from 'react';
 
 interface Product {
@@ -96611,14 +96539,14 @@ export default function Preview() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -96713,7 +96641,6 @@ import { DataView, DataViewContent } from '@/components/ui/dataview';
 import { Tag } from '@/components/ui/tag';
 import { ProductService } from '@/shared/services/product.service';
 import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
-import Image from 'next/image';
 import * as React from 'react';
 
 interface Product {
@@ -96763,14 +96690,14 @@ export default function BasicDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -96831,7 +96758,6 @@ import { Paginator, PaginatorFirst, PaginatorLast, PaginatorNext, PaginatorPages
 import { Tag } from '@/components/ui/tag';
 import { ProductService } from '@/shared/services/product.service';
 import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
-import Image from 'next/image';
 import { PaginatorRootChangeEvent } from 'primereact/paginator';
 import * as React from 'react';
 
@@ -96884,14 +96810,14 @@ export default function PaginationDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -96967,7 +96893,6 @@ import { ToggleButton } from '@/components/ui/togglebutton';
 import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
 import { ProductService } from '@/shared/services/product.service';
 import { Heart, ShoppingCart, StarFill } from '@primeicons/react';
-import Image from 'next/image';
 import { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
 import * as React from 'react';
 
@@ -97038,14 +96963,14 @@ export default function SortDemo() {
                                 className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                             >
                                 <div className="md:w-40 relative">
-                                    <Image
+                                    <img
                                         className="mx-auto rounded w-full"
                                         src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                         alt={product.name}
                                         width={160}
                                         height={160}
                                     />
-                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                    <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                         {product.inventoryStatus}
                                     </Tag>
                                 </div>
@@ -97107,7 +97032,6 @@ import { ToggleButton } from '@/components/ui/togglebutton';
 import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
 import { ProductService } from '@/shared/services/product.service';
 import { Bars, Heart, ShoppingCart, StarFill, Table } from '@primeicons/react';
-import Image from 'next/image';
 import { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttongroup';
 import * as React from 'react';
 
@@ -97157,14 +97081,14 @@ export default function LayoutDemo() {
                         className={`flex flex-col sm:flex-row sm:items-center p-6 gap-4 ${index !== 0 ? 'border-t border-surface-200 dark:border-surface-700' : ''}`}
                     >
                         <div className="md:w-40 relative">
-                            <Image
+                            <img
                                 className="mx-auto rounded w-full"
                                 src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                 alt={product.name}
                                 width={160}
                                 height={160}
                             />
-                            <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                            <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                 {product.inventoryStatus}
                             </Tag>
                         </div>
@@ -97218,14 +97142,14 @@ export default function LayoutDemo() {
                             <div className="p-6 border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 rounded flex flex-col">
                                 <div className="bg-surface-50 flex justify-center rounded p-4">
                                     <div className="relative mx-auto">
-                                        <Image
+                                        <img
                                             src={`https://primefaces.org/cdn/primevue/images/product/${product.image}`}
                                             alt={product.name}
                                             width={300}
                                             height={200}
                                             className="rounded"
                                         />
-                                        <Tag severity={getSeverity(product)} className="absolute top-1 left-1">
+                                        <Tag severity={getSeverity(product)} className="absolute top-1 left-1 dark:bg-surface-900!">
                                             {product.inventoryStatus}
                                         </Tag>
                                     </div>
@@ -98297,7 +98221,7 @@ export default function Preview() {
                                         <Label htmlFor="tw-name" className="text-sm font-semibold">
                                             Name
                                         </Label>
-                                        <InputText id="tw-name" defaultValue="Amanda Miller" />
+                                        <InputText data-autofocus id="tw-name" defaultValue="Amanda Miller" />
                                     </div>
                                     <div className="flex flex-col gap-1">
                                         <Label htmlFor="tw-username" className="text-sm font-semibold">
@@ -98422,7 +98346,7 @@ export default function BasicDemo() {
                                 <div className="flex flex-col gap-4">
                                     <div className="flex flex-col gap-1.5">
                                         <Label htmlFor="name">Name</Label>
-                                        <InputText id="name" defaultValue="Amanda Miller" />
+                                        <InputText id="name" defaultValue="Amanda Miller" data-autofocus />
                                     </div>
                                     <div className="flex flex-col gap-1.5">
                                         <Label htmlFor="email">Email</Label>
@@ -98467,6 +98391,7 @@ import {
     DialogTitle,
     DialogTrigger
 } from '@/components/ui/dialog';
+import { Textarea } from '@/components/ui/textarea';
 
 export default function DraggableDemo() {
     return (
@@ -98490,8 +98415,10 @@ export default function DraggableDemo() {
                                     <p className="text-sm text-surface-500 dark:text-surface-400 mt-0 mb-0">
                                         Drag this dialog by its header to reposition it anywhere on the screen.
                                     </p>
-                                    <textarea
-                                        className="w-full h-32 p-3 rounded-md border border-surface-200 dark:border-surface-700 bg-surface-0 dark:bg-surface-900 text-surface-700 dark:text-surface-0 text-sm resize-none focus:outline-none focus:ring-2 focus:ring-primary-500"
+                                    <Textarea
+                                        data-autofocus
+                                        rows={4}
+                                        className="w-full resize-none"
                                         placeholder="Type your note here..."
                                         defaultValue="Remember to review the design specs for the new dashboard layout before the meeting tomorrow."
                                     />
@@ -98533,7 +98460,7 @@ import {
 } from '@/components/ui/dialog';
 import { InputText } from '@/components/ui/inputtext';
 import { Label } from '@/components/ui/label';
-import { ArrowDown, ArrowDownLeft, ArrowDownRight, ArrowLeft, ArrowRight, ArrowUp, ArrowUpLeft, ArrowUpRight, Times } from '@primeicons/react';
+import { Times } from '@primeicons/react';
 import { DialogRootChangeEvent, DialogRootProps } from 'primereact/dialog';
 import * as React from 'react';
 
@@ -98551,39 +98478,31 @@ export default function PositionDemo() {
             <div className="flex flex-wrap justify-center gap-2 mb-2">
                 <Button onClick={() => openPosition('left')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Left
-                    <ArrowLeft />
                 </Button>
                 <Button onClick={() => openPosition('right')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Right
-                    <ArrowRight />
                 </Button>
             </div>
             <div className="flex flex-wrap justify-center gap-2 mb-2">
                 <Button onClick={() => openPosition('topleft')} severity="secondary" style={{ minWidth: '10rem' }}>
                     TopLeft
-                    <ArrowUpLeft />
                 </Button>
                 <Button onClick={() => openPosition('top')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Top
-                    <ArrowUp />
                 </Button>
                 <Button onClick={() => openPosition('topright')} severity="secondary" style={{ minWidth: '10rem' }}>
                     TopRight
-                    <ArrowUpRight />
                 </Button>
             </div>
             <div className="flex flex-wrap justify-center gap-2">
                 <Button onClick={() => openPosition('bottomleft')} severity="secondary" style={{ minWidth: '10rem' }}>
                     BottomLeft
-                    <ArrowDownLeft />
                 </Button>
                 <Button onClick={() => openPosition('bottom')} severity="secondary" style={{ minWidth: '10rem' }}>
                     Bottom
-                    <ArrowDown />
                 </Button>
                 <Button onClick={() => openPosition('bottomright')} severity="secondary" style={{ minWidth: '10rem' }}>
                     BottomRight
-                    <ArrowDownRight />
                 </Button>
             </div>
             <Dialog open={open} onOpenChange={(e: DialogRootChangeEvent) => setOpen(e.value as boolean)} position={position}>
@@ -98606,7 +98525,7 @@ export default function PositionDemo() {
                                         <Label htmlFor="username" className="font-semibold">
                                             Username
                                         </Label>
-                                        <InputText id="username" />
+                                        <InputText data-autofocus id="username" />
                                     </div>
                                     <div className="flex flex-col gap-1">
                                         <Label htmlFor="email" className="font-semibold">
@@ -98831,7 +98750,7 @@ export default function ModalDemo() {
                                         <Label htmlFor="username" className="font-semibold">
                                             Username
                                         </Label>
-                                        <InputText id="username" />
+                                        <InputText data-autofocus id="username" />
                                     </div>
                                     <div className="flex flex-col gap-1">
                                         <Label htmlFor="email" className="font-semibold">
@@ -98902,7 +98821,7 @@ export default function WithoutModalDemo() {
                                         <Label htmlFor="username" className="font-semibold">
                                             Username
                                         </Label>
-                                        <InputText id="username" />
+                                        <InputText data-autofocus id="username" />
                                     </div>
                                     <div className="flex flex-col gap-1">
                                         <Label htmlFor="email" className="font-semibold">
@@ -99388,7 +99307,7 @@ export default function ResponsiveDemo() {
                                         <Label htmlFor="eventName" className="text-sm font-semibold">
                                             Event Name
                                         </Label>
-                                        <InputText id="eventName" placeholder="e.g. Team Standup" />
+                                        <InputText data-autofocus id="eventName" placeholder="e.g. Team Standup" />
                                     </div>
                                     <div className="flex flex-col md:flex-row gap-4">
                                         <div className="flex flex-col gap-1 flex-1">
@@ -110849,7 +110768,6 @@ import {
     SelectValue
 } from '@/components/ui/select';
 import { Search } from '@primeicons/react';
-import Image from 'next/image';
 import type { SelectValueChangeEvent } from 'primereact/select';
 import * as React from 'react';
 
@@ -110912,7 +110830,7 @@ export default function FilterDemo() {
                                 {filteredCountries.map((country, index) => (
                                     <SelectOption key={country.code} index={index} uKey={country.code}>
                                         <div className="flex items-center gap-2">
-                                            <Image
+                                            <img
                                                 alt={country.name}
                                                 src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png"
                                                 className={`flag flag-${country.code.toLowerCase()} mr-2`}
@@ -113574,7 +113492,6 @@ import type { ToggleButtonGroupValueChangeEvent } from 'primereact/togglebuttong
 import { Slider } from '@/components/ui/slider';
 import { ToggleButton } from '@/components/ui/togglebutton';
 import { ToggleButtonGroup } from '@/components/ui/togglebuttongroup';
-import Image from 'next/image';
 import * as React from 'react';
 
 export default function FilterDemo() {
@@ -113589,7 +113506,7 @@ export default function FilterDemo() {
 
     return (
         <div className="flex flex-col items-center justify-center">
-            <Image
+            <img
                 alt="user header"
                 className="w-80 rounded mb-6"
                 src="https://primefaces.org/cdn/primevue/images/galleria/galleria1.jpg"
@@ -116850,7 +116767,10 @@ import { Search } from '@primeicons/react';
 
 export default function CustomDemo() {
     return (
-        <Toolbar style={{ borderRadius: '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }}>
+        <Toolbar
+            className="@container"
+            style={{ borderRadius: '3rem', padding: '0.75rem 1rem 0.75rem 1.5rem', background: 'var(--p-surface-900)', border: 'none' }}
+        >
             <ToolbarStart>
                 <div className="flex items-center gap-1">
                     <i className="pi pi-prime text-xl" style={{ color: 'var(--p-primary-400)' }} />
@@ -116858,24 +116778,24 @@ export default function CustomDemo() {
                         Brand
                     </span>
                 </div>
-                <div className="ml-6 flex gap-1">
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                <div className="ml-6 hidden @min-[620px]:flex gap-1">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Products
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Solutions
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Resources
                     </Button>
-                    <Button variant="text" size="small" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" className="text-surface-0! hover:bg-surface-700!">
                         Pricing
                     </Button>
                 </div>
             </ToolbarStart>
             <ToolbarEnd>
                 <div className="flex items-center gap-2">
-                    <Button variant="text" size="small" iconOnly aria-label="Search" className="text-surface-0 hover:bg-surface-700">
+                    <Button variant="text" size="small" iconOnly aria-label="Search" className="text-surface-0! hover:bg-surface-700!">
                         <Search />
                     </Button>
                     <Button severity="contrast" size="small">
@@ -117515,7 +117435,6 @@ import { useFilter } from '@primereact/hooks/use-filter';
 import { IconField } from '@primereact/ui/iconfield';
 import { InputText } from '@primereact/ui/inputtext';
 import { Tag } from '@primereact/ui/tag';
-import Image from 'next/image';
 import * as React from 'react';
 
 const statusSeverity: Record<string, 'success' | 'warn' | 'danger'> = {
@@ -117558,12 +117477,10 @@ export default function BasicDemo() {
                 {filteredData.map((item) => (
                     <div key={item.id} className="p-3 border border-surface-200 dark:border-surface-700 rounded-md flex items-center gap-3">
                         <div className="relative shrink-0 w-12 h-12 rounded-md shadow overflow-hidden">
-                            <Image
+                            <img
                                 src={`https://primefaces.org/cdn/primevue/images/product/${item.image}`}
                                 alt={item.name}
-                                fill
-                                sizes="48px"
-                                className="object-cover"
+                                className="w-full h-full object-cover"
                             />
                         </div>
                         <div className="flex flex-col gap-1 flex-1 min-w-0">
@@ -119095,6 +119012,260 @@ Add a `.md` to a page’s URL to display a Markdown version of that page.
 
 <Button as="a" href="/docs/overview/llms.md" target="_blank">Open /docs/overview/llms.md</Button>
 
+# MCP Server
+
+Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
+
+## Introduction
+
+[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.
+
+- Find components, guides, examples, setup instructions, and hooks.
+- Read mode-scoped component APIs and documentation sections.
+- Check component usage against documented properties and callbacks.
+- Return links to the related PrimeReact documentation when available.
+
+The server requires Node.js 22 or newer. It is read-only and does not change your project files or PrimeReact configuration.
+
+## CLI Setup
+
+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.
+
+```bash
+pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact
+```
+
+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.
+
+## Manual Setup
+
+### Claude Code
+
+Add the server to your user configuration to use it in every project, or omit `-s user` for the current project only.
+
+```bash
+claude mcp add primereact -s user -- npx -y @primereact/mcp
+```
+
+See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for client-specific options.
+
+### VS Code
+
+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.
+
+```json
+{
+    "servers": {
+        "primereact": {
+            "command": "npx",
+            "args": ["-y", "@primereact/mcp"]
+        }
+    }
+}
+```
+
+See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
+
+### OpenAI Codex
+
+Add the server with the Codex CLI, or add the same configuration to `~/.codex/config.toml`.
+
+```bash
+codex mcp add primereact -- npx -y @primereact/mcp
+```
+
+```toml
+[mcp_servers.primereact]
+command = "npx"
+args = ["-y", "@primereact/mcp"]
+```
+
+See the [OpenAI Codex MCP documentation](https://developers.openai.com/codex/mcp/) for more details.
+
+### Cursor
+
+Create `.cursor/mcp.json` in your project or `~/.cursor/mcp.json` for global configuration.
+
+```json
+{
+    "mcpServers": {
+        "primereact": {
+            "command": "npx",
+            "args": ["-y", "@primereact/mcp"]
+        }
+    }
+}
+```
+
+See the [Cursor MCP documentation](https://docs.cursor.com/context/model-context-protocol) for more details.
+
+## Tools
+
+The PrimeReact MCP server provides eight tools.
+
+| Tool             | Purpose                                                                                   |
+| ---------------- | ----------------------------------------------------------------------------------------- |
+| `list`           | List available components, guides, examples, resources, or modes.                         |
+| `search`         | Search generated component, guide, section, API, hook, and example text.                  |
+| `get_component`  | Read mode-scoped component or hook documentation, API metadata, and available sections.   |
+| `get_guide`      | Read a generated PrimeReact guide and its source metadata.                                |
+| `get_example`    | Return an example from a documented component or hook section.                            |
+| `get_setup`      | Return setup guidance for a supported PrimeReact mode and environment.                    |
+| `validate_usage` | Validate component usage against generated PrimeReact API metadata in one selected mode.  |
+| `version`        | Report the server version and the status of its documentation data, tools, and resources. |
+
+## Data and Validation
+
+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.
+
+- The tools do not edit files, install dependencies, or update configuration.
+- Component, setup, example, and validation calls stay in one selected mode: `styled`, `tailwind`, `primitive`, `headless`, or `hooks` where supported.
+- `validate_usage` checks documented API metadata. If the required metadata is unavailable or the mode is ambiguous, it reports that limitation instead of guessing.
+- Run your project type checks, tests, and browser checks after making changes. MCP validation does not replace them.
+
+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.
+
+# Plugin
+
+Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
+
+## Introduction
+
+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.
+
+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.
+
+## What It Installs
+
+Installing the PrimeReact Plugin adds:
+
+- Six focused skills covering routing, implementation, setup, theming, accessibility, and troubleshooting.
+- The PrimeReact MCP server, configured with `@primereact/mcp`.
+- The manifest required by the selected assistant.
+
+PrimeVue and PrimeNG are separate plugins. Installing this plugin does not change your application or install PrimeReact dependencies in the project.
+
+## Skills
+
+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.
+
+| Skill                                 | Use it for                                                                                                                              |
+| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `primereact-router`                   | Select the PrimeReact mode and choose the skill that matches the task.                                                                  |
+| `primereact-component-implementation` | Choose and implement components, composition, properties, callbacks, and documented hooks.                                              |
+| `primereact-setup-installation`       | Configure a supported React environment in `styled`, `tailwind`, `primitive`, or `headless` mode.                                       |
+| `primereact-theming-customization`    | Work with styled presets and tokens, Tailwind-owned components, primitives, headless markup, or pass-through APIs without mixing modes. |
+| `primereact-accessibility-icons`      | Review semantics, keyboard behavior, focus, accessible names, PrimeIcons, and custom icons in the selected mode.                        |
+| `primereact-audit-troubleshooting`    | Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations.                                         |
+
+The current PrimeReact v11 documentation does not provide a supported version migration guide, so the plugin does not advertise a migration workflow.
+
+Skill names use the `primereact-` prefix because assistants may keep skills from several plugins in one shared namespace.
+
+## How Skills Work
+
+You do not need to select a skill manually. Describe the PrimeReact task and the router chooses the relevant workflow.
+
+- 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.
+- The selected skill reads only the component or guide information needed for that mode.
+- When component metadata is available, the skill validates the final PrimeReact usage in the same mode.
+- 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.
+
+After implementation, run the checks required by your project, including type checking, tests, browser behavior, accessibility, and visual review where applicable.
+
+## CLI Setup
+
+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.
+
+```bash
+pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
+```
+
+Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`. Use `copilot` for GitHub Copilot CLI and VS Code.
+
+## Lifecycle and Doctor
+
+Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeReact in the selected assistant.
+
+```bash
+pnpm dlx @primeui/cli plugin status --tool copilot --library primereact
+pnpm dlx @primeui/cli plugin update --tool copilot --library primereact
+pnpm dlx @primeui/cli plugin remove --tool copilot --library primereact
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact
+
+# Machine-readable diagnostics
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact --json
+```
+
+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.
+
+## Manual Setup
+
+### Source
+
+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.
+
+```bash
+git clone --branch main https://github.com/primefaces/primeui-plugins.git ~/primeui-plugins
+ls ~/primeui-plugins/plugins/primereact
+```
+
+### Claude Code
+
+Add the PrimeUI marketplace, then install only the PrimeReact plugin.
+
+```bash
+claude plugin marketplace add primefaces/primeui-plugins
+claude plugin install primereact@primeui
+claude plugin list --json
+```
+
+### Codex
+
+Add the PrimeUI marketplace, inspect its catalog, then install only the PrimeReact plugin. Use the interactive plugin browser to manage enablement.
+
+```bash
+codex plugin marketplace add primefaces/primeui-plugins
+codex plugin list --available
+codex plugin add primereact@primeui
+codex plugin list
+```
+
+### VS Code Copilot
+
+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.
+
+```bash
+copilot plugin marketplace add primefaces/primeui-plugins
+copilot plugin install primereact@primeui
+```
+
+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.
+
+### Cursor
+
+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.
+
+```bash
+mkdir -p ~/.cursor/plugins/local
+ln -s ~/primeui-plugins/plugins/primereact ~/.cursor/plugins/local/primereact
+```
+
+Use Cursor's Customize screen to manage the plugin, its skills, and its MCP server.
+
+### Gemini CLI
+
+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.
+
+```bash
+gemini extensions validate ~/primeui-plugins/plugins/primereact
+gemini extensions install ~/primeui-plugins/plugins/primereact --consent
+gemini extensions list --output-format json
+```
+
+Gemini CLI 0.29.3 requires `experimental.extensionManagement` to be enabled. The installed extension contains the seven PrimeReact skills and the PrimeReact MCP server.
+
 # Installation
 
 Install PrimeReact's headless hooks and build fully custom components in your React project.
@@ -119113,7 +119284,7 @@ Headless hooks give you the behavior — state, keyboard navigation, focus and a
 Install the headless package using your favorite package manager:
 
 ```bash
-npm install @primereact/headless@11.0.0-rc.2
+npm install @primereact/headless
 ```
 
     </DocStep>
@@ -119647,6 +119818,260 @@ Add a `.md` to a page’s URL to display a Markdown version of that page.
 
 <Button as="a" href="/docs/overview/llms.md" target="_blank">Open /docs/overview/llms.md</Button>
 
+# MCP Server
+
+Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
+
+## Introduction
+
+[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.
+
+- Find components, guides, examples, setup instructions, and hooks.
+- Read mode-scoped component APIs and documentation sections.
+- Check component usage against documented properties and callbacks.
+- Return links to the related PrimeReact documentation when available.
+
+The server requires Node.js 22 or newer. It is read-only and does not change your project files or PrimeReact configuration.
+
+## CLI Setup
+
+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.
+
+```bash
+pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact
+```
+
+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.
+
+## Manual Setup
+
+### Claude Code
+
+Add the server to your user configuration to use it in every project, or omit `-s user` for the current project only.
+
+```bash
+claude mcp add primereact -s user -- npx -y @primereact/mcp
+```
+
+See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for client-specific options.
+
+### VS Code
+
+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.
+
+```json
+{
+    "servers": {
+        "primereact": {
+            "command": "npx",
+            "args": ["-y", "@primereact/mcp"]
+        }
+    }
+}
+```
+
+See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
+
+### OpenAI Codex
+
+Add the server with the Codex CLI, or add the same configuration to `~/.codex/config.toml`.
+
+```bash
+codex mcp add primereact -- npx -y @primereact/mcp
+```
+
+```toml
+[mcp_servers.primereact]
+command = "npx"
+args = ["-y", "@primereact/mcp"]
+```
+
+See the [OpenAI Codex MCP documentation](https://developers.openai.com/codex/mcp/) for more details.
+
+### Cursor
+
+Create `.cursor/mcp.json` in your project or `~/.cursor/mcp.json` for global configuration.
+
+```json
+{
+    "mcpServers": {
+        "primereact": {
+            "command": "npx",
+            "args": ["-y", "@primereact/mcp"]
+        }
+    }
+}
+```
+
+See the [Cursor MCP documentation](https://docs.cursor.com/context/model-context-protocol) for more details.
+
+## Tools
+
+The PrimeReact MCP server provides eight tools.
+
+| Tool             | Purpose                                                                                   |
+| ---------------- | ----------------------------------------------------------------------------------------- |
+| `list`           | List available components, guides, examples, resources, or modes.                         |
+| `search`         | Search generated component, guide, section, API, hook, and example text.                  |
+| `get_component`  | Read mode-scoped component or hook documentation, API metadata, and available sections.   |
+| `get_guide`      | Read a generated PrimeReact guide and its source metadata.                                |
+| `get_example`    | Return an example from a documented component or hook section.                            |
+| `get_setup`      | Return setup guidance for a supported PrimeReact mode and environment.                    |
+| `validate_usage` | Validate component usage against generated PrimeReact API metadata in one selected mode.  |
+| `version`        | Report the server version and the status of its documentation data, tools, and resources. |
+
+## Data and Validation
+
+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.
+
+- The tools do not edit files, install dependencies, or update configuration.
+- Component, setup, example, and validation calls stay in one selected mode: `styled`, `tailwind`, `primitive`, `headless`, or `hooks` where supported.
+- `validate_usage` checks documented API metadata. If the required metadata is unavailable or the mode is ambiguous, it reports that limitation instead of guessing.
+- Run your project type checks, tests, and browser checks after making changes. MCP validation does not replace them.
+
+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.
+
+# Plugin
+
+Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
+
+## Introduction
+
+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.
+
+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.
+
+## What It Installs
+
+Installing the PrimeReact Plugin adds:
+
+- Six focused skills covering routing, implementation, setup, theming, accessibility, and troubleshooting.
+- The PrimeReact MCP server, configured with `@primereact/mcp`.
+- The manifest required by the selected assistant.
+
+PrimeVue and PrimeNG are separate plugins. Installing this plugin does not change your application or install PrimeReact dependencies in the project.
+
+## Skills
+
+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.
+
+| Skill                                 | Use it for                                                                                                                              |
+| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `primereact-router`                   | Select the PrimeReact mode and choose the skill that matches the task.                                                                  |
+| `primereact-component-implementation` | Choose and implement components, composition, properties, callbacks, and documented hooks.                                              |
+| `primereact-setup-installation`       | Configure a supported React environment in `styled`, `tailwind`, `primitive`, or `headless` mode.                                       |
+| `primereact-theming-customization`    | Work with styled presets and tokens, Tailwind-owned components, primitives, headless markup, or pass-through APIs without mixing modes. |
+| `primereact-accessibility-icons`      | Review semantics, keyboard behavior, focus, accessible names, PrimeIcons, and custom icons in the selected mode.                        |
+| `primereact-audit-troubleshooting`    | Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations.                                         |
+
+The current PrimeReact v11 documentation does not provide a supported version migration guide, so the plugin does not advertise a migration workflow.
+
+Skill names use the `primereact-` prefix because assistants may keep skills from several plugins in one shared namespace.
+
+## How Skills Work
+
+You do not need to select a skill manually. Describe the PrimeReact task and the router chooses the relevant workflow.
+
+- 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.
+- The selected skill reads only the component or guide information needed for that mode.
+- When component metadata is available, the skill validates the final PrimeReact usage in the same mode.
+- 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.
+
+After implementation, run the checks required by your project, including type checking, tests, browser behavior, accessibility, and visual review where applicable.
+
+## CLI Setup
+
+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.
+
+```bash
+pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
+```
+
+Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`. Use `copilot` for GitHub Copilot CLI and VS Code.
+
+## Lifecycle and Doctor
+
+Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeReact in the selected assistant.
+
+```bash
+pnpm dlx @primeui/cli plugin status --tool copilot --library primereact
+pnpm dlx @primeui/cli plugin update --tool copilot --library primereact
+pnpm dlx @primeui/cli plugin remove --tool copilot --library primereact
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact
+
+# Machine-readable diagnostics
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact --json
+```
+
+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.
+
+## Manual Setup
+
+### Source
+
+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.
+
+```bash
+git clone --branch main https://github.com/primefaces/primeui-plugins.git ~/primeui-plugins
+ls ~/primeui-plugins/plugins/primereact
+```
+
+### Claude Code
+
+Add the PrimeUI marketplace, then install only the PrimeReact plugin.
+
+```bash
+claude plugin marketplace add primefaces/primeui-plugins
+claude plugin install primereact@primeui
+claude plugin list --json
+```
+
+### Codex
+
+Add the PrimeUI marketplace, inspect its catalog, then install only the PrimeReact plugin. Use the interactive plugin browser to manage enablement.
+
+```bash
+codex plugin marketplace add primefaces/primeui-plugins
+codex plugin list --available
+codex plugin add primereact@primeui
+codex plugin list
+```
+
+### VS Code Copilot
+
+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.
+
+```bash
+copilot plugin marketplace add primefaces/primeui-plugins
+copilot plugin install primereact@primeui
+```
+
+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.
+
+### Cursor
+
+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.
+
+```bash
+mkdir -p ~/.cursor/plugins/local
+ln -s ~/primeui-plugins/plugins/primereact ~/.cursor/plugins/local/primereact
+```
+
+Use Cursor's Customize screen to manage the plugin, its skills, and its MCP server.
+
+### Gemini CLI
+
+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.
+
+```bash
+gemini extensions validate ~/primeui-plugins/plugins/primereact
+gemini extensions install ~/primeui-plugins/plugins/primereact --consent
+gemini extensions list --output-format json
+```
+
+Gemini CLI 0.29.3 requires `experimental.extensionManagement` to be enabled. The installed extension contains the seven PrimeReact skills and the PrimeReact MCP server.
+
 # Custom Icons
 
 PrimeReact components can be used with any icon library using the templating features.
@@ -119792,7 +120217,7 @@ export default function ColorDemo() {
 
 ## Spin
 
-Use a spin animation utility like `animate-spin` from Tailwind apply rotation.
+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.
 
 ```tsx
 import { Cog } from '@primeicons/react/cog';
@@ -119801,8 +120226,8 @@ import { Spinner } from '@primeicons/react/spinner';
 export default function SpinDemo() {
     return (
         <div className="flex justify-center gap-4">
-            <Spinner className="animate-spin" size={32} />
-            <Cog className="animate-spin" size={32} />
+            <Spinner spin size={32} />
+            <Cog spin size={32} />
         </div>
     );
 }
@@ -119826,7 +120251,7 @@ Primitive components ship **unstyled** — you compose the behavior and bring yo
 Install PrimeReact using your favorite package manager:
 
 ```bash
-npm install primereact@11.0.0-rc.2
+npm install primereact
 ```
 
     </DocStep>
@@ -120642,6 +121067,260 @@ Add a `.md` to a page’s URL to display a Markdown version of that page.
 
 <Button as="a" href="/docs/overview/llms.md" target="_blank">Open /docs/overview/llms.md</Button>
 
+# MCP Server
+
+Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
+
+## Introduction
+
+[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.
+
+- Find components, guides, examples, setup instructions, and hooks.
+- Read mode-scoped component APIs and documentation sections.
+- Check component usage against documented properties and callbacks.
+- Return links to the related PrimeReact documentation when available.
+
+The server requires Node.js 22 or newer. It is read-only and does not change your project files or PrimeReact configuration.
+
+## CLI Setup
+
+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.
+
+```bash
+pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact
+```
+
+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.
+
+## Manual Setup
+
+### Claude Code
+
+Add the server to your user configuration to use it in every project, or omit `-s user` for the current project only.
+
+```bash
+claude mcp add primereact -s user -- npx -y @primereact/mcp
+```
+
+See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for client-specific options.
+
+### VS Code
+
+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.
+
+```json
+{
+    "servers": {
+        "primereact": {
+            "command": "npx",
+            "args": ["-y", "@primereact/mcp"]
+        }
+    }
+}
+```
+
+See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
+
+### OpenAI Codex
+
+Add the server with the Codex CLI, or add the same configuration to `~/.codex/config.toml`.
+
+```bash
+codex mcp add primereact -- npx -y @primereact/mcp
+```
+
+```toml
+[mcp_servers.primereact]
+command = "npx"
+args = ["-y", "@primereact/mcp"]
+```
+
+See the [OpenAI Codex MCP documentation](https://developers.openai.com/codex/mcp/) for more details.
+
+### Cursor
+
+Create `.cursor/mcp.json` in your project or `~/.cursor/mcp.json` for global configuration.
+
+```json
+{
+    "mcpServers": {
+        "primereact": {
+            "command": "npx",
+            "args": ["-y", "@primereact/mcp"]
+        }
+    }
+}
+```
+
+See the [Cursor MCP documentation](https://docs.cursor.com/context/model-context-protocol) for more details.
+
+## Tools
+
+The PrimeReact MCP server provides eight tools.
+
+| Tool             | Purpose                                                                                   |
+| ---------------- | ----------------------------------------------------------------------------------------- |
+| `list`           | List available components, guides, examples, resources, or modes.                         |
+| `search`         | Search generated component, guide, section, API, hook, and example text.                  |
+| `get_component`  | Read mode-scoped component or hook documentation, API metadata, and available sections.   |
+| `get_guide`      | Read a generated PrimeReact guide and its source metadata.                                |
+| `get_example`    | Return an example from a documented component or hook section.                            |
+| `get_setup`      | Return setup guidance for a supported PrimeReact mode and environment.                    |
+| `validate_usage` | Validate component usage against generated PrimeReact API metadata in one selected mode.  |
+| `version`        | Report the server version and the status of its documentation data, tools, and resources. |
+
+## Data and Validation
+
+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.
+
+- The tools do not edit files, install dependencies, or update configuration.
+- Component, setup, example, and validation calls stay in one selected mode: `styled`, `tailwind`, `primitive`, `headless`, or `hooks` where supported.
+- `validate_usage` checks documented API metadata. If the required metadata is unavailable or the mode is ambiguous, it reports that limitation instead of guessing.
+- Run your project type checks, tests, and browser checks after making changes. MCP validation does not replace them.
+
+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.
+
+# Plugin
+
+Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
+
+## Introduction
+
+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.
+
+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.
+
+## What It Installs
+
+Installing the PrimeReact Plugin adds:
+
+- Six focused skills covering routing, implementation, setup, theming, accessibility, and troubleshooting.
+- The PrimeReact MCP server, configured with `@primereact/mcp`.
+- The manifest required by the selected assistant.
+
+PrimeVue and PrimeNG are separate plugins. Installing this plugin does not change your application or install PrimeReact dependencies in the project.
+
+## Skills
+
+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.
+
+| Skill                                 | Use it for                                                                                                                              |
+| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `primereact-router`                   | Select the PrimeReact mode and choose the skill that matches the task.                                                                  |
+| `primereact-component-implementation` | Choose and implement components, composition, properties, callbacks, and documented hooks.                                              |
+| `primereact-setup-installation`       | Configure a supported React environment in `styled`, `tailwind`, `primitive`, or `headless` mode.                                       |
+| `primereact-theming-customization`    | Work with styled presets and tokens, Tailwind-owned components, primitives, headless markup, or pass-through APIs without mixing modes. |
+| `primereact-accessibility-icons`      | Review semantics, keyboard behavior, focus, accessible names, PrimeIcons, and custom icons in the selected mode.                        |
+| `primereact-audit-troubleshooting`    | Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations.                                         |
+
+The current PrimeReact v11 documentation does not provide a supported version migration guide, so the plugin does not advertise a migration workflow.
+
+Skill names use the `primereact-` prefix because assistants may keep skills from several plugins in one shared namespace.
+
+## How Skills Work
+
+You do not need to select a skill manually. Describe the PrimeReact task and the router chooses the relevant workflow.
+
+- 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.
+- The selected skill reads only the component or guide information needed for that mode.
+- When component metadata is available, the skill validates the final PrimeReact usage in the same mode.
+- 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.
+
+After implementation, run the checks required by your project, including type checking, tests, browser behavior, accessibility, and visual review where applicable.
+
+## CLI Setup
+
+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.
+
+```bash
+pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
+```
+
+Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`. Use `copilot` for GitHub Copilot CLI and VS Code.
+
+## Lifecycle and Doctor
+
+Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeReact in the selected assistant.
+
+```bash
+pnpm dlx @primeui/cli plugin status --tool copilot --library primereact
+pnpm dlx @primeui/cli plugin update --tool copilot --library primereact
+pnpm dlx @primeui/cli plugin remove --tool copilot --library primereact
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact
+
+# Machine-readable diagnostics
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact --json
+```
+
+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.
+
+## Manual Setup
+
+### Source
+
+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.
+
+```bash
+git clone --branch main https://github.com/primefaces/primeui-plugins.git ~/primeui-plugins
+ls ~/primeui-plugins/plugins/primereact
+```
+
+### Claude Code
+
+Add the PrimeUI marketplace, then install only the PrimeReact plugin.
+
+```bash
+claude plugin marketplace add primefaces/primeui-plugins
+claude plugin install primereact@primeui
+claude plugin list --json
+```
+
+### Codex
+
+Add the PrimeUI marketplace, inspect its catalog, then install only the PrimeReact plugin. Use the interactive plugin browser to manage enablement.
+
+```bash
+codex plugin marketplace add primefaces/primeui-plugins
+codex plugin list --available
+codex plugin add primereact@primeui
+codex plugin list
+```
+
+### VS Code Copilot
+
+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.
+
+```bash
+copilot plugin marketplace add primefaces/primeui-plugins
+copilot plugin install primereact@primeui
+```
+
+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.
+
+### Cursor
+
+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.
+
+```bash
+mkdir -p ~/.cursor/plugins/local
+ln -s ~/primeui-plugins/plugins/primereact ~/.cursor/plugins/local/primereact
+```
+
+Use Cursor's Customize screen to manage the plugin, its skills, and its MCP server.
+
+### Gemini CLI
+
+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.
+
+```bash
+gemini extensions validate ~/primeui-plugins/plugins/primereact
+gemini extensions install ~/primeui-plugins/plugins/primereact --consent
+gemini extensions list --output-format json
+```
+
+Gemini CLI 0.29.3 requires `experimental.extensionManagement` to be enabled. The installed extension contains the seven PrimeReact skills and the PrimeReact MCP server.
+
 # Configuration
 
 Application wide configuration for PrimeReact.
@@ -120939,7 +121618,7 @@ export default function ColorDemo() {
 
 ## Spin
 
-Use a spin animation utility like `animate-spin` from Tailwind apply rotation.
+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.
 
 ```tsx
 import { Cog } from '@primeicons/react/cog';
@@ -120948,8 +121627,8 @@ import { Spinner } from '@primeicons/react/spinner';
 export default function SpinDemo() {
     return (
         <div className="flex justify-center gap-4">
-            <Spinner className="animate-spin" size={32} />
-            <Cog className="animate-spin" size={32} />
+            <Spinner spin size={32} />
+            <Cog spin size={32} />
         </div>
     );
 }
@@ -121016,7 +121695,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
 Install PrimeReact and a theme package using your favorite package manager:
 
 ```bash
-npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
+npm install @primereact/ui @primeuix/themes @primeicons/react
 ```
 
     </DocStep>
@@ -121118,7 +121797,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
 Install PrimeReact and a theme package using your favorite package manager:
 
 ```bash
-npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
+npm install @primereact/ui @primeuix/themes @primeicons/react
 ```
 
     </DocStep>
@@ -121248,7 +121927,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
 Install PrimeReact and a theme package using your favorite package manager:
 
 ```bash
-npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
+npm install @primereact/ui @primeuix/themes @primeicons/react
 ```
 
     </DocStep>
@@ -121337,7 +122016,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
 Install PrimeReact and a theme package using your favorite package manager:
 
 ```bash
-npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
+npm install @primereact/ui @primeuix/themes @primeicons/react
 ```
 
     </DocStep>
@@ -121430,7 +122109,7 @@ Start from our <a href="https://github.com/primefaces/primereact-examples/tree/m
 Install PrimeReact and a theme package using your favorite package manager:
 
 ```bash
-npm install @primereact/ui@11.0.0-rc.2 @primeuix/themes@3.0.0-rc.1 @primeicons/react@8.0.0-rc.1
+npm install @primereact/ui @primeuix/themes @primeicons/react
 ```
 
     </DocStep>
@@ -123680,6 +124359,260 @@ Add a `.md` to a page’s URL to display a Markdown version of that page.
 
 <Button as="a" href="/docs/overview/llms.md" target="_blank">Open /docs/overview/llms.md</Button>
 
+# MCP Server
+
+Connect AI assistants to PrimeReact component documentation, guides, examples, setup, and API metadata.
+
+## Introduction
+
+[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.
+
+- Find components, guides, examples, setup instructions, and hooks.
+- Read mode-scoped component APIs and documentation sections.
+- Check component usage against documented properties and callbacks.
+- Return links to the related PrimeReact documentation when available.
+
+The server requires Node.js 22 or newer. It is read-only and does not change your project files or PrimeReact configuration.
+
+## CLI Setup
+
+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.
+
+```bash
+pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact
+```
+
+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.
+
+## Manual Setup
+
+### Claude Code
+
+Add the server to your user configuration to use it in every project, or omit `-s user` for the current project only.
+
+```bash
+claude mcp add primereact -s user -- npx -y @primereact/mcp
+```
+
+See the [Claude Code MCP documentation](https://docs.anthropic.com/en/docs/claude-code/mcp) for client-specific options.
+
+### VS Code
+
+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.
+
+```json
+{
+    "servers": {
+        "primereact": {
+            "command": "npx",
+            "args": ["-y", "@primereact/mcp"]
+        }
+    }
+}
+```
+
+See the [VS Code MCP documentation](https://code.visualstudio.com/docs/copilot/chat/mcp-servers) for more details.
+
+### OpenAI Codex
+
+Add the server with the Codex CLI, or add the same configuration to `~/.codex/config.toml`.
+
+```bash
+codex mcp add primereact -- npx -y @primereact/mcp
+```
+
+```toml
+[mcp_servers.primereact]
+command = "npx"
+args = ["-y", "@primereact/mcp"]
+```
+
+See the [OpenAI Codex MCP documentation](https://developers.openai.com/codex/mcp/) for more details.
+
+### Cursor
+
+Create `.cursor/mcp.json` in your project or `~/.cursor/mcp.json` for global configuration.
+
+```json
+{
+    "mcpServers": {
+        "primereact": {
+            "command": "npx",
+            "args": ["-y", "@primereact/mcp"]
+        }
+    }
+}
+```
+
+See the [Cursor MCP documentation](https://docs.cursor.com/context/model-context-protocol) for more details.
+
+## Tools
+
+The PrimeReact MCP server provides eight tools.
+
+| Tool             | Purpose                                                                                   |
+| ---------------- | ----------------------------------------------------------------------------------------- |
+| `list`           | List available components, guides, examples, resources, or modes.                         |
+| `search`         | Search generated component, guide, section, API, hook, and example text.                  |
+| `get_component`  | Read mode-scoped component or hook documentation, API metadata, and available sections.   |
+| `get_guide`      | Read a generated PrimeReact guide and its source metadata.                                |
+| `get_example`    | Return an example from a documented component or hook section.                            |
+| `get_setup`      | Return setup guidance for a supported PrimeReact mode and environment.                    |
+| `validate_usage` | Validate component usage against generated PrimeReact API metadata in one selected mode.  |
+| `version`        | Report the server version and the status of its documentation data, tools, and resources. |
+
+## Data and Validation
+
+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.
+
+- The tools do not edit files, install dependencies, or update configuration.
+- Component, setup, example, and validation calls stay in one selected mode: `styled`, `tailwind`, `primitive`, `headless`, or `hooks` where supported.
+- `validate_usage` checks documented API metadata. If the required metadata is unavailable or the mode is ambiguous, it reports that limitation instead of guessing.
+- Run your project type checks, tests, and browser checks after making changes. MCP validation does not replace them.
+
+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.
+
+# Plugin
+
+Install PrimeReact workflow skills and the PrimeReact MCP server in a supported AI assistant.
+
+## Introduction
+
+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.
+
+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.
+
+## What It Installs
+
+Installing the PrimeReact Plugin adds:
+
+- Six focused skills covering routing, implementation, setup, theming, accessibility, and troubleshooting.
+- The PrimeReact MCP server, configured with `@primereact/mcp`.
+- The manifest required by the selected assistant.
+
+PrimeVue and PrimeNG are separate plugins. Installing this plugin does not change your application or install PrimeReact dependencies in the project.
+
+## Skills
+
+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.
+
+| Skill                                 | Use it for                                                                                                                              |
+| ------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
+| `primereact-router`                   | Select the PrimeReact mode and choose the skill that matches the task.                                                                  |
+| `primereact-component-implementation` | Choose and implement components, composition, properties, callbacks, and documented hooks.                                              |
+| `primereact-setup-installation`       | Configure a supported React environment in `styled`, `tailwind`, `primitive`, or `headless` mode.                                       |
+| `primereact-theming-customization`    | Work with styled presets and tokens, Tailwind-owned components, primitives, headless markup, or pass-through APIs without mixing modes. |
+| `primereact-accessibility-icons`      | Review semantics, keyboard behavior, focus, accessible names, PrimeIcons, and custom icons in the selected mode.                        |
+| `primereact-audit-troubleshooting`    | Find invalid APIs and troubleshoot components, setup, MCP, plugin, or duplicate configurations.                                         |
+
+The current PrimeReact v11 documentation does not provide a supported version migration guide, so the plugin does not advertise a migration workflow.
+
+Skill names use the `primereact-` prefix because assistants may keep skills from several plugins in one shared namespace.
+
+## How Skills Work
+
+You do not need to select a skill manually. Describe the PrimeReact task and the router chooses the relevant workflow.
+
+- 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.
+- The selected skill reads only the component or guide information needed for that mode.
+- When component metadata is available, the skill validates the final PrimeReact usage in the same mode.
+- 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.
+
+After implementation, run the checks required by your project, including type checking, tests, browser behavior, accessibility, and visual review where applicable.
+
+## CLI Setup
+
+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.
+
+```bash
+pnpm dlx @primeui/cli plugin install --tool copilot --library primereact
+```
+
+Supported tool values are `claude`, `codex`, `copilot`, `cursor`, and `gemini`. Use `copilot` for GitHub Copilot CLI and VS Code.
+
+## Lifecycle and Doctor
+
+Use the same CLI to check the installation, update the plugin, or remove it. Each command applies only to PrimeReact in the selected assistant.
+
+```bash
+pnpm dlx @primeui/cli plugin status --tool copilot --library primereact
+pnpm dlx @primeui/cli plugin update --tool copilot --library primereact
+pnpm dlx @primeui/cli plugin remove --tool copilot --library primereact
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact
+
+# Machine-readable diagnostics
+pnpm dlx @primeui/cli doctor --tool copilot --library primereact --json
+```
+
+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.
+
+## Manual Setup
+
+### Source
+
+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.
+
+```bash
+git clone --branch main https://github.com/primefaces/primeui-plugins.git ~/primeui-plugins
+ls ~/primeui-plugins/plugins/primereact
+```
+
+### Claude Code
+
+Add the PrimeUI marketplace, then install only the PrimeReact plugin.
+
+```bash
+claude plugin marketplace add primefaces/primeui-plugins
+claude plugin install primereact@primeui
+claude plugin list --json
+```
+
+### Codex
+
+Add the PrimeUI marketplace, inspect its catalog, then install only the PrimeReact plugin. Use the interactive plugin browser to manage enablement.
+
+```bash
+codex plugin marketplace add primefaces/primeui-plugins
+codex plugin list --available
+codex plugin add primereact@primeui
+codex plugin list
+```
+
+### VS Code Copilot
+
+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.
+
+```bash
+copilot plugin marketplace add primefaces/primeui-plugins
+copilot plugin install primereact@primeui
+```
+
+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.
+
+### Cursor
+
+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.
+
+```bash
+mkdir -p ~/.cursor/plugins/local
+ln -s ~/primeui-plugins/plugins/primereact ~/.cursor/plugins/local/primereact
+```
+
+Use Cursor's Customize screen to manage the plugin, its skills, and its MCP server.
+
+### Gemini CLI
+
+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.
+
+```bash
+gemini extensions validate ~/primeui-plugins/plugins/primereact
+gemini extensions install ~/primeui-plugins/plugins/primereact --consent
+gemini extensions list --output-format json
+```
+
+Gemini CLI 0.29.3 requires `experimental.extensionManagement` to be enabled. The installed extension contains the seven PrimeReact skills and the PrimeReact MCP server.
+
 # Custom Icons
 
 PrimeReact components can be used with any icon library using the templating features.
@@ -123825,7 +124758,7 @@ export default function ColorDemo() {
 
 ## Spin
 
-Use a spin animation utility like `animate-spin` from Tailwind apply rotation.
+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.
 
 ```tsx
 import { Cog } from '@primeicons/react/cog';
@@ -123834,8 +124767,8 @@ import { Spinner } from '@primeicons/react/spinner';
 export default function SpinDemo() {
     return (
         <div className="flex justify-center gap-4">
-            <Spinner className="animate-spin" size={32} />
-            <Cog className="animate-spin" size={32} />
+            <Spinner spin size={32} />
+            <Cog spin size={32} />
         </div>
     );
 }
@@ -123943,7 +124876,7 @@ PrimeReact Tailwind components are distributed through a shadcn-compatible regis
 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
+npm install primereact @primeicons/react tailwindcss-primeui tailwind-merge
 ```
 
     </DocStep>
@@ -124113,7 +125046,7 @@ PrimeReact Tailwind components are distributed through a shadcn-compatible regis
 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
+npm install primereact @primeicons/react tailwindcss-primeui tailwind-merge
 ```
 
     </DocStep>
@@ -124283,7 +125216,7 @@ PrimeReact Tailwind components are distributed through a shadcn-compatible regis
 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
+npm install primereact @primeicons/react tailwindcss-primeui tailwind-merge
 ```
 
     </DocStep>
@@ -124441,7 +125374,7 @@ PrimeReact Tailwind components are distributed through a shadcn-compatible regis
 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
+npm install primereact @primeicons/react tailwindcss-primeui tailwind-merge
 ```
 
     </DocStep>
@@ -124603,7 +125536,7 @@ PrimeReact Tailwind components are distributed through a shadcn-compatible regis
 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
+npm install primereact @primeicons/react tailwindcss-primeui tailwind-merge
 ```
 
     </DocStep>