@primereact/mcp 11.0.0-rc.2

package/data/llms/headless/components/treetable.md

@@ -0,0 +1,177 @@
+# useTreeTable
+
+Hierarchical data table built on useDataTable with treeMode enabled, sort, filter, paginate, select, expand, and edit tree-shaped data.
+
+```tsx
+'use client';
+import { NodeService, type TreeTableNode } from '@/shared/services/node.service';
+import { useDataTable, useDataTableRow } from '@primereact/headless/datatable';
+import type { UseDataTableExpansionEvent } from '@primereact/types/headless/datatable';
+import * as React from 'react';
+
+interface RowProps {
+    item: Record<string, unknown>;
+    index: number;
+    context: ReturnType<typeof useDataTable>;
+}
+
+function Row({ item, index, context }: RowProps) {
+    const { rowProps } = useDataTableRow({ item, index, context });
+    const treeLevel = (item._treeLevel as number | undefined) ?? 0;
+    const hasChildren = (item._treeHasChildren as boolean | undefined) ?? false;
+    const rowKey = String(item.key);
+    const isExpanded = context.expansion.isExpanded(rowKey);
+
+    const toggle = (e: React.MouseEvent) => {
+        if (hasChildren) context.expansion.toggleExpansion(e, rowKey);
+    };
+
+    return (
+        <tr {...rowProps} style={{ borderBottom: '1px solid var(--p-content-border-color)' }}>
+            <td style={{ padding: '0.5rem 0.75rem', paddingInlineStart: `calc(0.75rem + ${treeLevel}rem)` }}>
+                {hasChildren ? (
+                    <button onClick={toggle} aria-label={isExpanded ? 'Collapse' : 'Expand'} style={{ marginRight: 8, cursor: 'pointer' }}>
+                        {isExpanded ? '▼' : '▶'}
+                    </button>
+                ) : (
+                    <span style={{ display: 'inline-block', width: '1.5rem' }} />
+                )}
+                {String(item.name)}
+            </td>
+            <td style={{ padding: '0.5rem 0.75rem' }}>{String(item.size)}</td>
+            <td style={{ padding: '0.5rem 0.75rem' }}>{String(item.type)}</td>
+        </tr>
+    );
+}
+
+export default function BasicDemo() {
+    const [nodes, setNodes] = React.useState<TreeTableNode[]>([]);
+    const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });
+
+    React.useEffect(() => {
+        setNodes(NodeService.getTreeTableNodesData().slice(0, 5));
+    }, []);
+
+    const tree = useDataTable({
+        data: nodes as unknown as Record<string, unknown>[],
+        dataKey: 'key',
+        treeMode: true,
+        expandedKeys,
+        onExpandedChange: (e: UseDataTableExpansionEvent) => setExpandedKeys(e.value)
+    });
+    const rows = tree.state.processedData ?? [];
+    const headStyle: React.CSSProperties = {
+        padding: '0.5rem 0.75rem',
+        textAlign: 'left',
+        fontWeight: 600,
+        borderBottom: '1px solid var(--p-content-border-color)'
+    };
+
+    return (
+        <div {...tree.rootProps} style={{ width: '100%' }}>
+            <div {...tree.tableContainerProps}>
+                <table {...tree.tableProps} style={{ width: '100%', borderCollapse: 'collapse' }}>
+                    <thead>
+                        <tr>
+                            <th style={headStyle}>Name</th>
+                            <th style={headStyle}>Size</th>
+                            <th style={headStyle}>Type</th>
+                        </tr>
+                    </thead>
+                    <tbody>
+                        {rows.map((item, index) => (
+                            <Row key={tree.getRowKey(item, index)} item={item} index={index} context={tree} />
+                        ))}
+                    </tbody>
+                </table>
+            </div>
+        </div>
+    );
+}
+```
+
+## Usage
+
+TreeTable is not a separate hook, it is `useDataTable` with `treeMode: true`. The hook flattens the visible part of the tree (respecting `expandedKeys`), so every other feature (sort, filter, pagination, selection, editing, reorder, export) works the same way as on flat data.
+
+```tsx
+import { useDataTable } from '@primereact/headless/datatable';
+```
+
+```tsx
+const tree = useDataTable({
+    data: nodes,
+    dataKey: 'key',
+    treeMode: true,
+    expandedKeys,
+    onExpandedChange: (e) => setExpandedKeys(e.value)
+});
+```
+
+Nodes are objects of the shape `{ key, data, children? }`. Flat rows produced by the hook are stamped with helpers used by the renderer:
+
+| Field              | Type      | Meaning                                                               |
+| ------------------ | --------- | --------------------------------------------------------------------- |
+| `_treeLevel`       | `number`  | Zero-based depth in the tree (used for indentation and `aria-level`). |
+| `_treeHasChildren` | `boolean` | Whether the row has children (drives the expander vs. spacer).        |
+| `_treePosInSet`    | `number`  | One-based position among siblings (`aria-posinset`).                  |
+| `_treeSetSize`     | `number`  | Total siblings at this depth (`aria-setsize`).                        |
+
+## Features
+
+All [useDataTable](/docs/headless/components/datatable) features work the same way; the table role becomes `treegrid` and rows pick up tree-aware ARIA attributes. A few things behave differently in tree mode:
+
+- **Filter**, column filters and the global filter keep ancestor nodes when any descendant matches, so the result stays connected to its roots
+- **Selection**, checkbox selection cascades to descendants; partially-selected parents are reported through `selection.isPartiallySelected(key)`
+- **Pagination**, the paginator slices root-level nodes only; expanded children stay inside the same page
+
+## Working with callbacks
+
+### Controlled expansion
+
+```tsx
+const [expandedKeys, setExpandedKeys] = React.useState<Record<string, boolean>>({ '0': true });
+
+const tree = useDataTable({
+    data: nodes,
+    dataKey: 'key',
+    treeMode: true,
+    expandedKeys,
+    onExpandedChange: (e) => setExpandedKeys(e.value)
+});
+```
+
+### Filter + sort + pagination
+
+Pass the same `filters` / `sortField` / `paginator` props as on a flat DataTable; the hook re-runs them against the tree.
+
+```tsx
+const tree = useDataTable({
+    data: nodes,
+    treeMode: true,
+    paginator: true,
+    rows: 10,
+    filters,
+    onFilter: (e) => setFilters(e.filters),
+    sortField,
+    sortOrder,
+    onSortChange: (e) => {
+        setSortField(e.field);
+        setSortOrder(e.order);
+    }
+});
+```
+
+## API
+
+### useDataTable
+
+<DocTable name="useDataTable" category="api" />
+
+### useDataTableRow
+
+<DocTable name="useDataTableRow" category="api" />
+
+## Accessibility
+
+`role="treegrid"` is applied to the table; rows expose `aria-level`, `aria-expanded`, `aria-posinset`, `aria-setsize`. Expander buttons emit `aria-expanded` and a descriptive `aria-label`. See [Primitive](/docs/primitive/components/treetable#accessibility) for full WAI-ARIA compliance details.

package/data/llms/headless/guides/ai/llms.md

@@ -0,0 +1,25 @@
+# LLMs.txt
+
+LLMs.txt is a file that contains the LLMs for the PrimeReact documentation.
+
+## /llms.txt
+
+The [llms.txt](https://llmstxt.org/) file is an industry standard that helps AI models better understand and navigate the PrimeReact documentation. It lists key pages in a structured format, making it easier for LLMs to retrieve relevant information.
+
+<Button as="a" href="/llms.txt" target="_blank">Open llms.txt</Button>
+
+&nbsp;
+
+## /llms-full.txt
+
+The `llms-full.txt` file is a complete list of all the pages in the PrimeReact documentation. It is used to help AI models understand the entire documentation set.
+
+<Button as="a" href="/llms-full.txt" target="_blank">Open llms-full.txt</Button>
+
+&nbsp;
+
+## .md extension
+
+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>

package/data/llms/headless/guides/installation.md

@@ -0,0 +1,126 @@
+# Installation
+
+Install PrimeReact's headless hooks and build fully custom components in your React project.
+
+<DocMessage>
+Start from our <a href="https://github.com/primefaces/primereact-examples/tree/main/nextjs-headless-quickstart" target="_blank" rel="noopener noreferrer">Next.js template</a>, pre-configured with PrimeReact.
+</DocMessage>
+
+Headless hooks give you the behavior — state, keyboard navigation, focus and accessibility — while you own the markup and styles. They work in any React setup; the steps below show a Next.js example you can adapt to your own framework.
+
+<DocStepper>
+    <DocStep>
+
+### Install Packages
+
+Install the headless package using your favorite package manager:
+
+```bash
+npm install @primereact/headless@11.0.0-rc.2
+```
+
+    </DocStep>
+    <DocStep>
+
+### PrimeReactProvider
+
+Wrap your app with `PrimeReactProvider` so the hooks' shared context is available everywhere. No theme or preset is needed — you style everything yourself:
+
+```tsx showLineNumbers title="components/prime-provider.tsx"
+'use client';
+import { PrimeReactProvider } from '@primereact/core';
+
+export function PrimeProvider({ children }: { children: React.ReactNode }) {
+    return <PrimeReactProvider>{children}</PrimeReactProvider>;
+}
+```
+
+Then wrap your app with it in `app/layout.tsx`:
+
+```tsx showLineNumbers title="app/layout.tsx" {1,6}
+import { PrimeProvider } from '@/components/prime-provider';
+
+export default function RootLayout({ children }: { children: React.ReactNode }) {
+    return (
+        <html lang="en">
+            <body>
+                <PrimeProvider>{children}</PrimeProvider>
+            </body>
+        </html>
+    );
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Add a `cn` Helper (optional)
+
+If you style with Tailwind, a `cn` helper makes merging class names easier. Install `tailwind-merge` and create `lib/utils.ts`:
+
+```bash
+npm install tailwind-merge
+```
+
+```ts showLineNumbers title="lib/utils.ts"
+import { cn as _cn } from '@primeuix/utils';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: unknown[]) {
+    return twMerge(_cn(...inputs));
+}
+```
+
+    </DocStep>
+    <DocStep>
+
+### Verify
+
+Build a component with a hook and style it yourself — the hook wires up state, keyboard, focus and accessibility:
+
+```tsx
+'use client';
+import { useButton } from '@primereact/headless/button';
+import { cn } from '@primeuix/utils';
+
+export default function VerifyDemo() {
+    const { rootProps } = useButton();
+
+    return (
+        <div className="flex justify-center">
+            <button
+                {...rootProps}
+                className={cn(
+                    'inline-flex items-center justify-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800'
+                )}
+            >
+                Verify
+            </button>
+        </div>
+    );
+}
+```
+
+```tsx showLineNumbers {2,6}
+'use client';
+import { useButton } from '@primereact/headless/button';
+import { cn } from '@/lib/utils';
+
+export default function VerifyInstallation() {
+    const { rootProps } = useButton();
+
+    return (
+        <button {...rootProps} className={cn('inline-flex items-center justify-center rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white transition-colors hover:bg-neutral-800')}>
+            Verify
+        </button>
+    );
+}
+```
+
+    </DocStep>
+
+</DocStepper>
+
+## Next Steps
+
+[Browse the hooks](/docs/headless/components/autocomplete) and compose the behavior you need into your own markup and styles.

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

@@ -0,0 +1,20 @@
+# Headless
+
+React hooks that handle logic and accessibility. You bring your own markup and styles.
+
+## Overview
+
+Headless mode exposes each component as a hook, like `useDialog`, `useSelect`, or `useAutoComplete`. Hooks return props you spread onto your own elements. You get state management, keyboard interactions, focus handling, and ARIA wiring. You write the JSX and CSS.
+
+Use headless mode when you want maximum control over markup and styling, or when you're building a custom component library on top of our logic.
+
+## What you get
+
+- 70+ hooks covering every interaction pattern
+- Zero opinion on markup or styling
+- Full TypeScript inference on returned props
+- The foundation for our Styled, Tailwind, and Primitive layers
+
+## Next steps
+
+Browse the hooks in the sidebar or check [Getting Started](/docs/overview/gettingstarted/introduction) for setup.

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

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

package/data/llms/headless/llms.md

@@ -0,0 +1,25 @@
+# LLMs.txt
+
+LLMs.txt is a file that contains the LLMs for the PrimeReact documentation.
+
+## /llms.txt
+
+The [llms.txt](https://llmstxt.org/) file is an industry standard that helps AI models better understand and navigate the PrimeReact documentation. It lists key pages in a structured format, making it easier for LLMs to retrieve relevant information.
+
+<Button as="a" href="/llms.txt" target="_blank">Open llms.txt</Button>
+
+&nbsp;
+
+## /llms-full.txt
+
+The `llms-full.txt` file is a complete list of all the pages in the PrimeReact documentation. It is used to help AI models understand the entire documentation set.
+
+<Button as="a" href="/llms-full.txt" target="_blank">Open llms-full.txt</Button>
+
+&nbsp;
+
+## .md extension
+
+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>

package/data/llms/headless/resources/introduction.md

@@ -0,0 +1,15 @@
+# Resources
+
+Support channels, legacy versions and places to discover more about PrimeReact.
+
+## Overview
+
+Everything around the library, where to get help, find older versions, and stay up to date.
+
+## What's here
+
+- **Support**, get help on Discord, the community forum, or through premium support.
+- **Legacy**, documentation for previous major versions.
+- **Discover**, the store, social channels and newsletter.
+
+Pick a category from the sidebar to jump in.

package/data/llms/hooks/gettingstarted/introduction.md

@@ -0,0 +1,34 @@
+# Introduction
+
+A standalone collection of React hooks from @primereact/hooks.
+
+## Overview
+
+`@primereact/hooks` is a standalone library of React hooks. Each hook solves one concrete problem, filtering a list, formatting a number, watching a media query, reacting to a resize, and none of them render DOM or depend on PrimeReact components.
+
+You can use it in any React project. It is the same package PrimeReact itself builds on, published separately so you can reach for a single hook without pulling in a component library.
+
+## What you get
+
+- **No framework lock-in.** The hooks work with any React setup, CRA, Vite, Next.js, Remix, React Native Web.
+- **Tree-shakeable.** Every hook has its own entry point; bundlers only ship what you import.
+- **Typed.** Full TypeScript declarations. Generic hooks pick up your data type automatically.
+- **SSR-safe.** Hooks that touch the DOM are marked `'use client'` internally, importing from a server component is fine.
+
+## Conventions
+
+A few things are true across the suite:
+
+- Stateful hooks support controlled and uncontrolled usage. Pass `value` + `onChange` to control, or start from a `default*` prop and let the hook own the state.
+- Options are passed as a single object. Return shapes are destructurable, pick what you need.
+- Hook names follow the `useX` convention and ship from `@primereact/hooks/use-x`.
+
+```tsx
+import { useFilter } from '@primereact/hooks/use-filter';
+
+const { filteredData, setValue } = useFilter<Customer>({
+    data: customers,
+    field: 'name',
+    value: query
+});
+```