PrimeVue | The Next-Gen UI Component Library

Hello, welcome to the presentation about Prime Vue, the next generation UI component suite. In this talk, I'll be covering the Prime Vue and how Vue.js helped us to build this comprehensive UI library.

So about Prime Tech, the company behind Prime Vue, we are actually a UI component library vendor, that's the only thing we do. It started with the Prime Faces for Java, and now we have the Angular version, Prime NG, Prime React, and finally, today's topic, Prime Vue. So in total, we have more than 150 million downloads worldwide, and our libraries are getting more popular every day. These are open source, free to use, and our business model is based on some add-ons.

So what we have at Prime Vue, we have more than 90 components, from date pickers, to buttons, to advanced components like tables and grids, and we also have the built-in accessibility that we have worked really hard. On top of it, we provide the styled mode and unstyled mode. Styled mode is the regular UI library that provides persistent themes. And the unstyled mode provides you a freestyle approach to do whatever you like to style it. So, and we also have the Vue.js templates in case you'd like to start something ready, and prime blocks, more than 400 blocks in case you'd like to copy-paste UI sections to your pages to build your own. And for your designers, we have the Figma UI Kit. So a lot of stuff. And most of these are under MIT, the whole component library is under MIT, and the paid add-ons are like those blocks and Vue.js templates, so no paywall. So I think it's the most comprehensive UI library right now, and it's getting better and better every day.

So let's begin this, I mean, we've been working on this UI library development since 2008, so 16 years now, and we have seen a lot of trends come and go. And the question remains, what makes a UI component good? And the answer is, there's no single answer, actually. Whatever works for someone may not work for someone else. So we have taken a different approach with Prime Vue. We try to cover a lot of ground. So that's why we introduced Unstyled Mode and Styled Mode. But in its core, it had to be accessible. It had to be customizable because you're creating these components not for yourself, not for a specific requirement, but it's for public usage, common usage. So it has to cover a lot of requirements. So we provide a lot of events, callbacks for you to hook in, and a lot of templating to provide your own UI. And the majority of components provide headless mode, so you can replace the custom UI. And in case you are using something like Tailwind, you can also style them with Tailwind. Or if you like something else, I mean, it's really, really flexible and quite comprehensive, as I mentioned. So 90 plus components, from tables to drop-downs, calendars, all of these are free and licensed under MIT. And we have our own design system, but you can also use it with another style, as I mentioned, which I will cover in detail.

The main thing is the accessibility. I mean, I think it's something overlooked, mostly by the UI component library authors, unfortunately, but there are laws and there are many specific requirements lately. And we spend a lot of time, a couple of months on this for WCAG compliance. We use semantic HTML as much as we can. If that doesn't work, if it's too limiting, we fall back to area rows and attributes. And for colors, we make sure that colors are past the tasks of the accessibility. And keyboard support is in case for users who cannot use the pointers and mouse, or just prefer to use the keyboard. And screen readers are also available in case your user requires a screen reader to interact with your page. And that's the main thing about it. The Prime View is design-accessible. You see that some component libraries depend on certain styles, like Material, but in Prime View, we have our own design. But you can also switch it to another design like Material. In fact, we have themes for Material design and also a couple of themes based on what our design team has created. And the question remains, styled or unstyled? That's the common question that we receive constantly. Styled mode is like provides you preset components that you choose from.

We have the design tokens, so that based on the design tokens, you'll be able to customize it. It is quite, let's say, well-specified. But if you like something which we call freestyle, then you go unstyled, you use something like Tailwind. There's no API to learn, really strict API, and you can just use whatever Tailwind class on those components, and you can just style them the way you like it.

So styled mode is this one. We have a couple of themes, but Aura is the latest one. And our design team has spent a lot of time to create this professional-looking template. And it has different modes, different... You can easily customize the colors, all the colors and surfaces, the borders, everything. The focus visuals and majority of the parts, the shadows are available to be customized so that you can tweak it for your own needs.

And if you need something looking nice out of the box, then the probable styled mode is for you. And unstyled mode is implemented in a way that Vue.js allowed us to do it very easily. So in a regular library, you have the components. They render some specific CSS classes like P something, like in this case, PInputText. And if you set it unstyled to true globally, or you can also use it on a certain component, those CSS selectors are not rendered to the DOM, which means they will lose their style. And you can also do it with the unstyled property so that you can choose a certain component to be unstyled. So unstyled means that it's functional, fully functional, accessibility is there, but when you run it, you will see a transparent look. It won't be really attractive. So that means you have to style it somehow.

In that case, the magical, the pass-through properties, the pass-through attributes come in. So usually this is something we've seen from the community after developing these libraries for years. So some users prefer nice looking components out of the box, but some users really need to customize them. For those, these are like black box components, right? You just add the tag name and you interact, but they include a lot of DOM elements. In this case, you would like to access to the component internals. You can use these pass-through attributes. So for example, this drop-down has a lot of DOM elements, like lists, panel, the close icon and so on. So you can easily customize them and access them. You can add classes, you can add any attributes to DOM, like test IDs or something. For example, this drop-down has a root item and clear icon. You can add events and everything, and you can use it locally for a specific component, or you can use it globally for all drop-downs.

And that the global PT, what we call is the way to style the unstyled version of the prime view. In fact, we have created a tailing CSS project based on this. So the pass-through is a syntax that you need to get used to. And we provide a programmatic approach and a declarative approach so that you can choose between the two. The programmatic is more flexible, with conditionals and so on. But once you get used to this API, you realize it is fully customizable and fully flexible.

And here's an example that I use. For example, I was just hanging around the Discord server. There was a user asking for, how can I just clear the filter when the user clicked on that search icon? That search icon is there for decorative purposes. So what I suggested that just use a PT and the filter icon key is there. It passes you the state, and you can add classes, the data, the site, or whatever, just for an example. And that onClick attribute is there. You have the state, these are typesafe. So in case you're using TypeScript, you can access all these variables as well because PrimeView is a really nice TypeScript support, and you will be easily able to clear the filter.

So in a regular scenario, with a traditional library, you have to go to the GitHub, create an issue, and say that I need this event called onFilter. I can click so that I can clear the filter. But that's not the case with PrimeView. We're not really tied to the Compound Library Router because the PT allows you to do many things that is not available in many other libraries. So since the PT allows you to pass styles, the PrimeView is actually an interesting library because you can use Tailwind without actually depending on Tailwind, because at PrimeView, we don't want to depend on Tailwind because it's another CSS library for us. We have our own stuff, our own API.

But the users who like to heavily use Tailwind in their applications, they may want to integrate their Tailwind classes into the Compounds as well. That's why we have chosen this path. And that's not Tailwind. In the Vue ecosystem, Uno CSS is probably very popular too, but you can also use Boom and Bootstrap, not for all Compounds, but because they have highly open-ended classes like Dropdowns and Buttons, and they expect a certain DOM structure. But Uno CSS and Tailwind are the perfect fit. That's why we have created this project called Tailwind Presets. Tailwind Presets are like global PT configuration that you can enable. And when you set onStyle to true, the Compounds receive their styling from your Tailwind PT Presets. Since they are not available on NPM, you just need to get them from GitHub, from our CLI tool, or just use the UI builder for Preset Builder so you can grab which Compounds you like. And you need to copy them to your page so that although the PrimeVue comes from NPM, the styling is in your project so that you can tweak things and change things easily.

Check out the Tailwind Presets project, which will allow you to build your own UI libraries as well. In fact, we have the Preset Gallery, the community-driven presets, and not just presets, just for example, I've created a couple of samples like how to do a material input switch, snack bars, material inputs, and so on. And it's actually easy to build your own. This is a common trend that I've seen mainly in enterprises. They wanted, developers have been tasked with, I mean, creating their in-house UI library, but they don't have a lot of time and resources. So PrimeVue onStyledMode is the perfect fit because the onStyledMode's mode is unopinionated, right?

So for example, here's an input switch that's based on a PrimeVue, it's an onStyledMode, and using the inherited attributes, which is the magical feature of Vue. So we bind any attributes that we see from the user to the input switch. We have a PT. The PT is for your, in case you are Tailwind, your own opinionated class. And then, since you are wrapping it in your ToggleSwitchSfc, single file component, you'll be able to use ToggleSwitch based on PrimeVue switch, but the user doesn't know about the PrimeVue. They're using your own UI library. So you get accessibility in all the features out of the box. You just plug in your own styling. And you can distribute it among different applications.

The Figma UI kit is there in case you are working with a design team in your application. We have our own Figma UI kit. Our design team has created this, and it's currently version two and version three is coming up with a great update. We are updating our design tokens. So in case your designers need to design the pages using Figma, they can grab our Figma UI kit. Please note that this is paid as well. And the Prime blocks, we have been doing blocks since 2018 or 17, I don't know. I've been doing this for a long time, so I just lost track of time. So the Prime blocks are like copy-paste ready. They are based on Primeflex right now, but they are moving to Tailwind so that you can just... The same idea about Tailwind UI because this block thing is many. I think many people have started doing this, but we have a lot of blocks. I think more than 450 blocks, landing pages, marketing, application blocks, and many things. The Prime blocks are moving to primeblocks.org so that you will be able to log in, see the Prime blocks, choose from Vue and other versions as well. They are copy-paste ready so you copy it and put it in your application and start using them. In case you just want to build your UI, like a landing page yourself or your dashboard yourself, we have different dashboards as well, Prime blocks, the option might be for you as well.

And finally, we have the vid templates. In case you don't want to build your own UI with the blocks, all the blocks work fine with the templates. In case you need some open-ended, professional-designed UI template, please visit our template gallery. We have a couple of them that you can choose. They're quite flexible. They have different menu modes and different theming.

All right. So the next-gen version is version four. That's the upcoming version of Prime Vue, and it's changed a lot of things in the UI. So the biggest change is the theming API in version three. Since we are doing this for a long time, when we started in 2008, there were not many CSS variables, no SASS and nothing. So we keep updating our libraries every maybe five years because the pattern is that every five years there's a technological leap, and that is the time now in 2004.

So now we are dropping SASS, and since you can do CSS variables and CSS nesting, SASS is not really necessary anymore. The theming was just another repository. You compile the theme CSS and edit your project, which was not really super reshakeable. Now we are moving it into the core as regular CSS, and there's no chunky, big theme CSS file. The dark mode switch is in the past we had to, in version three, we had to switch theme CSS. Now it's all dynamic thanks to CSS variables. And the cool thing is that it is fully Figma compatible so that you'll be able to generate themes from Figma using our upcoming Figma plugin. So it is all design token-based. It's the state of the art system actually that we are really proud of. You have the primitive tokens, semantic tokens, and the component tokens. Primitive tokens are the tokens which doesn't have any context like blue 500, nothing. Just colors or like P3, like the padding three. They just don't have any meaning. But semantic tokens are like primary color that when you read it, you will understand the context. And the primary color maps to primitive color like blue 500. And component tokens like button, background, checkbox, check background, panel, border color, actually depends on semantic colors. You may choose to swap the primitive colors, semantic colors, or component colors. It all depends on you. If you have lightweight customizations, go with semantic token customization.

As I mentioned, these map to the Figma UI kit so that you can generate themes from Figma. And they are mapped to the CSS variables in the code.

So here's the theming API from V4. We import presets. Presets are the design token set. So it feeds the prime view to decide how the theme will look. The Aura in this case provides different shadows for inputs, different borders, different focus visuals, focus rings, and so on. And the options are how this generated CSS would be like in case you'd like to customize CSS variable prefix, or in case you'd like to leave the dark mode to the user, in case you'd like a CSS layer for user customization. These are all available. And these Aura is right now the current one. And we will be providing more presets in Material 2.3. And you'll be able to plug in your own design token set to fully customize the theming.

As I mentioned, we are working hard with our design team to make sure these tokens map to the actual Figma variables and Figma tokens, so that our upcoming Figma plugin will be able to generate these because your designers may create the best looking theme, but that will be the developer's responsibility to put it, to implement it to the code, which will require a manual process. And there are many tokens. So in this case, our plugin will do it automatically for you, and it will be very easy to maintain. And the new UI designer is that, in case you're not working with Figma, you can log onto the designer website, and there will be component demos for every component. And at the right side, you will be able to change everything like colors and so on, and export will give you the design, and it will be compatible with Figma so that you can just import the Figma JSON file and put it so it will be two-way binding to the Figma in case you are using Figma.

So the Primeflex CSS was our CSS library, but now with the Tailwind CSS process and upcoming layout typography components, there's too much overlap. So we are moving away from Primeflex and replacing with the layout and typography components in start mode and on start mode. I think users are usually using something like Tailwind or Bootstrap. So we are providing new free samples, like the free dashboards are coming up. They will be implemented with layout and typography components and also Tailwind. So to give you an idea of what you can build with PrimeView, these are also work in progress and will be available for free, just like PrimeBlocks will be available with many new free blocks. And note that we also have a free template called Sakai from Costa of Tsushima.

Prime CLI, the CLT command line tools is also the beta version is out. It enables you to start a NUX project, a VIT project. It will enable because PrimeView has premium support for NUX with our own NUX module, and the Tailwind Preset Manager will be able to grab these presets from GitHub and sync and update them. And the migration assistance will be able to provide, you know, code migration from the different versions of PrimeView. And finally, Primeflex to Tailwind, in case you were using Primeflex heavily, although there are similarities between classes, this tool PF2TW will be able to convert Primeflex code to Tailwind. Okay, let's finalize with the road map.

Q1 is done, V4 beta is out, and the final is very close, but in the early Q2. In second quarter, we will work on Figma2 theme. Plugin layout and type work components are coming out. The users have been asking for a from library. We will be providing some built-in from library for validations and getting, collecting the data from various components. RTL support is coming in the second quarter. Our Tailwind is in progress, and also the material preset for our new theming is coming up because we would like to cover the materials as well.

In third quarter, we will be offering the UI Designer, and we will be tackling the advanced set of PrimeView components. These, I mean, our job is creating UI components. Now, the PrimeView moves to the next channel, we can finally tackle these heavy-duty complex components like the Gantt charts, spatsheets, HTML editors, flowcharts and event calendars. They will be part because PrimeView is not just, you know, simple live components. It's created to tackle enterprise requirements as well. And the UI Builder is something that we are really excited about. And then we plan support so that it will be a tool for drag-and-drop, and you can bind the backend, so that you can even deploy it from the application.

As I can see, the poll is quite close. Lots of people like both unstyled and styled styles. First, a light preference for unstyled. I mean, that maybe makes sense in terms of customization for maybe like bigger companies. What do you think about the result, Csatay? Yeah, that's what I was expecting actually, because we have been doing this component library development for a long time. And this is the thing, this is the result that we've seen in the community as well, because some users, there's no single solution. Some users prefer the unstyled mode where they want to customize UI components, and some users, they just want pre-styled that looks good.

And on behalf of our team, I would like to thank you for joining me. And always bet on Prime, thank you.

As I can see, the poll is quite close. Lots of people like both unstyled and styled styles. First, a light preference for unstyled. I mean, that maybe makes sense in terms of customization for maybe like bigger companies. What do you think about the result, Csatay? Yeah, that's what I was expecting actually, because we have been doing this component library development for a long time. And this is the thing, this is the result that we've seen in the community as well, because some users, there's no single solution. Some users prefer the unstyled mode where they want to customize UI components, and some users, they just want pre-styled that looks good. It has to look good, of course, but they want it pre-styled, but they have some minimal customizations here and there. The styled mode is more defined. I mean, there's a design token API in the version for it will be much better, of course, with the specific focus on the design token architecture. And unstyled, I mean, you are free. This freestyle mode that we call it. Popular choice is, of course, Tailwinds, but you can use it with Uno CSS as well, and some components that fit in with Bootstrap and things like that. So I'm not surprised, and this is what we've seen from our community as well. But it's nice to offer choices, you know, so that people can choose whatever theming approach they like. Yeah. And that's also like usually the pain point with UI libraries is the fact that they are not customizable enough. So that's very welcome.

Let's move into Q&A's. So we have quite a lot of questions. Let's maybe start by the, when do you know, when do you think Prime Vue 4 will be released? Do you have like any ETA? Yeah, it was supposed to be released by now, but I mean, we have some delays, but hopefully in May. It's definitely the next week there will be a new beta version 2 and the week after that will be a third beta and then there will be RC. So if you follow this schedule, mid-May sounds like the release of our first release candidate. And then of course we will keep improving it after Vue 4. Some of the features do not fit in Vue 4 because we don't want to delay it. We will keep working on issues, but let's say mid-May. Okay, perfect.

Okay, perfect. Thanks. Yeah, I mean, that's coming very fast, so that's good.

Yeah. There's one. So the pass-through PT is a style string. Is there a dev tooling for this, syntax highlighting, caching type? It has two modes, actually. There's a string mode. The string mode, unfortunately, it's been released lately. So there's no tooling support, but with the regular object approach syntax there is, of course, the tooling support. But we have plans to provide some VS Code extensions, code compilation, especially on the PT. So that's one of the things to improve the developer experience. We also received this feedback, and we also have plans to provide an IDE extension for this.

Okay, amazing. Thanks. So there is one saying, not sure if I understood correctly, will Primeflex be duplicated and we need to use uninstall mode with Tailwind instead? Yeah, yeah, once we realized that we are trying too much. Primeflex is one of them. I mean, our job is to provide reusable UI components. And we realized that we are trying to create a CSS framework as well. That's why we decided to push, and the community demand was on more Tailwinds. And instead of competing, we decided to collaborate. So we suggest using Tailwinds with uninstall mostly. And we provided Tailwind presets as well. So that entire UI suite can be started with Tailwinds. And that was a decision based on community demand and less work for us to maintain.

Yeah, and that's probably the best so that you can focus on the important parts. But we've also written a small tool to convert Primeflex code to Tailwinds, so that migration can be automated. It's coming next week as well. Damn, shipping fast. That's very welcome because people usually hate Maya migrations.

So thanks again. You mentioned expanding the form handling capabilities. Are you also considering integration with other form-focused libraries such as FormKit? Yeah, we also met FormKit guys and we collaborated with them to make sure that FormKit works well with PrimeView. Also we validate. But I mean, there's a demand from our own community as well to provide some simple form library that does the job. It's not meant to compete with FormKit, but it's just a small utility to help out with the forms. But for more advanced cases, of course, they can use FormKit, but we are working with them. So they're collaborating with them. And we met in conferences and even met some discussions online.

Okay. Online, on site. Yeah. Perfect. Is PrimeView compatible with Vue 2.0? We had a version. We still have a version for Vue 2.0, v2.primeview.org, but it's in maintenance mode. So you may not expect a lot of new features. So it's like, and we don't do a lot of releases, but only if there's some major bugs and things like that. So we suggest using version 3 and version 4. Version 3 will be maintained until the end of the year as well, to make sure the migration is smooth.

How does PrimeView compare with other UI libraries? I think PrimeView has really comprehensive, we have more than eight components, probably more than an average application needs. And we also provide a styled mode and unstyled mode, which I haven't seen a lot in applications in different libraries. And it's maintained by company. So hopefully it's not going anywhere soon. It's not like a hobby project or side project. It's mostly an open source product. So many people are working on this full time. So a couple of differences, I would say. Yeah. I was very happy to see that it moved from a project into some open source. That's very amazing. I think we're out of time. If I'm not mistaken. But thanks again for all of those answers and for your amazing talk. And see you very soon sometime. I wish you a good day. Bye. Bye. Yeah.