@primereact/headless

@primereact/headless

Behavior-only React hooks. State, keyboard navigation, focus management, selection logic, overlay positioning and ARIA wiring for the full PrimeReact component set, with no markup and no CSS attached.

npm install @primereact/headless

Usage

Each hook lives in its own subpath and returns prop getters that are spread onto plain elements. Every getter carries data-scope and data-part markers for CSS to target, plus whatever event handlers, ARIA attributes and state flags the component needs.

'use client';
import { useButton } from '@primereact/headless/button';

export function MyButton({ children, ...props }) {
    const { rootProps } = useButton(props);

    return (
        <button {...rootProps} className="rounded-md bg-neutral-900 px-4 py-2 text-sm font-medium text-white">
            {children}
        </button>
    );
}

Larger components return one getter per element, along with the state and handlers behind them. useSelect, for example, exposes triggerProps, popupProps, listProps and indicatorProps next to rootProps.

The application is wrapped once with PrimeReactProvider from @primereact/core. No theme or preset is needed.

Documentation

• Installation
• Hooks
• MCP server

License

Licensed under the PrimeUI License - Copyright (c) PrimeTek Informatics