Skip to content

cli

Directory actions

More options

Directory actions

More options

Latest commit

 

History

History

cli

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
dist
dist
 
 
src
src
 
 
README.md
README.md
 
 
package-lock.json
package-lock.json
 
 
package.json
package.json
 
 
tsconfig.json
tsconfig.json
 
 

README.md

🚀 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 ✨

🚀 View Live Demo 📱 Try on Mobile

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

🤝 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