@primereact/headless

PrimeReact Headless

Unstyled, behavior-only React hooks for 80+ components. Each hook handles accessibility, keyboard navigation, focus management, state, and ARIA attributes — with no CSS or visual assumptions attached.

What's inside

Every component has its own hook that returns prop getters and internal state handlers:

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

const { rootProps, labelProps, iconProps, loadingIconProps } = useButton({
    label: 'Submit',
    loading: isPending,
    onClick: handleSubmit
});

return (
    <button {...rootProps}>
        {loadingIconProps && <span {...loadingIconProps} />}
        <span {...labelProps} />
    </button>
);

Prop getters include data-scope / data-part attributes so CSS can target elements without class-name coupling. Interaction behavior — keyboard shortcuts, focus trapping, selection logic, virtual scrolling, typeahead — is all handled inside the hook.

Available hooks

Covers the full PrimeReact component set: useButton, useAccordion, useAutocomplete, useSelect, useDatePicker, useDataTable, useDialog, useTree, useListbox, useCarousel, useTabView, useSteps, and more.

Each hook lives in its own subpath (@primereact/headless/button, @primereact/headless/datatable) so only the hooks in use are included in the bundle.

License

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