Create AIDEVX UI

A CLI tool to scaffold a new AIDEVX UI project - Modern Nuxt 4 framework with a complete theme system and 35+ production-ready UI components.

Features

• ✨ Modern Stack: Nuxt 4 + Vue 3 + TypeScript
• 🎨 Dynamic Theme System: 7 color themes with light/dark mode
• 🎭 Custom Fonts: Dynamic font switching with Google Fonts
• 📦 35+ UI Components: Production-ready components with theme integration
• 🔧 FormKit Integration: Full form handling with theme-aware styles
• 🎯 Backward Compatible: Supports both Rs* and modern component naming
• 📝 Well Documented: Complete documentation and quick start guides

Quick Start

Create a New Project

# Using npm
npm create @aidevx/create-ui my-project

# Using pnpm (recommended)
pnpm create @aidevx/create-ui my-project

# Using yarn
yarn create @aidevx/create-ui my-project

Interactive Setup

The CLI will guide you through the setup process:

1. Project Name: Enter your project name (or provide as argument)
2. Package Manager: Choose between pnpm, npm, or yarn
3. Git Init: Initialize git repository (optional)
4. Install Dependencies: Install dependencies automatically (optional)

Note: Projects start with the neutral theme by default. You can easily switch themes using the built-in theme switcher in your app!

Manual Project Creation

You can also specify the project name directly:

pnpm create @aidevx/create-ui my-awesome-app

What's Included

Core Features

• Complete Nuxt 4 configuration
• Tailwind CSS with theme system
• FormKit with custom themes
• Pinia state management
• VueUse composables
• Nuxt Icon module
• Nuxt Fonts module

UI Components (25+)

• Basic: Button, Badge, Card, Alert, Avatar, Skeleton
• Navigation: Breadcrumb, Dropdown, Tab, CommandMenu
• Forms: All FormKit components with theme integration
• Data Display: Table (with toolbar, pagination, filtering, sorting), Collapse, Carousel, Calendar
• Feedback: Toast, Modal, Drawer, AlertDialog, ProgressBar
• Code: CodeBlock, CodeEditor (Monaco-based)
• Layout: Sidebar, Navigation components

Composables (All 11 Included)

• useTheme() - Theme management (mode, color, font)
• useToast() - Toast notifications
• useNavigation() - Navigation helpers
• useFormKitInputs() - FormKit utilities
• useMonacoPrettier() - Code editor utilities
• useTableSort() - Table sorting (for RsTable)
• useTableFilter() - Table filtering (for RsTable)
• useTablePagination() - Table pagination (for RsTable)
• useTableSelection() - Table selection (for RsTable)
• useTableOfContents() - TOC navigation (for AppTableOfContents)
• useDocsNav() - Docs navigation (for AppDocsNav)

Theme System

• Light/Dark Mode: Automatic or manual switching
• Color Themes: 7 pre-built themes with HSL CSS variables
• Font Themes: Dynamic font switching (DM Sans, Inter, Poppins, etc.)
• Full Coverage: All components theme-aware

Project Structure

my-project/
├── app/
│   ├── assets/css/          # Tailwind + Theme styles
│   ├── components/          # UI components (no demo blocks)
│   │   ├── Rs*.vue          # UI components
│   │   ├── formkit/         # FormKit custom components
│   │   └── layout/          # Layout components
│   ├── composables/         # Vue composables
│   ├── layouts/             # Nuxt layouts
│   ├── pages/               # Pages (minimal starter index)
│   ├── plugins/             # Nuxt plugins
│   ├── data/                # Static data
│   └── app.vue              # Root component
├── modules/                 # Custom Nuxt modules
│   └── component-aliases.js # Backward compatibility
├── docs/                    # Documentation
├── public/                  # Static assets
├── nuxt.config.ts           # Nuxt configuration
├── tailwind.config.js       # Tailwind configuration
├── formkit.config.js        # FormKit configuration
├── CLAUDE.md                # Claude Code instructions
├── AIDEVX_FRAMEWORK.md      # Framework documentation
└── package.json

What's NOT Included

To keep the starter clean and minimal, these are excluded:

• ❌ Demo pages (button-demo, forms, themes, etc.)
• ❌ Block components (landing, auth, dashboard, etc.)
• ❌ Component showcase pages
• ❌ Documentation pages
• ❌ Test pages
• ❌ Block-related utilities

Updating Components

Keep your components up to date with the latest improvements from the framework:

# Easiest way - use the built-in script
pnpm update:ui

# Or use npm/yarn
npm run update:ui
yarn update:ui

# Or run directly with npx
npx -p @aidevx/create-ui aidevx-update

The update command will:

• ✅ Show you all available files (components, CSS, composables, pages, layouts)
• ✅ Group files by type for easy navigation
• ✅ Smart pairing: suggest updating CSS with components
• ✅ Auto-detect missing CSS imports in main.css
• ✅ Display diff preview before applying changes
• ✅ Automatically backup modified files
• ✅ Update only the files you choose

Example workflow:

cd my-project
npx aidevx-update

# Select components using space bar
# Press enter to confirm
# Review diffs for each component
# Confirm updates one by one

Why use the updater?

Since AIDEVX components are tightly coupled to the Nuxt 4 framework architecture, we provide this updater tool to safely apply improvements while respecting your customizations. Your modified files are always backed up before updating.

Next Steps

After creating your project:

1. Navigate to project directory

   cd my-project

2. Start development server

   pnpm dev

3. Visit your app

   http://localhost:3000

4. Read documentation

   • AIDEVX_FRAMEWORK.md - Complete framework guide
   • CLAUDE.md - Development instructions
   • docs/ - Detailed documentation

5. Stay updated

   npx aidevx-update  # Check for component updates

Development

Available Commands

# Development server
pnpm dev

# Build for production
pnpm build

# Preview production build
pnpm preview

# Generate static site
pnpm generate

# Install dependencies
pnpm install

Theme Customization

The theme system is fully customizable. See AIDEVX_FRAMEWORK.md for details on:

• Adding custom color themes
• Creating custom components
• Modifying CSS variables
• Font configuration
• Theme composable usage

Component Usage

All components support dual naming for backward compatibility:

<!-- Old naming (Rs*) -->
<RsButton variant="primary">Click me</RsButton>

<!-- Modern naming -->
<Button variant="primary">Click me</Button>

Both work identically!

Requirements

• Node.js: >= 18.0.0
• Package Manager: pnpm (recommended), npm, or yarn

Support

• Issues: GitHub Issues
• Documentation: See docs/framework/overview.md in your project
• Theme System: See docs/framework/theme-system.md

License

MIT

Contributing

This CLI tool is part of the AIDEVX Nuxt 4 framework. Contributions are welcome!

Built with ❤️ using Nuxt 4, Vue 3, and Tailwind CSS