@voxra/ui

Main component library package for Voxra UI.

Overview

This package contains 50+ Vue 3 components built with TypeScript, TailwindCSS, and HeadlessUI.

Structure

src/
├── components/
│   ├── ui/           # UI components (Button, Dialog, etc.)
│   ├── forms/        # Form components (FormGroup, FormLabel, etc.)
│   └── icons/        # Icon components and exports
├── composables/      # Vue composables (useDarkMode, useDisclosure, etc.)
├── theme/            # Theme presets and utilities
├── utils/            # Utility functions (cn, etc.)
└── index.ts          # Main exports

Key Files

• src/index.ts - Main component exports
• src/icons/index.ts - Icon exports (Lucide + custom categories)
• vite.config.ts - Build configuration
• vitest.config.ts - Test configuration
• tailwind.config.js - TailwindCSS configuration

Commands

pnpm dev        # Start dev server
pnpm build      # Build library (outputs to dist/)
pnpm test       # Run tests
pnpm test:watch # Run tests in watch mode

Build Output

dist/
├── index.js    # Main components bundle
├── icons.js    # Icons bundle
└── style.css   # Component styles

Adding Components

1. Create directory: src/components/ui/{component-name}/
2. Create files:
   • {ComponentName}.vue - Main component
   • {ComponentName}.test.ts - Tests
   • types.ts - TypeScript types
   • index.ts - Exports
3. Export from src/index.ts
4. Run tests: pnpm test
5. Update docs and playground!

Icon Categories

Icons are organized in src/icons/:

• actions.ts - Action icons
• navigation.ts - Navigation icons
• status.ts - Status/feedback icons
• ai.ts - AI/ML related icons
• server.ts - Server/infrastructure icons
• And more...

For AI Assistants

When modifying this package:

1. Follow patterns in CLAUDE.md
2. Always write/update tests
3. Update packages/docs if component API changes
4. Update packages/playground to show new features