🎨 Angular SuperUI v2.0.3

The Modern Angular UI Component Library That Developers Love

🌟 🚀 LIVE DEMO - See All Components in Action! 🌟

☕ Support This Project

🚀 The Modern Angular UI Component Library

Beautiful • Accessible • Type-Safe • Zero External Dependencies

---

✨ What is Angular SuperUI?

Angular SuperUI is a comprehensive, modern, and accessible Angular UI component library that transforms how you build Angular applications. Built with Tailwind CSS v4, TypeScript, and Angular 17+ Signals, it provides 43 production-ready components + 15 UI blocks with local-first architecture.

🎯 Why Angular SuperUI is the Best Choice for Your Project?

🔥 Local-First Architecture - No external NPM dependencies, components live directly in your project
⚡ Smaller Bundles - Tree-shakable components, only install what you use
🎨 Stunning Design System - Modern, beautiful components with built-in dark mode
🛠️ CLI-Powered Development - Effortless installation, updates, and component management
📱 Mobile-First Responsive - Perfect on phones, tablets, desktops, and ultra-wide screens
♿ Accessibility Champion - WCAG AA compliant, full ARIA support, keyboard navigation
🎭 Fully Customizable - Easy theming, custom colors, spacing, and component variants
🚀 Modern Angular - Built for Angular 17+ with signals, standalone components, and modern APIs
🔒 Type-Safe Everything - Full TypeScript support with comprehensive IntelliSense
⚙️ Zero Config Setup - Works out of the box with sensible defaults
🎪 Interactive Playground - Live demo with 43+ component examples
📚 Comprehensive Docs - Detailed API reference, examples, and best practices

🏆 Perfect for:

• ✅ Enterprise Applications - Scalable, maintainable component architecture
• ✅ Rapid Prototyping - Quick setup with beautiful defaults
• ✅ Design Systems - Consistent, reusable component patterns
• ✅ SaaS Products - Professional UI that users love
• ✅ Admin Dashboards - Rich data displays and form components
• ✅ E-commerce Sites - Product displays, forms, and user interfaces
• ✅ Portfolio Sites - Showcase your work with stunning components

---

🚀 Quick Start

🌟 First, Check Out Our Live Demo! 🌟

🎮 Experience Angular SuperUI Live 🎮

See all 43 components + 15 blocks in action with dark mode, mobile responsiveness, and interactive examples!

---

1️⃣ Install the CLI

npm install -g ngsui-cli

2️⃣ Initialize Your Project

ngsui-cli init

3️⃣ Add Components

# Add specific components
ngsui-cli add accordion alert avatar badge button card carousel checkbox collapsible theme-switcher

# Add all components
ngsui-cli add --all

# List available components
ngsui-cli list

4️⃣ Start Building

import { Component } from '@angular/core';
import { 
  Accordion, 
  AccordionItem, 
  AccordionTrigger, 
  AccordionContent 
} from '@lib/accordion';
import { 
  Alert, 
  AlertTitle, 
  AlertDescription, 
  AlertIcon 
} from '@lib/alert';
import { 
  AlertDialogComponent, 
  AlertDialogHeaderComponent, 
  AlertDialogFooterComponent, 
  AlertDialogTitleComponent, 
  AlertDialogDescriptionComponent, 
  AlertDialogActionComponent, 
  AlertDialogCancelComponent 
} from '@lib/alert-dialog';
import { AspectRatioComponent } from '@lib/aspect-ratio';
import { 
  Avatar, 
  AvatarImage, 
  AvatarFallback 
} from '@lib/avatar';
import { Badge } from '@lib/badge';
import { 
  BreadcrumbComponent,
  BreadcrumbListComponent,
  BreadcrumbItemComponent,
  BreadcrumbLinkComponent,
  BreadcrumbPageComponent,
  BreadcrumbSeparatorComponent,
  BreadcrumbEllipsisComponent
} from '@lib/breadcrumb';
import { ButtonComponent } from '@lib/button';
import { CalendarComponent } from '@lib/calendar';
import { 
  CardComponent,
  CardHeaderComponent,
  CardTitleComponent,
  CardDescriptionComponent,
  CardContentComponent,
  CardFooterComponent
} from '@lib/card';
import { Carousel } from '@lib/carousel';
import { CheckboxComponent } from '@lib/checkbox';
import { ThemeSwitcher } from '@lib/theme-switcher';

@Component({
  standalone: true,
  imports: [
    Accordion, AccordionItem, AccordionTrigger, AccordionContent,
    Alert, AlertTitle, AlertDescription, AlertIcon,
    AlertDialogComponent, AlertDialogHeaderComponent, AlertDialogFooterComponent, 
    AlertDialogTitleComponent, AlertDialogDescriptionComponent, AlertDialogActionComponent, AlertDialogCancelComponent,
    AspectRatioComponent,
    Avatar, AvatarImage, AvatarFallback,
    Badge,
    BreadcrumbComponent, BreadcrumbListComponent, BreadcrumbItemComponent, 
    BreadcrumbLinkComponent, BreadcrumbPageComponent, BreadcrumbSeparatorComponent, BreadcrumbEllipsisComponent,
    ButtonComponent,
    CalendarComponent,
    CardComponent, CardHeaderComponent, CardTitleComponent, 
    CardDescriptionComponent, CardContentComponent, CardFooterComponent,
    Carousel,
    CheckboxComponent,
    ThemeSwitcher
  ],
  template: `
    <!-- Card Example -->
    <CardComponent class="max-w-md mx-auto">
      <CardHeaderComponent>
        <div class="flex items-center gap-3 mb-4">
          <Avatar>
            <AvatarImage src="https://github.com/shadcn.png" alt="User" />
            <AvatarFallback>JD</AvatarFallback>
          </Avatar>
          <div>
            <CardTitleComponent>Welcome back!</CardTitleComponent>
            <CardDescriptionComponent>Ready to build something amazing?</CardDescriptionComponent>
          </div>
        </div>
      </CardHeaderComponent>
      
      <CardContentComponent>
        <!-- Button Examples -->
        <div class="flex gap-2 mb-6">
          <ButtonComponent>Get Started</ButtonComponent>
          <ButtonComponent variant="outline">Learn More</ButtonComponent>
          <ButtonComponent variant="ghost" size="sm">
            <Badge variant="secondary" class="mr-2">New</Badge>
            Features
          </ButtonComponent>
        </div>

        <!-- Alert Example -->
        <Alert variant="success" class="mb-6">
          <AlertIcon>
            <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
              <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" 
                    d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"></path>
            </svg>
          </AlertIcon>
      <div class="flex-1">
        <AlertTitle>Welcome to Angular SuperUI! 🎉</AlertTitle>
        <AlertDescription>
          You're ready to build amazing user interfaces.
        </AlertDescription>
      </div>
    </Alert>

    <!-- Accordion Example -->
    <Accordion type="single" [collapsible]="true" class="w-full mt-6">
      <AccordionItem value="item-1">
        <AccordionTrigger>Getting Started</AccordionTrigger>
        <AccordionContent>
          Install components locally and start building immediately.
        </AccordionContent>
      </AccordionItem>
    </Accordion>
  `
})
export class AppComponent {}

---

🧩 Available Components

🧩 Component Showcase

Component	Description	Status
🪗 Accordion	Collapsible content sections with single or multiple modes	✅ Available
🚨 Alert	Contextual feedback messages with 5 variants	✅ Available
🚨 AlertDialog	Modal dialogs with full accessibility and focus management	✅ Available
📐 AspectRatio	Maintains consistent proportions for responsive content containers	✅ Available
👤 Avatar	User profile image with automatic fallback support	✅ Available
🏷️ Badge	Status indicators and labels with 4 variants	✅ Available
🍞 Breadcrumb	Navigation breadcrumbs with accessibility and custom separators	✅ Available
🔘 Button	Interactive buttons with 9 variants and loading states	✅ Available
📅 Calendar	Date picker and calendar widget with month/year navigation	✅ Available
🃏 Card	Flexible content container with header, content, and footer	✅ Available
🎠 Carousel	Accessible image carousel with auto-play, navigation, and pagination	✅ Available
☑️ Checkbox	A control that allows the user to toggle between checked and not checked	✅ Available
🏷️ Chip	Compact element with label, avatar, and optional close button	✅ Available
🗃️ Collapsible	Expandable content sections with smooth animations and keyboard support	✅ Available
🔽 ComboBox	Dropdown selection with search, multi-select, and loading states	✅ Available
🖱️ ContextMenu	Right-click context menus with keyboard shortcuts and accessibility	✅ Available
📊 DataTable	Enterprise-grade data table with sorting, filtering, pagination, and inline editing	✅ Available
🪟 Dialog	Modal dialog windows with accessibility features and focus management	✅ Available
📄 Drawer	Flexible drawer component that slides in from any side of the screen	✅ Available
⬇️ DropdownMenu	Beautiful, accessible dropdown menu with multiple variants and advanced animations	✅ Available
📁 FileUpload	Advanced file upload component with drag-and-drop, progress tracking, and validation	✅ Available
🎯 Header	Navigation headers with menus, logos, and mobile support	✅ Available
🎨 Icon	SVG icon component with size variants and accessibility features	✅ Available
� Input	Flexible input component with multiple variants, validation states, and accessibility	✅ Available
🔢 InputOTP	One-time password input component with multiple slots and validation	✅ Available
� Menubar	Horizontal menu bar with dropdown submenus and keyboard navigation	✅ Available
📄 Pagination	Pagination component with customizable page size and navigation controls	✅ Available
💬 Popover	A floating overlay that displays content relative to a trigger element	✅ Available
📊 Progress	Progress indicator component with customizable appearance and animation	✅ Available
🔘 RadioGroup	Radio button group component with accessible selection and validation	✅ Available
⭐ Rating	Interactive star rating component with hover effects and customizable appearance	✅ Available
🔽 Select	A flexible select dropdown component with search and multi-select capabilities	✅ Available
📱 Sidebar	Responsive navigation sidebar with animations, keyboard navigation, and flexible content	✅ Available
💀 Skeleton	Loading placeholder components with customizable shapes and animations	✅ Available
🎚️ Slider	Interactive slider component for single values and ranges with accessibility support	✅ Available
⏳ Spinner	Loading spinner component with multiple variants and animations	✅ Available
📋 Stepper	Multi-step navigation component with progress tracking and validation support	✅ Available
📑 Tabs	Tabbed interface component with keyboard navigation and accessibility support	✅ Available
📄 Textarea	Multi-line text input component with auto-resize and validation states	✅ Available
🌓 ThemeSwitcher	Toggle between light, dark, and system themes with localStorage persistence	✅ Available
📢 Toast	Toast notification component with multiple variants and auto-dismiss functionality	✅ Available
🔀 Toggle	Switch component for boolean state with accessibility and animations	✅ Available
🔧 Toolbar	Toolbar component with grouped actions and responsive layout	✅ Available
💡 Tooltip	Tooltip component with configurable positioning and hover/focus triggers	✅ Available

---

🧱 UI Blocks (10 Total)

🧱 Block Showcase

Block	Description	Status
🦸 Hero Section	Stunning hero sections with CTAs, images, and animations	✅ Available
📊 Stats Counter	Animated statistics display with countup effects	✅ Available
💎 Feature Grid	Feature showcase with icons, descriptions, and layouts	✅ Available
🃏 Feature Card	Individual feature cards with icons and descriptions	✅ Available
💬 Testimonial	Customer testimonials with avatars and ratings	✅ Available
💰 Pricing Cards	Pricing tables with features, CTAs, and highlighting	✅ Available
👥 Team Grid	Team member showcase with social links and roles	✅ Available
🔑 Auth Forms	Login, register, and password reset forms	✅ Available
🎯 Header	Navigation headers with menus, logos, and mobile support	✅ Available
🦶 Footer	Footer sections with links, social icons, and company info	✅ Available

---

🎯 CLI Commands

📋 List Available Components

ngsui-cli list

➕ Add Components

# Add specific components
ngsui-cli add accordion alert card aspect-ratio

⚙️ Initialize Project

# Initialize with default settings
ngsui-cli init

---

💫 Component Features

🪗 Accordion Component

• Multiple Modes: Single or multiple items open
• Accessibility: Full WAI-ARIA compliance
• Keyboard Navigation: Arrow keys, Home/End, Enter/Space
• Smooth Animations: Tailwind CSS powered transitions
• Screen Reader Support: Proper announcements and labeling

🚨 Alert Component

• 5 Variants: Default, Destructive, Warning, Success, Info
• Flexible Layout: Icon + Title + Description structure
• ARIA Live Regions: Automatic screen reader announcements
• Tailwind CSS v4: Modern utility-first styling
• Semantic Colors: Built-in color schemes for each variant

👤 Avatar Component

• 5 Sizes: From sm (32px) to 2xl (80px) with responsive scaling
• Smart Fallbacks: Automatic fallback when images fail to load
• Loading Timeout: 5-second timeout with graceful degradation
• Accessibility: Proper ARIA labels and semantic roles
• Performance: Lazy loading and optimized image handling

🏷️ Badge Component

• 4 Variants: Default, Secondary, Destructive, Outline
• Smart ARIA Roles: Automatic role assignment based on variant (alert/status/note)
• Interactive Links: Optional link mode with keyboard accessibility
• Live Regions: Dynamic content announcements for screen readers
• WCAG 2.1 AA: Full accessibility compliance with semantic roles
• TypeScript: Complete type safety with CVA variants

🔘 Button Component

• 9 Variants: Default, Secondary, Destructive, Outline, Ghost, Link, Success, Warning, Info
• 8 Size Options: Including icon-specific sizes (sm to xl)
• Loading States: Built-in spinner with custom loading text support
• Full Accessibility: ARIA attributes, keyboard navigation, screen reader support
• Event Handling: Click, keydown, focus, and blur events with TypeScript
• Smart Interactions: Space/Enter key support and disabled state management

🍞 Breadcrumb Component

• 7 Sub-Components: Breadcrumb, List, Item, Link, Page, Separator, Ellipsis
• Navigation Landmarks: Semantic navigation with ARIA support
• Router Integration: Full Angular RouterLink support with active states
• Custom Separators: Flexible separator options (icon, text, custom)
• Collapsed Navigation: Ellipsis support for long breadcrumb chains
• Accessibility: WCAG 2.1 AA compliance with proper ARIA attributes
• Event Handling: Click events with navigation data and TypeScript safety

🚨 AlertDialog Component

• Modal Dialog System: Full modal dialog with overlay and focus trapping
• 7 Sub-Components: AlertDialog, Header, Footer, Title, Description, Action, Cancel
• Full Accessibility: WCAG 2.1 AA compliance with ARIA support
• Focus Management: Automatic focus trapping and restoration
• Keyboard Navigation: Escape to close, Tab navigation, Enter/Space actions
• Screen Reader Support: Live region announcements and proper labeling
• Flexible Actions: Multiple action buttons with variants (destructive, secondary, default)
• Prevent Close Options: Configurable overlay click and escape key behavior

---

🛠️ What Makes Us Different?

Feature	Angular SuperUI	Traditional Libraries
Installation	Local components via CLI	NPM package dependency
Bundle Size	Only what you use	Full library in bundle
Customization	Direct file editing	CSS overrides/themes
Dependencies	Zero runtime dependencies	Package + peer dependencies
Updates	Manual (full control)	Automatic (breaking changes)
TypeScript	Perfect integration	Import/export complexity

---

📖 Documentation

• 📋 Installation Guide - Complete setup instructions
• 🪗 Accordion Examples - Interactive accordion usage
• 🚨 Alert Examples - Alert variants and styling
• 👤 Avatar Examples - Avatar sizes and fallbacks
• 🏷️ Badge Examples - Badge variants and accessibility
• 🍞 Breadcrumb Examples - Navigation breadcrumbs and custom separators
• 🔘 Button Examples - Button variants, loading states, and events
• 🔧 CLI Reference - All CLI commands and options

---

🤝 Contributing

We love contributions! Here's how you can help:

1. 🍴 Fork the repository
2. 🌿 Create your feature branch (git checkout -b feature/amazing-feature)
3. 💍 Commit your changes (git commit -m 'Add amazing feature')
4. 📤 Push to the branch (git push origin feature/amazing-feature)
5. 🎯 Open a Pull Request

---

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

---

🙏 Acknowledgments

💝 Special Thanks

🎨 Shadcn/UI - For the incredible design system and component architecture that inspired Angular SuperUI. This project wouldn't exist without the amazing foundation laid by shadcn's work in the React ecosystem.

🌟 The Angular Team - For building an amazing framework that makes component development a joy.

🎯 Tailwind CSS - For the utility-first CSS framework that powers our design system.

💎 The Open Source Community - For all the feedback, contributions, and support.

---

🔗 Resources

• 🌐 🚀 LIVE DEMO - Interactive showcase of all 43 components + 10 blocks
• 🌐 Official Website
• 📦 NPM Package
• 🛠️ CLI Package
• 🐛 Issue Tracker
• 💬 Discussions

---

☕ Enjoying Angular SuperUI?

Buy me a coffee to support continued development!

---

Made with ❤️ by Indranil Mukherjee