Unstyled Mode

Architecture#

The term unstyled is used to define an alternative styling approach instead of the default theming with design tokens. In unstyled mode the css variables of the design tokens and the css rule sets that utilize them are not included. Here is an example of an Unstyled Checkbox, the core functionality and accessibility is provided whereas styling is not included. Unstyled components still need to be styled on your end, in the next sections, we'll cover the styling solutions for both modes.

Setup#

Unstyled mode is enabled for the whole suite by enabling unstyled option during PrimeReact installation.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { PrimeReactProvider } from '@primereact/core';
 
createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <PrimeReactProvider unstyled={true}>
            <App />
        </PrimeReactProvider>
    </StrictMode>
);

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

import { Button } from 'primereact/button';
 
export default function AlternativeButtonDemo() {
    return (
        <div className="card flex justify-center">
            <Button unstyled>
                Check
                <i className="pi pi-check" />
            </Button>
        </div>
    );
}

Example#

Here is a sample that styles a button component with Tailwind CSS using passthrough 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 element to add a custom style.

import { Button } from 'primereact/button';
 
export default function ButtonDemo() {
    return (
        <div className="card flex justify-center">
            <Button unstyled pt-root-className="bg-teal-500 hover:bg-teal-700 active:bg-teal-900 cursor-pointer py-2 px-4 rounded-full border-0 flex gap-2 text-white text-lg font-bold">
                Search
                <i className="pi pi-search !text-lg !font-bold" />
            </Button>
        </div>
    );
}

Global#

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.

import { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import App from './App.tsx';
import { PrimeReactProvider } from '@primereact/core';
 
const globalPT = {
    button: {
        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 text-white text-lg font-bold"
    }
    panel: {
        header: 'bg-primary text-primary-contrast border-primary',
        content: 'border-primary text-lg text-primary-700',
        title: 'bg-primary text-primary-contrast text-xl'
    }
};
 
createRoot(document.getElementById('root')!).render(
    <StrictMode>
        <PrimeReactProvider pt={globalPT}>
            <App />
        </PrimeReactProvider>
    </StrictMode>
);