Skip to main content

​
Introduction

Magary is a comprehensive Angular UI component library that provides a rich set of interactive, accessible, and customizable components. Built with modern Angular features including signals, input/output functions, and standalone components.

​
Component Categories

​
Buttons

Interactive button components for user actions:
  • Button - Standard button with multiple variants and states
  • Speed Dial - Floating action button with expandable menu items
  • Split Button - Combined primary action with dropdown menu

​
Form Controls

Input components for collecting user data:
  • Input - Text input with validation and icons
  • Textarea - Multi-line text input with auto-resize
  • Checkbox - Binary selection control
  • Radio - Single selection from multiple options
  • Switch - Toggle switch for on/off states
  • Select - Dropdown selection with filtering

​
Key Features

​
Modern Angular

All components are built using:
  • Signals for reactive state management
  • Input/Output functions for streamlined component APIs
  • Standalone components for better tree-shaking
  • OnPush change detection for optimal performance

​
Accessibility

Components follow WCAG guidelines:
  • Keyboard navigation support
  • ARIA attributes for screen readers
  • Focus management
  • Semantic HTML structure

​
Customization

Flexible styling options:
  • CSS custom properties (variables)
  • Multiple variants and sizes
  • Custom colors and themes
  • Responsive design

​
Form Integration

Seamless Angular Forms support:
  • ControlValueAccessor implementation
  • Reactive and template-driven forms
  • Validation integration
  • Disabled state management

​
Installation

npm install ng-magary lucide-angular

​
Basic Usage

Import components directly in your Angular components: 
import { Component } from '@angular/core';
import { MagaryButton } from 'ng-magary';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [MagaryButton],
  template: `
    <magary-button 
      label="Click me" 
      severity="primary"
      (onClick)="handleClick($event)"
    />
  `
})
export class AppComponent {
  handleClick(event: Event) {
    console.log('Button clicked!', event);
  }
}

​
Dependencies

Magary uses the following peer dependencies:
  • @angular/core - Angular framework
  • @angular/common - Common Angular utilities
  • lucide-angular - Icon library
  • @angular/cdk - Angular Component Dev Kit (for overlays)

​
Browser Support

Magary supports all modern browsers:
  • Chrome (latest)
  • Firefox (latest)
  • Safari (latest)
  • Edge (latest)

​
Next Steps

Button Components

Explore button variants and interactions

Form Controls

Learn about form input components

Build docs developers (and LLMs) love

Get started for freeTalk to us