docs/ai-agent-guide.md for the full integration guide, real component APIs, theme tokens, icons, helper classes, and demo map
quaily_ui_skill/SKILL.md for the compact agent workflow and file-loading instructions

Features

26+ UI components (Button, Input, Dialog, Menu, Tabs, etc.)
110+ SVG icons
Theme support (light, dark, morph)
Fully typed with TypeScript
SCSS with CSS custom properties

Installation

npm install quail-ui

Usage

Initialize Quaily UI in your main.js/main.ts file:

import { createApp } from 'vue'
import { QuailUI } from 'quail-ui'
import 'quail-ui/style.css'

const app = createApp(App)
app.use(QuailUI)
app.mount('#app')

Use components in your .vue files:

<template>
  <QButton class="primary" @click="handleClick">
    Click Me
  </QButton>

  <QInput v-model="text" placeholder="Enter text..." />

  <QDialog v-model="showDialog" title="Hello">
    <p>Dialog content here</p>
  </QDialog>
</template>

Usage via CDN (No Build Tools)

You can use Quaily UI directly in HTML without any build tools:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/quail-ui/dist/index.css" />
  <script type="importmap">
    {
      "imports": {
        "vue": "https://unpkg.com/vue@3/dist/vue.esm-browser.prod.js",
        "quail-ui": "https://unpkg.com/quail-ui/dist/index.js"
      }
    }
  </script>
</head>
<body>
  <div id="app">
    <q-button class="primary">Hello</q-button>
    <q-fence text="This is a notice" type="warning"></q-fence>
  </div>

  <script type="module">
    import { createApp } from 'vue'
    import { QuailUI } from 'quail-ui'

    const app = createApp({})
    app.use(QuailUI)
    app.mount('#app')
  </script>
</body>
</html>

Components

Component	Description
QButton	Button with variants (primary, outlined, plain, danger, etc.)
QInput	Text input with validation and slots
QTextarea	Multi-line text input
QDialog	Modal dialog
QMenu	Dropdown menu
QTabs	Tab navigation
QSwitch	Toggle switch
QProgress	Progress bar
QAvatar	User avatar
QPagination	Page navigation
QFence	Alert/notice box
...	And more

Theme Switching

Quail UI includes three built-in themes:

light
dark
morph

Use the exported theme helpers:

import { applyTheme, resolveInitialTheme } from 'quail-ui'

// Initialize from localStorage / system preference
const initialTheme = resolveInitialTheme()
applyTheme(initialTheme)

// Switch theme
applyTheme('light')
applyTheme('dark')
applyTheme('morph')

// Optional: switch without persisting to localStorage
applyTheme('morph', false)

applyTheme updates document.body.dataset.theme and toggles .dark/.light body classes automatically.

For legacy usage, dark mode still works by toggling the .dark class on <body>.

License

MIT

FAQs

What is quail-ui?

Is quail-ui well maintained?

Package last updated on 29 Mar 2026

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

quail-ui

Quaily UI

AI Agent Entry