Theming

This starter kit provides a collection of custom theme presets to choose from, built using the powerful PrimeVue V4 theming system. It leverages styled mode and custom design token values to create flexible and cohesive UI designs.

Provided Theme Presets

The theme presets are located in the /resources/js/theme directory. Each preset offers a distinct visual style:

bootstrap

Emulates the look and feel of Bootstrap.

breeze

Captures the aesthetic of Laravel Breeze. (R.I.P. 🙏)

enterprise

Provides a clean, no-nonsense corporate design.

noir

A minimal & clean monochromatic style that serves as the default theme.

warm

A boxy design with a warmer color pallette.

Customizing Your Own Theme

Creating your own theme preset is simple. You can:

• Swap the primary values with a different set of colors.
• Adjust the colorScheme surface values (e.g., slate, gray, neutral).
• Change the extended preset theme.

For detailed guidance on customization, please refer to the PrimeVue Styled Mode Docs.

PrimeVue v4 w/ Tailwind CSS

To clarify, Tailwind is not used for any component styling in this starter kit; instead, we use PrimeVue's styled mode with a custom theme preset implementation for component styling. Tailwind is applied solely for layout purposes around PrimeVue components and for minimal styling when needed.