The component sizes (e.g., Button, Input, etc.) are too large. How can I make them smaller like in the PrimeNG component tutorial pages?

[duydn-dev]

Hello, I’m using PrimeNG for my Angular 20 project, but the component sizes are larger compared to the examples on the PrimeNG documentation site.
Is there a way to configure or adjust this?
Thanks for reading !

[alexpozzani]

Here is the answer: https://primeng.org/theming/styled#scale

PrimeNG UI component use rem units, 1rem equals to the font size of the html element which is 16px by default. Use the root font-size to adjust the size of the components globally. This website uses 14px as the base so it may differ from your application if your base font size is different.

[cagataycivici]

Showcase uses font-size: 14px in document body. To address this issue, we'll release primeuix/themes 3.0 that use 16px as based which is the default and adds new typography tokens for font sizes. This work has been done already and being tested at the moment. Planned to be released by the end of March.

Here is the alpha version, it uses the default 16px base of the browser and adjusts line-heights and spacing to make sure it is consistent.

npmjs.com/package/@primeuix/themes?activeTab=versions