Assemble modern web applications and dashboards fast with PilotUI.
PilotUI is a comprehensive Vue 3 + TypeScript component library featuring 50+ UI components, custom shell layouts, a robust icon system, and specialized utilities. Built with Tailwind CSS, it's designed to provide consistent aesthetics and premium developer experience.
- 📖 Live Documentation: Storybook Showcase
- 🤖 AI-Ready Docs: llm.md(Optimized for Claude, Gemini, ChatGPT)
- 📦 NPM Package:
pilotui
- 🏗️ Shell Scaffolding: Pre-built
DashboardShell,AppRoot, and navigation menus (Vertical/Horizontal). - 🎨 Dynamic Theming: Integrated theme customizer with Dark/Light/System modes via Pinia.
- 🍱 50+ Components: From basic buttons and inputs to complex data tables and modals.
- 🌍 RTL & I18n Ready: Full support for Right-to-Left layouts and multi-language setups.
- ⚡ Vite Powered: Ultra-fast development and optimized production builds.
- 🧱 Nuxt 3 Compatible: Includes specific entry points for seamless Nuxt integration.
yarn add pilotui
# or using npm
npm install pilotuiAdd the required styles and Pinia configuration (if using state-dependent components like DashboardShell):
// main.tsimport{createApp}from'vue'import{createPinia}from'pinia'importPilotUIfrom'pilotui'import'pilotui/style.css'importAppfrom'./App.vue'constapp=createApp(App)app.use(createPinia())app.use(PilotUI)// Optional: sets up default themes & internal utilitiesapp.mount('#app')PilotUI is designed for explicit component imports. This ensures better tree-shaking and type safety:
<template>
<AppRoot colorScheme="dark">
<Button variant="primary">Launch Dashboard</Button>
</AppRoot>
</template>
<script setup>import { AppRoot, Button } from'pilotui'</script>| Category | Key Components |
|---|---|
| Shell | AppRoot, DashboardShell, SidebarMenu, HorizontalMenu |
| Elements | Button, Card, Avatar, Dropdown, Tabs, Progress |
| Form | Input, Select, Checkbox, Switch, Textarea |
| Complex | Modal, Pagination, DataTable, Toast |
| Icons | Custom Icon component with multi-pack support |
PilotUI includes a specialized llm.md file designed specifically for Large Language Models. If you are using an AI assistant (like Cursor or GitHub Copilot) to build your app, point it to:
👉 https://codebridger.github.io/lib-vue-components/llm.md
This file contains flat, metadata-rich descriptions of every component, property, and slot, enabling AI to generate accurate PilotUI code for you instantly.
# Install dependencies
yarn install
# Run Storybook for live development
yarn storybook
# Generate LLM documentation
yarn generate-docs
# Run unit tests
yarn test- Contribute: Feel free to open issues or submit PRs to improve the library.
- Star us: If you find PilotUI useful, please consider giving it a ⭐ on GitHub!
Built with ❤️ by the CodeBridger team.