@primereact/styles

The style layer behind @primereact/ui. One module per component, mapping props and state to .p- class names and to the CSS the active PrimeUIX preset resolves at runtime.

Direct installation is rarely needed, since @primereact/ui already includes it. Install it to apply PrimeReact styling to a custom component, or to build a styled layer on top of the primereact primitives.

npm install @primereact/styles

Usage

Each component's style module is exported from its own subpath, and every primitive accepts a styles prop. Passing the module in produces the same result @primereact/ui gives.

import { styles } from '@primereact/styles/button';
import { Button } from 'primereact/button';

<Button styles={styles} severity="danger" variant="outlined">
    Delete
</Button>;

How it works

Styles are JavaScript objects rather than static CSS. Class names are computed from props and state through createStyles, then resolved at render time by cx(). A button with severity="danger" and variant="outlined" picks up the right combination without manual toggling. Its counterpart sx() does the same for inline styles. In unstyled mode cx() returns undefined, which is how a single flag strips every PrimeReact class.

The CSS itself carries dt('token.path') references that the @primeuix/styled runtime resolves against the active preset. Swapping the preset therefore re-themes every component at once. Pass Through hooks into the same layer: classes and attributes can be overridden per element without touching a style module.

Documentation

• Theming
• Unstyled mode & Pass Through
• MCP server

License

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