🎨 Angular SuperUI Documentation

🌟 🚀 LIVE INTERACTIVE DEMO! 🌟

✨ Experience All 43 Components Live • Dark Mode • Mobile Responsive ✨

🚀 The most beautiful Angular component library you'll ever use

Quick Start • Components • Examples • Installation • Contributing

✨ What Makes Angular SuperUI Special?

🎨 Beautiful by Default

Every component is meticulously crafted with attention to detail, following modern design principles and the latest UI trends.

⚡ Blazing Fast Setup

Get started in seconds with our intelligent CLI that automatically configures everything for you.

🌙 Dark Mode Ready

Built-in support for light and dark themes with seamless switching and system preference detection.

♿ Accessibility First

WCAG 2.1 AA compliant components with full keyboard navigation, screen reader support, and focus management.

🎯 TypeScript Native

Full type safety, IntelliSense support, and exceptional developer experience out of the box.

📱 Mobile Optimized

Responsive components that look perfect on any device, from mobile to desktop.

🚀 Quick Start

One-Command Installation

# 🎯 Automatic setup (Recommended)
ngsui-cli init

# 📦 Or install manually
npm install angular-superui

Your First Component

import { Component } from '@angular/core';
import { Button } from '@lib/button';
import { Card, CardHeader, CardTitle, CardContent } from '@lib/card';

@Component({
  standalone: true,
  imports: [Button, Card, CardHeader, CardTitle, CardContent],
  template: `
    <Card class="w-96">
      <CardHeader>
        <CardTitle>Welcome to Angular SuperUI! 🎉</CardTitle>
      </CardHeader>
      <CardContent>
        <p class="text-muted-foreground mb-4">
          Build beautiful applications with our premium component library.
        </p>
        <Button>Get Started</Button>
      </CardContent>
    </Card>
  `
})
export class WelcomeComponent {}

🎨 Components Library

🌟 21 Production-Ready Components • Growing Every Week

🎯 Core Components

Component	Description	Docs
🔘 Button	Versatile button component with multiple variants, sizes, and states. Supports loading states, icons, and custom styling.	📖 Docs
🎴 Card	Flexible container component for organizing content. Perfect for dashboards, profiles, and content layouts.	📖 Docs
🚨 Alert	Contextual feedback messages with multiple variants (success, warning, error, info). Dismissible and customizable.	📖 Docs
👤 Avatar	User profile images with automatic fallbacks, status indicators, and group layouts. Perfect for user interfaces.	📖 Docs
🏷️ Badge	Small status indicators and labels. Perfect for notifications, counts, and status displays.	📖 Docs
🗂️ Accordion	Collapsible content panels with smooth animations. Single or multiple expansion modes supported.	📖 Docs

🧭 Navigation Components

Component	Description	Status	Docs
📑 Tabs	Advanced tabbed interface with multiple variants, smooth animations, and comprehensive form integration. Supports lazy loading, closable tabs, and WCAG compliance.		📖 Docs • 📚 Full Guide
🍞 Breadcrumb	Navigation component showing the current page's location within a hierarchy. Supports custom separators and icons.		📖 Docs

💫 Overlay & Dialog Components

Component	Description	Status	Docs
⚠️ Alert Dialog	Modal dialogs for important messages and confirmations. Accessible with focus management and keyboard navigation.		📖 Docs
🖱️ Context Menu	Right-click context menus with keyboard shortcuts and accessibility. Signal-based state management with CDK Overlay.		📖 Docs

🎨 Media & Display Components

Component	Description	Status	Docs
🎠 Carousel	Responsive image carousel with auto-play, navigation controls, and touch support. Perfect for image galleries and showcases.		📖 Docs

📅 Featured Components

Component	Description	Docs
📅 Calendar	🌟 Premium: Advanced calendar with date range selection, time picker, drag & drop, and localization support.	📖 Docs
🗃️ Collapsible	Expandable content sections with smooth animations and keyboard support. Perfect for FAQs, settings panels, and progressive disclosure.	📖 Docs
🔽 ComboBox	Advanced dropdown selection with search functionality, multi-select support, loading states, and grouped options. Perfect for forms and data filtering.	📖 Docs
📊 DataTable	Enterprise-grade data table with sorting, filtering, pagination, inline editing, row selection, export capabilities, and mobile responsiveness. Perfect for admin dashboards and data management.	📖 Docs

📚 Examples & Showcases

🎯 Real-World Examples

🏪 E-Commerce Product Card

import { Component } from '@angular/core';
import { Card, CardHeader, CardContent, CardFooter } from '@lib/card';
import { Button } from '@lib/button';
import { Badge } from '@lib/badge';
import { Avatar } from '@lib/avatar';

@Component({
  standalone: true,
  imports: [Card, CardHeader, CardContent, CardFooter, Button, Badge, Avatar],
  template: `
    <Card class="w-80 overflow-hidden">
      <div class="relative">
        <img src="product-image.jpg" alt="Product" class="w-full h-48 object-cover">
        <Badge class="absolute top-2 right-2" variant="destructive">-20%</Badge>
      </div>
      
      <CardHeader class="pb-3">
        <div class="flex justify-between items-start">
          <h3 class="font-semibold text-lg">Premium Headphones</h3>
          <div class="text-right">
            <p class="text-2xl font-bold">$79</p>
            <p class="text-sm text-muted-foreground line-through">$99</p>
          </div>
        </div>
      </CardHeader>
      
      <CardContent class="pt-0">
        <p class="text-muted-foreground text-sm mb-3">
          High-quality wireless headphones with noise cancellation
        </p>
        <div class="flex items-center gap-2">
          <div class="flex">
            <span class="text-yellow-400">★★★★★</span>
          </div>
          <span class="text-sm text-muted-foreground">(128 reviews)</span>
        </div>
      </CardContent>
      
      <CardFooter class="gap-2">
        <Button variant="outline" class="flex-1">Add to Cart</Button>
        <Button class="flex-1">Buy Now</Button>
      </CardFooter>
    </Card>
  `
})
export class ProductCardComponent {}

👨‍💼 User Profile Dashboard

import { Component } from '@angular/core';
import { Card, CardHeader, CardContent } from '@lib/card';
import { Avatar } from '@lib/avatar';
import { Badge } from '@lib/badge';
import { Button } from '@lib/button';
import { Alert } from '@lib/alert';

@Component({
  standalone: true,
  imports: [Card, CardHeader, CardContent, Avatar, Badge, Button, Alert],
  template: `
    <div class="max-w-4xl mx-auto space-y-6">
      <!-- Profile Header -->
      <Card>
        <CardContent class="pt-6">
          <div class="flex items-center space-x-4">
            <Avatar class="h-20 w-20">
              <img src="avatar.jpg" alt="User Avatar">
            </Avatar>
            <div class="space-y-1">
              <h1 class="text-2xl font-bold">John Doe</h1>
              <p class="text-muted-foreground">Senior Frontend Developer</p>
              <div class="flex gap-2">
                <Badge variant="secondary">Angular Expert</Badge>
                <Badge variant="outline">TypeScript</Badge>
                <Badge>Open to Work</Badge>
              </div>
            </div>
            <div class="ml-auto">
              <Button>Edit Profile</Button>
            </div>
          </div>
        </CardContent>
      </Card>

      <!-- Stats Cards -->
      <div class="grid grid-cols-1 md:grid-cols-3 gap-6">
        <Card>
          <CardContent class="pt-6">
            <div class="text-center">
              <div class="text-3xl font-bold text-blue-600">24</div>
              <p class="text-muted-foreground">Projects Completed</p>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent class="pt-6">
            <div class="text-center">
              <div class="text-3xl font-bold text-green-600">98%</div>
              <p class="text-muted-foreground">Client Satisfaction</p>
            </div>
          </CardContent>
        </Card>
        
        <Card>
          <CardContent class="pt-6">
            <div class="text-center">
              <div class="text-3xl font-bold text-purple-600">5+</div>
              <p class="text-muted-foreground">Years Experience</p>
            </div>
          </CardContent>
        </Card>
      </div>

      <!-- Notifications -->
      <Alert variant="success">
        <strong>Profile Updated!</strong> Your profile has been successfully updated.
      </Alert>
    </div>
  `
})
export class ProfileDashboardComponent {}

🎠 Image Gallery with Carousel

import { Component } from '@angular/core';
import { Carousel } from '@lib/carousel';
import { Card, CardContent } from '@lib/card';
import { Button } from '@lib/button';

@Component({
  standalone: true,
  imports: [Carousel, Card, CardContent, Button],
  template: `
    <Card class="max-w-4xl mx-auto">
      <CardContent class="p-6">
        <h2 class="text-2xl font-bold mb-6">Our Latest Projects</h2>
        
        <Carousel
          [images]="projectImages"
          [width]="800"
          [height]="400"
          [interval]="5000"
          class="rounded-lg overflow-hidden"
        />
        
        <div class="mt-6 text-center">
          <Button variant="outline">View All Projects</Button>
        </div>
      </CardContent>
    </Card>
  `
})
export class GalleryComponent {
  projectImages = [
    'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=800&h=400&fit=crop',
    'https://images.unsplash.com/photo-1504868584819-f8e8b4b6d7e3?w=800&h=400&fit=crop',
    'https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=400&fit=crop'
  ];
}

🛠️ Installation Guide

🚀 Automatic Setup (Recommended)

ngsui-cli init

This command will:

✅ Install the package and dependencies
✅ Configure Tailwind CSS automatically
✅ Add required CSS variables
✅ Set up the utility function
✅ Create example components

📦 Manual Installation

Click to expand manual installation steps

Install the package:

npm install angular-superui class-variance-authority clsx tailwind-merge --legacy-peer-deps

Add CSS Variables:

/* src/styles.css */
@import "tailwindcss";
 refer to installation.md for full list of classes

Installation Details 👈🏻

🎨 CLI Commands

Our powerful CLI makes component management effortless:

# 📋 List all available components
ngsui-cli list

# ⬇️ Add a single component
ngsui-cli add button

# ⬇️ Add multiple components
ngsui-cli add button card alert

# 🎠 Add the new carousel component
ngsui-cli add carousel

# ⬇️ Add all components at once
ngsui-cli add --all

# 📅 Add the premium calendar
ngsui-cli add calendar

🌟 What's Coming Next?

🚧 Roadmap 2025

Component	Status	Expected
📝 Form Components	In Development	Q1 2025
🎭 Animation Library	Planning	Q1 2025
📊 Data Tables	Planning	Q2 2025
🎨 Theme Builder	Planning	Q2 2025
📱 Mobile Components	Planning	Q3 2025

🤝 Contributing

We love contributions! Here's how you can help make Angular SuperUI even better:

🎯 Ways to Contribute

🐛 Report Bugs - Found an issue? Let us know!
💡 Suggest Features - Have ideas for new components?
📝 Improve Docs - Help make our documentation better
🔧 Submit PRs - Fix bugs or add features
⭐ Star the Repo - Show your support!

🚀 Quick Start for Contributors

# 1. Fork and clone the repository
git clone https://github.com/bhaimicrosoft/angular-superui.git

# 2. Install dependencies
npm install

# 3. Start the development server
npm run start

# 4. Make your changes and test
npm run build
npm run test

# 5. Submit a pull request

Read our Contributing Guide for detailed instructions.

💬 Community & Support

🤝 Join Our Community

📚 Resources

Resource	Description	Link
📖 Documentation	Complete component documentation	Browse Docs
🐛 Bug Reports	Report issues and bugs	GitHub Issues
💬 Discussions	Community discussions and help	GitHub Discussions
📝 Changelog	See what's new in each version	Changelog

📄 License

Angular SuperUI is open source software licensed under the MIT License.

MIT License

Copyright (c) 2024 Indranil Mukherjee

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction...

💝 Support the Project

If Angular SuperUI has helped you build amazing applications, consider supporting the project:

Your support helps us:

🚀 Add new components faster
🐛 Fix bugs and improve quality
📚 Create better documentation
🌟 Maintain the project long-term

👨‍💻 Created with ❤️ by

Indranil Mukherjee
Full Stack Developer & UI/UX Enthusiast

Made with ❤️ for the Angular community

Happy coding! 🚀

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

🎨 Angular SuperUI Documentation

🌟 🚀 LIVE INTERACTIVE DEMO! 🌟

✨ What Makes Angular SuperUI Special?

🎨 Beautiful by Default

⚡ Blazing Fast Setup

🌙 Dark Mode Ready

♿ Accessibility First

🎯 TypeScript Native

📱 Mobile Optimized

🚀 Quick Start

One-Command Installation

Your First Component

🎨 Components Library

🌟 21 Production-Ready Components • Growing Every Week

🎯 Core Components

🧭 Navigation Components

💫 Overlay & Dialog Components

🎨 Media & Display Components

📅 Featured Components

📚 Examples & Showcases

🎯 Real-World Examples

🛠️ Installation Guide

🚀 Automatic Setup (Recommended)

📦 Manual Installation

🎨 CLI Commands

🌟 What's Coming Next?

🚧 Roadmap 2025

🤝 Contributing

🎯 Ways to Contribute

🚀 Quick Start for Contributors

💬 Community & Support

🤝 Join Our Community

📚 Resources

📄 License

💝 Support the Project

👨‍💻 Created with ❤️ by

FilesExpand file tree

README.md

Latest commit

History

README.md

File metadata and controls

🎨 Angular SuperUI Documentation

🌟 🚀 LIVE INTERACTIVE DEMO! 🌟

✨ What Makes Angular SuperUI Special?

🎨 Beautiful by Default

⚡ Blazing Fast Setup

🌙 Dark Mode Ready

♿ Accessibility First

🎯 TypeScript Native

📱 Mobile Optimized

🚀 Quick Start

One-Command Installation

Your First Component

🎨 Components Library

🌟 21 Production-Ready Components • Growing Every Week

🎯 Core Components

🧭 Navigation Components

💫 Overlay & Dialog Components

🎨 Media & Display Components

📅 Featured Components

📚 Examples & Showcases

🎯 Real-World Examples

🛠️ Installation Guide

🚀 Automatic Setup (Recommended)

📦 Manual Installation

🎨 CLI Commands

🌟 What's Coming Next?

🚧 Roadmap 2025

🤝 Contributing

🎯 Ways to Contribute

🚀 Quick Start for Contributors

💬 Community & Support

🤝 Join Our Community

📚 Resources

📄 License

💝 Support the Project

👨‍💻 Created with ❤️ by