Unstyled Mode

The term unstyled is used to define an alternative styling approach instead of the default theming with design tokens. PrimeVue offers two options for styling the components with your own css; the hybrid mode and the pure mode.

In both options, the css variables of the design tokens and the css rule sets that utilize them are not included. The main difference is, the hybrid mode keeps the selectors in the DOM such as p-select whereas the pure mode do not include them. Unstyled components still need to be styled on your end, in the next sections, we'll cover the styling solutions for both modes.

It may be confusing which styling approach to choose from due to the amount of options such as Styled, Pure and Hybrid. We've created a short video that discusses the pros and cons of each approach.

In summary, the styled mode is a powerful API to learn with first class support for Figma, as a result when working with a UI Designer that utilizes the PrimeVue Figma UI Kit, the development flow would be productive. The unstyled mode is beneficial when you do not prefer to learn the default theming API, want full control over the styles or require Tailwind CSS as the only library for styling in your application. The downside of unstyled mode is that it requires the styles need to be maintained in the application.

Pure mode is enabled for the whole suite by enabling unstyled option 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 styles a button component with Tailwind CSS using pass through attributes. Before beginning, head over to the the pass through section at button documentation to learn more about the components internals section. We'll be using the root, label and icon elements to add a custom style.

<Button
    label="Search"
    icon="pi pi-search"
    unstyled
    pt:root="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2"
    pt:label="text-white font-bold text-lg"
    pt:icon="text-white text-xl"
/>

A global configuration can be created at application level to avoid repetition via the global pt option so that the styles can be shared from a single location. A particular component can still override a global configuration with its own pt property.

Tailwind CSS is perfect fit for the pure mode, our team has initiated the reference implementation of the global pt configuration to style the entire UI suite called the Tailwind CSS presets. This add-on project is currently looking for community contributors to take over the ownership as it requires significant bandwidth for PrimeTek to maintain both the styled mode and the unstyled mode presets via pass-through.

Hybrid mode is enabled for the whole suite by setting the theme option as none.

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

app.use(PrimeVue, { theme: 'none' });

In hybrid mode, the default css rules and variables are not included however the css selectors reside in the DOM so that you may use them to build your own rules.

.p-button {
    background: #a855f7;
    border: 0 none !important;
    color: white;
    padding: 0.5rem 0.75rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    border-radius: 24px;
}

.p-button:enabled:hover {
    background: #a855f7;
}

.p-button:enabled:active {
    background: #9333ea;
}

PrimeTek offers the Tailwind CSS version of the entire PrimeVue UI suite based on the @apply directive with IntelliSense support. Visit the Tailwind version of PrimeVue for the documentation, demos and additional resources.