pilotui

PilotUI

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.

---

Quick Links

• Live Documentation: Storybook Showcase
• AI-Ready Docs: llm.md (Optimized for Claude, Gemini, ChatGPT)
• NPM Package: pilotui

---

Key Features

• 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.

---

Quick Start

1. Installation

yarn add pilotui

# or using npm
npm install pilotui

2. Setup

Add the required styles and Pinia configuration (if using state-dependent components like DashboardShell):

// main.ts
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import PilotUI from 'pilotui'
import 'pilotui/style.css'
import App from './App.vue'

const app = createApp(App)

app.use(createPinia())
app.use(PilotUI) // Optional: sets up default themes & internal utilities
app.mount('#app')

3. Usage

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>

---

Component Showcase

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

---

AI-Native Documentation

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.

---

Local Development

# Install dependencies
yarn install

# Run Storybook for live development
yarn storybook

# Generate LLM documentation
yarn generate-docs

# Run unit tests
yarn test

---

Community & Support

• 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.