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

package/data/llms/styled/guides/installation/configuration.md

@@ -0,0 +1,135 @@
+# Configuration
+
+Application wide configuration for PrimeReact.
+
+## Provider
+
+Wrap your app with `PrimeReactProvider` in your main file (like `main.tsx` or `App.tsx`). This enables PrimeReact features everywhere in your app:
+
+```tsx showLineNumbers {10, 12}
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import App from './App.tsx'
+import { PrimeReactProvider } from "@primereact/core";
+
+...
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <PrimeReactProvider>
+        <App />
+    </PrimeReactProvider>
+  </StrictMode>,
+)
+
+```
+
+## Theme
+
+Style mode offers theming based on a design token based architecture. See the [styled mode](/docs/theming/styled) documentation for details such as building your own theme.
+
+```tsx full showLineNumbers {2,5-12,16}
+...
+import Aura from '@primeuix/themes/aura';
+import { PrimeReactProvider } from '@primereact/core';
+
+const theme = {
+    preset: Aura,
+    options: {
+        prefix: 'p',
+        darkModeSelector: 'system',
+        cssLayer: false
+    }
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider theme={theme}>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+## Unstyled
+
+Unstyled mode instructs the components not to add any built-in style classes so that they can be styled using custom css or libraries like Tailwind and Bootstrap. Visit Unstyled mode documentation for more information.
+
+```tsx showLineNumbers {6}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider unstyled>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+## PassThrough
+
+Defines the shared pass through properties per component type. Visit the [Pass Through Props](/docs/passthrough) documentation for more information.
+
+```tsx showLineNumbers {4-8,12}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+const pt = {
+    slider: {
+        handle: { className: 'bg-primary text-primary-contrast' }
+    }
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider pt={pt}>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+## PassThrough Options
+
+Used to configure the `ptOptions` properties of components. The `mergeSections` defines whether the sections from the main configuration gets added and the `mergeProps` controls whether to override or merge the defined props.
+Defaults are `true` for `mergeSections` and `false` for `mergeProps`.
+
+```tsx showLineNumbers {4-7,11}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+const ptOptions = {
+    mergeSections: true,
+    mergeProps: false
+};
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider ptOptions={ptOptions}>
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```
+
+## InputVariant
+
+Input fields come in two styles, default is `outlined` with borders around the field whereas `filled` alternative adds a background color to the field.
+Applying `p-variant-filled` to an ancestor of an input enables the filled style. If you prefer to use filled inputs in the entire application, use a global container such as the document body or the application element to apply the style class.
+Note that in case you add it to the application element, components that are teleported to the document body such as Dialog will not be able to display filled inputs as they are not a descendant of the application root element in the DOM tree,
+to resolve this case set inputVariant to `filled` at PrimeReactProvider as well.
+
+```tsx showLineNumbers {6}
+import { PrimeReactProvider } from '@primereact/core';
+...
+
+ReactDOM.createRoot(document.getElementById('root')).render(
+    <React.StrictMode>
+        <PrimeReactProvider inputVariant="filled">
+            <App />
+        </PrimeReactProvider>
+    </React.StrictMode>
+);
+```

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

@@ -16,7 +16,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>

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

@@ -16,7 +16,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>

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

@@ -16,7 +16,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>

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

@@ -16,7 +16,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>

package/data/llms/tailwind/components/datatable.md

@@ -20,7 +20,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'> = {
@@ -68,7 +67,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}
@@ -205,7 +204,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'> = {
@@ -253,7 +251,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}
@@ -396,7 +394,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';
@@ -471,7 +468,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}
@@ -531,7 +528,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';
@@ -642,7 +638,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}
@@ -826,7 +822,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';
@@ -918,7 +913,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}
@@ -1004,7 +999,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'> = {
@@ -1091,7 +1085,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}
@@ -1151,7 +1145,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';
@@ -1263,7 +1256,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}
@@ -1323,7 +1316,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';
@@ -1435,7 +1427,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}
@@ -1518,7 +1510,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'> = {
@@ -1612,7 +1603,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}
@@ -2445,7 +2436,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'> = {
@@ -2498,7 +2488,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}
@@ -2552,7 +2542,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 {
@@ -2626,7 +2615,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}
@@ -2683,7 +2672,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';
@@ -2740,7 +2728,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}
@@ -2849,7 +2837,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';
@@ -2927,7 +2914,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}
@@ -3461,7 +3448,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'> = {
@@ -3507,7 +3493,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}
@@ -3548,7 +3534,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';
@@ -3630,7 +3615,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}
@@ -3710,7 +3695,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'> = {
@@ -3775,7 +3759,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}
@@ -3838,7 +3822,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'> = {
@@ -3929,7 +3912,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}

package/data/llms/tailwind/components/dataview.md

@@ -9,7 +9,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 {
@@ -59,14 +58,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>
@@ -161,7 +160,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 {
@@ -211,14 +209,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>
@@ -279,7 +277,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';
 
@@ -332,14 +329,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>
@@ -415,7 +412,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';
 
@@ -486,14 +482,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>
@@ -555,7 +551,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';
 
@@ -605,14 +600,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>
@@ -666,14 +661,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>