---
layout: ../../layouts/PageLayout.astro
title: Popular UI Libraries
description: Validating popular Vue.js UI libraries with examples
order: 10
---

import LiveExample from '@/components/LiveExample.vue';

# UI Libraries Examples

Most popular Vue.js UI libraries come with their own built-in form logic and some may tackle a lot of what vee-validate tackles. If you find yourself not satisfied with said library's logic, you can add vee-validate power up these components.

vee-validate is UI-agnostic, it doesn't offer any special treatment for the elements/components as long as they emit the right events.

Integrating vee-validate can be different for each UI library, it mostly depends on the library's ability to outsource the form logic to 3rd party logic and how it tracks the form field values.

In the next few examples you will find examples on how to do that in various ways with the most popular Vue.js libraries in no particular order.

## Shadcn Vue

> Beautifully designed components that you can copy and paste into your apps. Accessible. Customizable. Open Source.

ShadCN has an official guide on how to use vee-validate with their components, check it out [here](https://www.shadcn-vue.com/docs/components/form).

## Vuetify

> [Vuetify](https://vuetifyjs.com/en/) is a no design skills required UI Library with beautifully handcrafted Vue Components.

<LiveExample client:visible id="vee-validate-v4-vuetify" click-to-load preview-only />

Check their [official example here](https://vuetifyjs.com/en/components/forms/#vee-validate).

## PrimeVue

> [PrimeVue](https://primevue.org/) is a rich set of open source UI Components for Vue.

<LiveExample client:visible id="vee-validate-v4-prime-vue" click-to-load preview-only />

Check their [official example here](https://primevue.org/inputtext/#veevalidate).

## Quasar

[Quasar framework](https://quasar.dev/) aims to:

> Effortlessly build high-performance & high-quality Vue 3 user interfaces in record time

<LiveExample client:visible id="vee-validate-v4-quasar-framework" click-to-load preview-only />

## Element Plus

> [Element Plus](https://element-plus.org/#/en-US), a Vue 3.0 based component library for developers, designers and product managers

<LiveExample client:visible id="vee-validate-v4-element-plus" click-to-load preview-only />

## Headless UI

> [Headless UI](https://headlessui.dev/), a completely unstyled, fully accessible UI components, designed to integrate beautifully with Tailwind CSS.

<LiveExample client:visible id="vee-validate-v4-headless-ui" click-to-load preview-only />

## Ionic Framework

> [Ionic Framework](https://ionicframework.com/), An open source mobile toolkit for building high quality, cross-platform native and web app experiences.

This example is originally forked from another example created by [Aaron Saunders](https://twitter.com/aaronksaunders).

<LiveExample client:visible id="vee-validate-v4-ionic" click-to-load preview-only />

## Ant Design

> [Ant Design](https://next.antdv.com/) provides plenty of UI components to enrich your web applications, and we will improve components experience consistently.

<LiveExample client:visible id="vee-validate-v4-ant-design" click-to-load preview-only />

## Nuxt UI

> [Nuxt UI](https://ui.nuxtlabs.com/) is a Fully styled and customizable components for Nuxt.js

<LiveExample client:visible id="nuxtlabs-ui-vee-validate-v4" click-to-load preview-only />

## Naive UI

> [Naïve UI](https://www.naiveui.com/en-US/os-theme) Fairly Complete, Theme Customizable, Uses TypeScript, Fast, Kinda Interesting

<LiveExample client:visible id="vee-validate-v4-naive-ui" click-to-load preview-only />

## Bootstrap Vue

> With [BootstrapVue](https://bootstrap-vue.org/) you can build responsive, mobile-first, and ARIA accessible projects on the web using Vue.js and the world's most popular front-end CSS library

<LiveExample client:visible id="vee-validate-v4-bootstrap-vue" click-to-load preview-only />

## Request a UI library

Can't find your favorite UI library here? You can request adding an example for it by creating an [issue here](https://github.com/logaretm/vee-validate/issues/new/choose) and we will consider adding it here.
