Vueless UI

A UI library with Open Architecture for Vue.js 3 and Nuxt.js 3 / 4, powered by Storybook v10 and Tailwind CSS v4.

With Vueless UI, you’re free to:

🪄️ Customize any component
📋 Copy and extend existing ones
🧱 Build your own from scratch
📕 Document it all seamlessly in Storybook

Documentation | UI Components | Theme Builder | About

Key features

🧩 65+ crafted UI components (including range date picker, multi-select, and nested table)
✨ Open Architecture lets you customize, copy, extend, and create your own components
📕 Built-in Storybook support
🪩 Theme Builder for runtime theme customization
🌈 Beautiful default UI theme
🌀 Unstyled mode
🌗 Light and dark mode
🧬 Design tokens powered by CSS variables
⚙️ Server-side rendering (SSR)
🌍 Internationalization (i18n)
♿️ Accessibility (a11y)
🖼️ Inline SVG icons
🪄 Auto component imports (as you use them)
🧿 Uncompiled source in npm for better DX
🧪️ 1500+ unit tests ensuring consistent logic
🛡️ Full TypeScript support with type safety

Built-In Storybook

No setup, no hacks — just a fully functional Storybook preset ready to test your Vueless UI design system out of the box.

Demo | Package | Docs

Theme Builder

Customize colors, rounding, and typography at runtime, generate full palettes, and export a ready-to-use theme to your project.

Try Vueless UI Theme Builder 🚀

Quick Start (Vue)

New project

To get started with Vueless UI, simply paste the following code into your terminal:

npm create vueless@latest

This command guides you through a few setup options, then generates a new scaffolded Vue + Vueless UI project with the complete application structure.

Existing project

Install vueless UI library packages.

npm install vueless
npx vueless init

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

import { createApp } from 'vue';
import { createVueless } from "vueless";
import App from './App.vue';

const vueless = createVueless();

createApp(App).use(vueless).mount('#app');

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

@import "tailwindcss";
@import "vueless";

Add Vite plugins.

import { Vueless, TailwindCSS, UnpluginComponents } from "vueless/plugin-vite";

export default defineConfig({
  plugins: [
    ...
    Vueless(),
    TailwindCSS(),
    UnpluginComponents(),
  ],
  ...
})

Quick Start (Nuxt)

Install Vueless Nuxt module.

npm install @vueless/nuxt
npx vueless init

export default defineNuxtConfig({
  modules: [
    '@vueless/nuxt'
  ],
  ...
})

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

@import "tailwindcss";
@import "vueless";

Ecosystem

@vueless/storybook - Storybook preset for Vueless UI component library (docs).
@vueless/nuxt - Vueless UI module for Nuxt.js (docs).
create-vueless - CLI tool to quickly start a Vueless UI project from a template (docs).
- vueless-quickstart - Vue + Vueless UI + JavaScript project template.
- vueless-quickstart-ts - Vue + Vueless UI + TypeScript project template.

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.

From Ukrainians to a Peaceful World 🇺🇦

Vueless

Install / Use

README