Vueless UI

Vueless is an open-source UI library and design system framework for Vue.js 3 and Nuxt.js 3, built on top of Tailwind CSS v4.

It’s completely styleless, allowing you to extend or override default styles without modifying the components themselves — only your custom styles are included in the final build.

Vueless is simple enough for everyday use and powerful enough for advanced scenarios, making it ideal for quickly building beautiful UIs in minutes or developing a fully customized corporate UI library that strictly follows your design guidelines.

Documentation | UI Components | Website

Key features

• 🧩 65+ UI components (including range date picker, multi-selects, and nested table)
• 📘 Built-in Storybook support
• 🌈 Beautiful, modern default UI theme
• 🌗 Light and dark mode support
• 🌀 Unstyled mode
• 🎨️ Flexible color palettes
• 🎛️ Runtime theme and color switching
• 🧬 Design tokens powered by CSS variables
• ✨ Powerful yet simple styling customization system
• 🌍 Internationalization (i18n)
• ♿️ Accessibility (a11y)
• ⚙️ Server-side rendering (SSR) friendly
• 🖼️ 1000+ built-in SVG icons
• 🛡️ Full TypeScript support with type safety

Advanced Features

• 🧰 Copy and extend existing components
• 🧱 Create your own components
• 🔧️ Define default values for props
• 🔩️ Add or hide props to components
• 🧿 npm package ships full source without TypeScript transpilation for better DX.

Quick Start (Vue)

1. Install vueless UI library packages.

1npm install vueless
2npx vueless init

2. In the file where you create the Vue application, add the following code:

1import { createApp } from 'vue';
2import { createVueless } from "vueless";
3import App from './App.vue';
4
5const vueless = createVueless();
6
7createApp(App).use(vueless).mount('#app');

3. Import Tailwind CSS and Vueless at the top of the main CSS file.

1@import "tailwindcss";
2@import "vueless";

4. Add Vite plugins.

1import { Vueless, UnpluginComponents } from "vueless/plugin-vite";
2
3export default defineConfig({
4  plugins: [
5    ...
6    Vueless(),
7    UnpluginComponents(),
8  ],
9  ...
10})

Quick Start (Nuxt)

1. Install Vueless Nuxt module.

1npm install @vueless/nuxt
2npx vueless init

2. Register @vueless/nuxt into the Nuxt config modules section.

1export default defineNuxtConfig({
2  modules: [
3    '@vueless/nuxt'
4  ],
5  ...
6})

3. Import Tailwind CSS and Vueless at the top of the main CSS file.

1@import "tailwindcss";
2@import "vueless";

Contributing

• We encourage you to contribute to Vueless! Please check out the contributing to Vueless for guidelines.
• Trying to report a possible security vulnerability in Vueless? Please check out our security policy for guidelines.
• Everyone interacting in Vueless and its sub-projects' codebases, issue trackers, chats, and mailing lists is expected to follow our code of conduct rules.

License

Vueless is released under the MIT License.