Unstyled Mode

Unstyled mode consists of two solutions. First part is removal of the component specific style classes from the DOM, when unstyled setting is enabled components do not include any CSS selectors while core functionality is still available. For example, in the default styled mode, the dropdown component adds .p-dropdown style class to the root element and includes CSS to corresponding style. In unstyled setting, this style class is not added to the root element and the CSS is not included in the page.

The second part is custom styling as components are displayed as transparent without their styles. Pass Through Props feature is the key of since it also supports a global configuration to create themes in unstyled mode. In fact, the upcoming Tailwind theme is basically a custom pt configuration.

Unstyled mode is enabled for the whole suite by setting unstyled as true during PrimeVue installation.

import { createApp } from "vue";
import PrimeVue from "primevue/config";
const app = createApp(App);

app.use(PrimeVue, { unstyled: true });

Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the unstyled prop of the component.

<Button label="Check" icon="pi pi-check" unstyled></Button>

Here is a sample that provides a style using PrimeFlex CSS library. Before beginning, head over to the pass through section button documentation to learn more about the components internals. We'll be using the root, label and icon elements to add a custom style.

<Button label="Check" icon="pi pi-check" unstyled
    :pt="{
        root: { class: 'bg-teal-500 hover:bg-teal-700 cursor-pointer text-white p-3 border-round border-none flex gap-2' },
        label: { class: 'text-white font-bold text-xl' },
        icon: 'text-white text-2xl' // OR { class: 'text-white text-2xl' }
    }"
/>

An unstyled theme is basically a global pt configuration so that it can be defined only once from a single location, still a particular component can override a global configuration since the pt props of a component and the global setting is merged with component having higher precedencee.