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.

🔥 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

• ✅ 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

npm install -g ngsui-cli

ngsui-cli init

# 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

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 {}

ngsui-cli list

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

# Initialize with default settings
ngsui-cli init

• 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

• 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

• 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

• 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

• 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

• 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

• 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

• 📋 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

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

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

🎨 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.

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