currently Aura, Material, Lara and Nora are the available built-in options.
++ Aura, Material, Lara and Nora are the available built-in options, created to demonstrate the power of the design-agnostic theming. Aura is PrimeTek's own vision, Material follows Google Material Design v2, Lara is based on Bootstrap and + Nora is inspired by enterprise applications. Visit the + source code to learn more about the structure of presets. You may use them out of the box with + modifications or utilize them as reference in case you need to build your own presets from scratch. +
- 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 select component adds .p-select 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 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.
- The second part is custom styling as components are displayed as transparent without their styles.
| + | Hybrid | +Pure | +
|---|---|---|
| p-* selectors in DOM | ++ | + |
| CSS rule sets | ++ | + |
| CSS variables | ++ | + |
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. +
+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.
+Hybrid mode is enabled for the whole suite by setting the theme option as none.
++ 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. +
+Tailwind CSS is perfect fit for the unstyled mode, visit the dedicated
- To get started, UnoCSS should already be available in your application, if not visit the UnoCSS documentation for the installation in various environments. Theming of PrimeVue components with - UnoCSS is mainly achieved with unstyled mode either using global setting or for a particular component only. -
-For a sample, visit the example repository.
-
- Here is a sample that provides a style using Tailwind CSS. Before beginning, head over to the pass through section
- 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. + 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.
Unstyled mode is enabled for the whole suite by setting unstyled as true during PrimeVue installation.
+Pure mode is enabled for the whole suite by enabling unstyled option during PrimeVue installation.
Alternatively even in the default styled mode, a particular component can still be used as unstyled by adding the unstyled prop of the component.
+ 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. +
+
- Verify your setup by adding a component such as
We provide at most 5 accounts per organization.
+We provide 1 shared account per organization.
Styling PrimeVue with your favorite CSS library.
+Theming PrimeVue with your own styles.