Skip to main content
Magary Logo

​
Welcome to ng-magary

ng-magary is a premium, modern UI component library for Angular, designed exclusively with the Standalone-First paradigm. Built for developers who demand aesthetic excellence and uncompromising performance, Magary delivers glassmorphism styling, fluid animations, and architectural simplicity from the first import.

Live Demo

Explore interactive examples and full documentation

GitHub Repository

View source code, report issues, and contribute

​
Why Magary?

Magary eliminates the complexity of traditional Angular component libraries by embracing modern Angular’s standalone components. No more bloated NgModules, no heavy preprocessor dependencies—just pure, modular components that integrate seamlessly into your application.
Standalone-First Philosophy: Import only what you need, where you need it. Every component is a standalone Angular component with zero module dependencies.

​
Key Features

Standalone First

Direct architectural integration without NgModule verbosity. Import components directly where needed.

Native CSS Theming

Pure CSS variables enable glassmorphism and dark mode without preprocessor coupling.

Mobile-Ready

Highly responsive designs with controlled overflows, touch actions, and dynamic viewports.

Accessibility

Grade-A a11y with keyboard navigation, ARIA roles, and native screen reader support.

High Performance

100% OnPush change detection strategy across all components for optimal rendering.

Modern Icons

Built-in Lucide icon integration with 1000+ beautiful, consistent icons.

​
Angular Compatibility

Magary supports Angular v17, v18, v19, v20, and v21—covering all modern Angular versions.
The library is tested and optimized for:
  • Angular 17.x
  • Angular 18.x
  • Angular 19.x
  • Angular 20.x
  • Angular 21.x

​
Architecture Overview

​
Standalone Components

Every component in Magary is a standalone Angular component: 
import { Component } from '@angular/core';
import { MagaryButton, MagaryCard } from 'ng-magary';

@Component({
  standalone: true,
  selector: 'app-home',
  imports: [MagaryButton, MagaryCard],
  template: `
    <magary-card>
      <h2>Welcome to Magary</h2>
      <magary-button label="Get Started" severity="info" />
    </magary-card>
  `
})
export class HomeComponent {}

​
Component Categories

Magary organizes components into logical categories:
  • MagaryButton: Primary action buttons with multiple variants
  • MagarySpeedDial: Floating action button with expandable menu
  • MargarySplitButton: Combined button with dropdown menu
  • MagaryInput: Text input with validation support
  • MagarySelect: Dropdown selection with search
  • MagaryCheckbox: Checkbox with custom styling
  • MagarySwitch: Toggle switch component
  • MagaryRadio: Radio button group
  • MagaryTextarea: Multi-line text input
  • MagaryDatepicker: Date selection component
  • MagaryInputNumber: Numeric input with controls
  • MagarySlider: Range slider component
  • MagaryRating: Star rating component
  • MagarySegmented: Segmented control selector
  • MargaryCascadeSelect: Hierarchical selection
  • MagaryTable: Advanced data table with sorting and filtering
  • MagaryDataView: Flexible data presentation layouts
  • MagaryTree: Hierarchical tree structure
  • MagaryTimeline: Event timeline visualization
  • MagaryOrganizationChart: Organization hierarchy display
  • MagaryKanban: Kanban board with drag-and-drop
  • MagaryPaginator: Pagination controls
  • MagaryPicklist: Dual-list selection
  • MagaryOrderlist: Reorderable list component
  • MagaryCard: Content card with glassmorphism
  • MagaryAccordion: Expandable content sections
  • MagaryTabs: Tabbed interface navigation
  • MagaryToolbar: Action toolbar component
  • MagaryFieldset: Grouped form fields
  • MagaryDialog: Modal dialog windows
  • MagaryTooltip: Contextual tooltips
  • MagaryOverlayPanel: Floating content panel
  • MagaryConfirmDialog: Confirmation dialogs
  • MagaryImage: Optimized image display
  • MagaryGalleria: Image gallery with lightbox
  • MagaryCarousel: Image/content carousel
  • MagaryAvatar: User avatar display
  • MargarySkeleton: Loading skeleton screens
  • MagaryDivider: Content divider
  • MagaryTag: Label and badge component
  • MagaryToast: Toast notifications
  • MagaryMessage: Inline messages
  • MagaryGrid: Responsive dashboard grid
  • MagaryGridItem: Grid item component
  • MagaryUpload: File upload with drag-and-drop

​
Design Philosophy

Glassmorphism

Semi-transparent backgrounds with backdrop blur create depth and modern aesthetics.

Fluid Animations

Smooth transitions powered by Angular animations for delightful interactions.

CSS Variables

Complete theming control through CSS custom properties—no build-time configuration.

Responsive Design

Mobile-first approach with touch-optimized interactions and dynamic viewport handling.

​
Performance Characteristics

All Magary components use OnPush change detection strategy, ensuring minimal rendering overhead and maximum performance in large applications.

​
Key Performance Features:

  • Tree-Shakeable: Import only the components you use
  • No Side Effects: "sideEffects": false ensures optimal bundling
  • Lazy Loading: Load components on-demand with Angular’s lazy loading
  • Minimal Dependencies: Core library has zero runtime dependencies beyond Angular

​
License & Third-Party Attribution

ng-magary is open-source software released under the MIT License. The library respects and acknowledges third-party open-source dependencies including @atlaskit/pragmatic-drag-and-drop and gridstack.
Complete license attributions are available in the THIRD_PARTY_NOTICES.md file.

​
Next Steps

1

Installation

Install Magary and required peer dependenciesView Installation Guide →
2

Quick Start

Build your first Magary component in minutesView Quick Start →
3

Customize Theming

Learn to customize themes and create your ownView Theming Guide →

Explore Components

Browse the complete component library

API Reference

Detailed API documentation for all components
Built with dedication to accelerate your frontends! 🚀

Build docs developers (and LLMs) love

Get started for freeTalk to us