A Vue 3 component library for Quaily.
If you are an AI coding agent integrating Quail UI into another frontend project, start with these two files:
- 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
- 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
npm install quail-uiInitialize 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>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>| 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 |
Quail UI includes three built-in themes:
lightdarkmorph
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>.
Apache-2.0