The Modern Angular UI Component Library That Developers Love
Beautiful • Accessible • Type-Safe • Zero External Dependencies
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
🎮 Experience Angular SuperUI Live 🎮
See all 43 components + 15 blocks in action with dark mode, mobile responsiveness, and interactive examples!
npm install -g ngsui-clingsui-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 listimport { 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 {}| 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 |
| 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 |
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
| 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 |
- 📋 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:
- 🍴 Fork the repository
- 🌿 Create your feature branch (
git checkout -b feature/amazing-feature) - 💍 Commit your changes (
git commit -m 'Add amazing feature') - 📤 Push to the branch (
git push origin feature/amazing-feature) - 🎯 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