🚀 Angular SuperUI CLI

🛠️ v2.0.3: 43 Components + 15 Blocks Ready 🎯

🌟 🎮 LIVE DEMO - See Components in Action! 🌟

✨ Interactive Showcase • 43 Components • 15 Blocks • Dark Mode • Mobile Responsive ✨

The Angular SuperUI CLI is your gateway to the most beautiful and accessible Angular component library. Install components locally with zero dependencies and full customization control.

✨ Features

• 🎯 Selective Installation - Install only the components you need
• 📦 Zero Waste - No unused components in your bundle
• 🔥 Lightning Fast - Quick component installation from GitHub
• 🎨 Beautiful Output - Colorful and informative CLI interface
• 🛠️ Developer Friendly - Interactive component selection
• 📚 Well Documented - Comprehensive component documentation

🏗️ Installation

# Install globally
npm install -g ngsui-cli

# Or use with npx (no installation required)
npx ngsui-cli --help

🚀 Quick Start

# List all available components
ngsui-cli list

# Install a single component
ngsui-cli add button

# Install multiple components
ngsui-cli add button badge alert card

# Install all available components
ngsui-cli add --all

# Interactive component selection
ngsui-cli add

📦 Available Components (39 total)

🎯 Core Components

• button - Interactive button component with multiple variants and loading states
• badge - Status indicators and labels with color variants
• alert - Display important messages and notifications
• aspect-ratio - Responsive aspect ratio containers for media content
• card - Flexible content containers with header, body, and footer
• checkbox - Toggle controls with full accessibility support
• input - Accessible and customizable input fields with validation
• input-otp - One-time password input with multiple slots and validation
• progress - Progress indicator component with customizable appearance and animation
• radio-group - Radio button groups with form integration
• rating - Interactive star rating component with hover effects and customizable appearance
• select - Dropdown selection with search and multi-select capabilities
• slider - Interactive slider component for single values and ranges with accessibility support
• textarea - Multi-line text input component with auto-resize and validation states

🧭 Navigation Components

• breadcrumb - Navigation hierarchy with custom separators
• dropdown-menu - Contextual menu dropdowns with keyboard navigation
• pagination - Navigate through large datasets with intelligent controls
• drawer - Slide-out panels from screen edges
• sidebar - Responsive navigation sidebar with animations and keyboard support
• stepper - Multi-step navigation with progress tracking and validation
• tabs - Tabbed interface component with keyboard navigation and accessibility support

🖼️ Display Components

• avatar - User profile pictures with fallback support
• carousel - Image and content sliders with auto-play
• data-table - Feature-rich table for displaying large datasets
• skeleton - Loading placeholders with smooth animations
• spinner - Loading spinner component with multiple variants and animations

💫 Overlay Components

• alert-dialog - Modal dialogs with focus management
• context-menu - Right-click context menus with accessibility
• dialog - Modal windows and overlays
• popover - Floating content containers with smart positioning
• toast - Toast notification component with multiple variants and auto-dismiss functionality
• tooltip - Tooltip component with configurable positioning and hover/focus triggers

🔧 Form Components

• calendar - Date picker with full keyboard navigation
• collapsible - Expandable content sections with animations
• combobox - Advanced dropdown with search and multi-select
• file-upload - Advanced file upload component with drag-and-drop, progress tracking, and validation

⚙️ Utility Components

• accordion - Vertically stacked interactive sections
• theme-switcher - Dark/light mode toggle with smooth transitions

🔧 Usage Examples

Basic Usage

# Install the button component
ngsui-cli add button

# Install multiple components at once
ngsui-cli add button badge alert avatar card aspect-ratio checkbox collapsible theme-switcher

Interactive Mode

# Run without arguments for interactive selection
ngsui-cli add

Install All Components

# Install all available components
ngsui-cli add --all

📋 Requirements

• Node.js 16+
• Angular project (detected by angular.json)
• Angular SuperUI library installed (npm install angular-superui)

🎨 Color Variants

Most components support these beautiful color variants:

• ❤️ red
• 💙 blue
• 💚 green
• 💛 yellow
• 💜 purple
• 🩷 pink
• 🤍 gray
• 🩵 cyan

📖 Documentation

• 🚀 Live Demo - Interactive component showcase
• GitHub Repository
• Documentation
• Components Guide

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

📄 License

MIT License - see the LICENSE file for details.

⭐ Support

If you find Angular SuperUI CLI useful, please consider:

• ⭐ Star the repository on GitHub
• 🐛 Report bugs and suggest features
• 🤝 Contribute to the project

Made with ❤️ by Indranil Mukherjee