Data

Tools

Indexes

Applications

Experiments

Awesome

An open API service indexing awesome lists of open source software.

https://github.com/bhaimicrosoft/angular-superui


https://github.com/bhaimicrosoft/angular-superui

Last synced: 3 months ago
JSON representation

Awesome Lists containing this project

README 

          



# 🎨 Angular SuperUI v1.0.4









### 🌟 **[🚀 LIVE DEMO - See All Components in Action!](https://angular-superui.vercel.app/)** 🌟



**✨ Interactive Showcase • 16 Components • Dark Mode • Mobile Responsive ✨**



[![🎯 View Live Demo](https://img.shields.io/badge/🎯-View%20Live%20Demo-FF6B6B?style=for-the-badge&logo=vercel&logoColor=white&labelColor=000000)](https://angular-superui.vercel.app/)

[![🎮 Interactive Demo](https://img.shields.io/badge/🎮-Interactive%20Demo-4ECDC4?style=for-the-badge&logo=angular&logoColor=white&labelColor=000000)](https://angular-superui.vercel.app/)

[![📱 Mobile Ready](https://img.shields.io/badge/📱-Mobile%20Ready-45B7D1?style=for-the-badge&logo=mobile&logoColor=white&labelColor=000000)](https://angular-superui.vercel.app/)









### ☕ Support This Project

[![Buy Me A Coffee](https://img.shields.io/badge/☕-Buy%20Me%20A%20Coffee-orange?style=for-the-badge&logo=buy-me-a-coffee&logoColor=white)](https://coff.ee/bhaikaju)








  
🚀 The Modern Angular UI Component Library


  
Beautiful • Accessible • Local-First • Zero Dependencies


  

  ![Angular SuperUI](https://img.shields.io/badge/16%20Components-Ready%20to%20Use-brightgreen?style=flat-square)

  ![Tailwind CSS v4](https://img.shields.io/badge/Tailwind%20CSS-v4-blue?style=flat-square)

  ![TypeScript](https://img.shields.io/badge/100%25-TypeScript-blue?style=flat-square)




---



## ✨ What is Angular SuperUI?



Angular SuperUI is a **modern, beautiful, and accessible** Angular UI component library that revolutionizes how you build Angular applications. Built with **Tailwind CSS v4** and **TypeScript**, it provides a comprehensive set of reusable components with **local-first architecture**.



### 🎯 **Why Choose Angular SuperUI?**



🔥 **Local-First Architecture** - No NPM dependencies, components live in your project  

⚡ **Smaller Bundles** - Only install what you need  

🎨 **Beautiful Components** - Modern design system with dark mode support  

🛠️ **CLI-Powered** - Effortless installation and management  

📱 **Fully Responsive** - Works perfectly on all devices  

♿ **Accessibility First** - ARIA compliant and keyboard friendly  

🎭 **Themeable** - Customize colors, spacing, and appearance  

🚀 **Angular 17+** - Built for modern Angular with signals support  



---



## 🚀 Quick Start



### 🌟 **First, Check Out Our Live Demo!** 🌟






**🎮 [Experience Angular SuperUI Live](https://angular-superui.vercel.app/) 🎮**



[![Live Demo](https://img.shields.io/badge/🚀-LIVE%20DEMO-FF6B6B?style=for-the-badge&labelColor=000000&logo=vercel&logoColor=white)](https://angular-superui.vercel.app/)



*See all 16 components in action with dark mode, mobile responsiveness, and interactive examples!*






---



### 1️⃣ Install the CLI



```bash

npm install -g ngsui-cli@1.0.4

```



### 2️⃣ Initialize Your Project



```bash

ngsui-cli init

```



### 3️⃣ Add Components



```bash

# 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



```typescript

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: `

    

    

      

        


          

            

            JD

          

          


            Welcome back!

            Ready to build something amazing?

          


        


      

      

      

        

        


          Get Started

          Learn More

          

            New

            Features

          

        



        

        

          

            

              

            

          

      


        Welcome to Angular SuperUI! 🎉

        

          You're ready to build amazing user interfaces.

        

      


    



    

    

      

        Getting Started

        

          Install components locally and start building immediately.

        

      

    

  `

})

export class AppComponent {}

```



---



## 🧩 Available Components






### 🧩 **Component Showcase**






| Component | Description | Status |

|-----------|-------------|--------|

| **🪗 [Accordion](./docs/components/accordion.md)** | Collapsible content sections with single or multiple modes | ✅ Available |

| **🚨 [Alert](./docs/components/alert.md)** | Contextual feedback messages with 5 variants | ✅ Available |

| **🚨 [AlertDialog](./docs/components/alert-dialog.md)** | Modal dialogs with full accessibility and focus management | ✅ Available |

| **� [AspectRatio](./docs/components/aspect-ratio.md)** | Maintains consistent proportions for responsive content containers | ✅ Available |

| **�👤 [Avatar](./docs/components/avatar.md)** | User profile image with automatic fallback support | ✅ Available |

| **🏷️ [Badge](./docs/components/badge.md)** | Status indicators and labels with 4 variants | ✅ Available |

| **🍞 [Breadcrumb](./docs/components/breadcrumb.md)** | Navigation breadcrumbs with accessibility and custom separators | ✅ Available |

| **🔘 [Button](./docs/components/button.md)** | Interactive buttons with 9 variants and loading states | ✅ Available |

| **📅 [Calendar](./docs/components/calendar.md)** | Date picker and calendar widget with month/year navigation | ✅ Available |

| **� [Card](./docs/components/card.md)** | Flexible content container with header, content, and footer | ✅ Available |

| **🎠 [Carousel](./docs/components/carousel.md)** | Accessible image carousel with auto-play, navigation, and pagination | ✅ Available |

| **☑️ [Checkbox](./docs/components/checkbox.md)** | A control that allows the user to toggle between checked and not checked | ✅ Available |

| **🗃️ [Collapsible](./docs/components/collapsible.md)** | Expandable content sections with smooth animations and keyboard support | ✅ Available |

| **🔽 [ComboBox](./docs/components/combobox.md)** | Dropdown selection with search, multi-select, and loading states | ✅ Available |

| **🖱️ [ContextMenu](./docs/components/context-menu.md)** | Right-click context menus with keyboard shortcuts and accessibility | ✅ Available |

| **🌓 [ThemeSwitcher](./docs/components/theme-switcher.md)** | Toggle between light, dark, and system themes with localStorage persistence | ✅ Available |



### 🚀 **Coming Soon**



- Input

- Select

- And many more...



---



## 🎯 CLI Commands



### 📋 List Available Components

```bash

ngsui-cli list

```



### ➕ Add Components

```bash

# Add specific components

ngsui-cli add accordion alert card aspect-ratio

```



### ⚙️ Initialize Project

```bash

# 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](./docs/installation.md)** - Complete setup instructions

- 🪗 **[Accordion Examples](./docs/components/accordion.md)** - Interactive accordion usage

- 🚨 **[Alert Examples](./docs/components/alert.md)** - Alert variants and styling

- 👤 **[Avatar Examples](./docs/components/avatar.md)** - Avatar sizes and fallbacks

- 🏷️ **[Badge Examples](./docs/components/badge.md)** - Badge variants and accessibility

- 🍞 **[Breadcrumb Examples](./docs/components/breadcrumb.md)** - Navigation breadcrumbs and custom separators

- 🔘 **[Button Examples](./docs/components/button.md)** - Button variants, loading states, and events

- 🔧 **[CLI Reference](./packages/cli/README.md)** - 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](LICENSE) file for details.



---



## 🙏 Acknowledgments



### 💝 Special Thanks



**🎨 [Shadcn/UI](https://ui.shadcn.com/)** - 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](https://angular-superui.vercel.app/)** - **Interactive showcase of all 16 components**

- �🌐 **[Official Website](https://github.com/bhaimicrosoft/angular-superui)**

- 📦 **[NPM Package](https://www.npmjs.com/package/angular-superui)**

- 🛠️ **[CLI Package](https://www.npmjs.com/package/ngsui-cli)**

- 🐛 **[Issue Tracker](https://github.com/bhaimicrosoft/angular-superui/issues)**

- 💬 **[Discussions](https://github.com/bhaimicrosoft/angular-superui/discussions)**



---






### ☕ Enjoying Angular SuperUI?



**[Buy me a coffee](https://coff.ee/bhaikaju)** to support continued development!



---



**Made with ❤️ by [Indranil Mukherjee](https://bhaikaju.com)**