DGA UI Library

A modern, accessible Angular component library inspired by dga/ui philosophy. Built with developer ownership, customizability, and zero vendor lock-in in mind.

✅ Angular 16, 17 & 18 Compatible

Philosophy

Unlike traditional component libraries, DGA UI Library gives you ownership of your components:

• 🎯 Copy-paste friendly - Components are added directly to your project
• 🎨 Fully customizable - Modify styles, behavior, and structure as needed
• ♿ Accessibility-first - WCAG 2.1 AA compliant primitives
• 🚀 Zero vendor lock-in - No runtime dependencies on our library
• 📦 Bootstrap utilities - Leverages Bootstrap's utility system
• 🔧 TypeScript - Full type safety and IntelliSense support

Installation

Angular 16, 17 & 18 Support

Install the library and its peer dependencies:

npm install dga-angular-lib bootstrap clsx class-variance-authority

Or use the automatic setup:

ng add dga-angular-lib

Compatibility

• ✅ Angular 16 - Full support
• ✅ Angular 17 - Full support
• ✅ Angular 18 - Full support
• ✅ TypeScript 5.0+ - Recommended
• ✅ Bootstrap 5.3+ - Peer dependency

Adding Components

Add individual components to your project:

ng generate dga-angular-lib:component button
ng generate dga-angular-lib:component accordion  
ng generate dga-angular-lib:component card
ng generate dga-angular-lib:component dialog
ng generate dga-angular-lib:component input

# Or add UI blocks
ng generate dga-angular-lib:blocks footer
ng generate dga-angular-lib:blocks login
ng generate dga-angular-lib:blocks navigation
ng generate dga-angular-lib:blocks hero
ng generate dga-angular-lib:blocks pricing
ng generate dga-angular-lib:blocks testimonials

This copies the component files directly to your project at src/app/@dga-ui/components/ (configurable).

Usage

After adding a component, use it in your templates:

<!-- Basic usage -->
<app-button>Click me</app-button>

<!-- With variants -->
<app-button variant="secondary" size="lg">
  Large secondary button
</app-button>

<!-- With custom classes -->
<app-button additionalClasses="my-custom-class">
  Custom styled button  
</app-button>

Customization

Since components are copied to your project, you can:

1. Modify styles - Edit the .scss files directly
2. Add new variants - Extend the buttonVariants configuration
3. Change behavior - Modify the component logic
4. Add features - Extend components with your own functionality

Example: Custom Button Variant

// In your copied button.component.ts
const buttonVariants = cva(
  // ... base classes
  {
    variants: {
      variant: {
        default: '...',
        secondary: '...',
        // Add your custom variant
        gradient: 'bg-gradient-to-r from-purple-500 to-pink-500 text-white'
      }
    }
  }
);

Available Components

Core Components

• [x] Button - Flexible button component with multiple variants
• [x] Input - Form input with validation support
• [x] Card - Flexible card component with header/content/footer
• [x] Dialog - Modal dialog with accessibility features
• [x] Accordion - Collapsible content sections

UI Blocks

• [x] Footer - Complete footer with links and social media
• [x] Login - Full login form with social authentication
• [x] Navigation - Advanced navbar with dropdowns
• [x] Hero - Hero section with video/image support
• [x] Pricing - Pricing cards with billing toggle
• [x] Testimonials - Customer testimonials carousel

Angular Version Support

| DGA UI Library Version | Angular Support | Status | |------------------------|----------------|---------| | 1.0.x - 1.1.x | Angular 17 | ✅ Stable | | 1.2.x | Angular 16, 17 & 18 | ✅ Latest |

Development

This library follows modern Angular practices:

• ✅ Standalone components
• ✅ Signal-based reactivity (when available)
• ✅ OnPush change detection
• ✅ Strict TypeScript configuration
• ✅ Accessibility testing
• ✅ Unit tests included

Contributing

1. Fork the repository
2. Create your feature branch
3. Add tests for your changes
4. Ensure accessibility compliance
5. Submit a pull request

License

MIT License - see LICENSE file for details.