Quick Start Guide

Get up and running with ng-magary in just a few minutes. This guide will walk you through creating a simple but beautiful Angular application using Magary components.

Before You Begin: Make sure you’ve completed the Installation steps. You should have ng-magary and all peer dependencies installed.

What We’ll Build

We’ll create a simple user profile card with:

A glassmorphism card container
User avatar
Action buttons with icons
A toast notification system

This tutorial covers the essentials. Once completed, you’ll understand the Magary workflow and can explore more advanced components.

Prerequisites Checklist

Before starting, verify you have:

✅ Angular CLI installed (ng version should work)
✅ Node.js 18+ installed
✅ ng-magary installed in your project
✅ Animation provider configured
✅ Lucide icons configured

If any item is missing, visit the Installation Guide.

Step-by-Step Tutorial

Create a New Component

Generate a new standalone component:

ng generate component profile --standalone

Or create it manually at src/app/profile/profile.component.ts

Import Magary Components

Open profile.component.ts and import the components we’ll use:

profile.component.ts

import { Component } from '@angular/core';
import { 
  MagaryCard, 
  MagaryButton, 
  MagaryAvatar,
  MagaryTag,
  MagaryDivider,
  MagaryToast,
  MagaryToastService 
} from 'ng-magary';

@Component({
  selector: 'app-profile',
  standalone: true,
  imports: [
    MagaryCard,
    MagaryButton,
    MagaryAvatar,
    MagaryTag,
    MagaryDivider,
    MagaryToast,
  ],
  templateUrl: './profile.component.html',
  styleUrl: './profile.component.scss'
})
export class ProfileComponent {
  constructor(private toastService: MagaryToastService) {}
  
  onFollowClick() {
    this.toastService.add({
      severity: 'success',
      summary: 'Success',
      detail: 'You are now following this user!',
    });
  }
  
  onMessageClick() {
    this.toastService.add({
      severity: 'info',
      summary: 'Info',
      detail: 'Message feature coming soon!',
    });
  }
}

Create the Template

Create the HTML template in profile.component.html:

profile.component.html

<div class="profile-container">
  <!-- Toast notifications container -->
  <magary-toast position="top-right" />
  
  <!-- Profile Card -->
  <magary-card 
    [width]="'400px'"
    [shadow]="4"
    [backgroundColor]="'var(--glass-bg)'"
    [borderRadius]="'1.5rem'"
    [padding]="'2rem'"
  >
    <!-- Avatar Section -->
    <div class="profile-header">
      <magary-avatar
        [label]="'JD'"
        [size]="'xlarge'"
        [shape]="'circle'"
        [style]="{
          'background': 'var(--gradient-primary)',
          'color': 'white',
          'font-weight': '600'
        }"
      />
      
      <div class="profile-info">
        <h2>Jane Doe</h2>
        <p class="username">&#64;janedoe</p>
      </div>
    </div>
    
    <!-- Tags -->
    <div class="tags">
      <magary-tag value="Developer" severity="info" [rounded]="true" />
      <magary-tag value="Designer" severity="success" [rounded]="true" />
      <magary-tag value="Creator" severity="warning" [rounded]="true" />
    </div>
    
    <magary-divider />
    
    <!-- Stats -->
    <div class="stats">
      <div class="stat">
        <span class="stat-value">1,234</span>
        <span class="stat-label">Followers</span>
      </div>
      <div class="stat">
        <span class="stat-value">567</span>
        <span class="stat-label">Following</span>
      </div>
      <div class="stat">
        <span class="stat-value">89</span>
        <span class="stat-label">Posts</span>
      </div>
    </div>
    
    <magary-divider />
    
    <!-- Bio -->
    <p class="bio">
      Passionate about creating beautiful user interfaces and 
      seamless user experiences. Building with Angular and Magary! ✨
    </p>
    
    <!-- Action Buttons -->
    <div class="actions">
      <magary-button
        label="Follow"
        icon="user-plus"
        severity="primary"
        [width]="'100%'"
        (onClick)="onFollowClick()"
      />
      
      <magary-button
        label="Message"
        icon="message-circle"
        variant="outlined"
        severity="secondary"
        [width]="'100%'"
        (onClick)="onMessageClick()"
      />
    </div>
  </magary-card>
</div>

Add Styling

Style your component in profile.component.scss:

profile.component.scss

.profile-container {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.profile-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.5rem;
  
  .profile-info {
    text-align: center;
    
    h2 {
      margin: 0;
      font-size: 1.75rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    
    .username {
      margin: 0.25rem 0 0;
      color: var(--text-secondary);
      font-size: 1rem;
    }
  }
}

.tags {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 1rem;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
  
  .stat {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    
    .stat-value {
      font-size: 1.5rem;
      font-weight: 700;
      color: var(--text-primary);
    }
    
    .stat-label {
      font-size: 0.875rem;
      color: var(--text-secondary);
    }
  }
}

.bio {
  color: var(--text-secondary);
  line-height: 1.6;
  text-align: center;
  margin: 0;
}

.actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

// Responsive design
@media (max-width: 768px) {
  .profile-container {
    padding: 1rem;
  }
  
  .stats {
    gap: 1rem;
  }
}

Import Global Tooltip Styles

If you haven’t already, add tooltip styles to src/styles.scss:

styles.scss

@use 'ng-magary/styles/tooltip.scss';

Add Component to App

Import and use the profile component in your app.component.ts:

app.component.ts

import { Component } from '@angular/core';
import { ProfileComponent } from './profile/profile.component';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [ProfileComponent],
  template: '<app-profile />',
})
export class AppComponent {}

Run Your Application

Start the development server:

ng serve

Open your browser to http://localhost:4200 and see your beautiful profile card!

Understanding the Code

Let’s break down what we built:

Component Imports

import { 
  MagaryCard,      // Container with glassmorphism
  MagaryButton,    // Action buttons with icons
  MagaryAvatar,    // User avatar display
  MagaryTag,       // Badge labels
  MagaryDivider,   // Content separator
  MagaryToast,     // Notification component
  MagaryToastService // Service to trigger notifications
} from 'ng-magary';

Each component is standalone and imported directly.

MagaryCard Component

<magary-card 
  [width]="'400px'"
  [shadow]="4"
  [backgroundColor]="'var(--glass-bg)'"
  [borderRadius]="'1.5rem'"
  [padding]="'2rem'"
>

MagaryCard Properties

width: Card width (supports any CSS unit)
shadow: Shadow depth level (0-5)
backgroundColor: Background color (supports CSS variables)
borderRadius: Corner rounding
padding: Internal spacing

MagaryButton Component

<magary-button
  label="Follow"
  icon="user-plus"
  severity="primary"
  [width]="'100%'"
  (onClick)="onFollowClick()"
/>

MagaryButton Properties

label: Button text
icon: Lucide icon name
severity: Color theme (primary, secondary, success, info, warning, danger, help)
variant: Style variant (solid, outlined, text)
width: Button width
onClick: Click event handler

Toast Notifications

this.toastService.add({
  severity: 'success',
  summary: 'Success',
  detail: 'You are now following this user!',
});

Toast Service Methods

add(message): Show a toast notification
clear(): Clear all toasts
remove(id): Remove specific toast by ID

Message Properties:

severity: Toast type (success, info, warning, danger)
summary: Toast title
detail: Toast message
life: Duration in ms (default: 3000)

Customization Examples

Change Theme Colors

Modify button severities to match your brand:

<!-- Use different severities -->
<magary-button severity="success" label="Approve" />
<magary-button severity="danger" label="Delete" />
<magary-button severity="warning" label="Warning" />
<magary-button severity="premium" label="Upgrade" />

Add Loading States

<magary-button
  label="Loading..."
  [loading]="true"
  [disabled]="true"
/>

Different Card Variants

<!-- Elevated card (default) -->
<magary-card variant="elevated" [shadow]="3">
  Content here
</magary-card>

<!-- Outlined card -->
<magary-card variant="outlined" [border]="'2px solid var(--primary-500)'">
  Content here
</magary-card>

<!-- Filled card -->
<magary-card variant="filled" [backgroundColor]="'var(--surface-100)'">
  Content here
</magary-card>

Icon Positions

<!-- Icon on left (default) -->
<magary-button label="Next" icon="arrow-right" />

<!-- Icon on right -->
<magary-button label="Next" icon="arrow-right" iconPos="right" />

<!-- Icon only -->
<magary-button icon="heart" [rounded]="true" />

Next Steps

Explore Theming

Learn how to customize colors, create dark mode, and build custom themes

Component Library

Browse all 50+ components with interactive examples

Form Components

Build forms with inputs, selects, checkboxes, and validation

Data Components

Display data with tables, trees, timelines, and kanban boards

Common Patterns

Form with Validation

import { Component } from '@angular/core';
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
import { MagaryInput, MagaryButton, MagaryCard } from 'ng-magary';

@Component({
  standalone: true,
  imports: [ReactiveFormsModule, MagaryInput, MagaryButton, MagaryCard],
  template: `
    <magary-card>
      <h2>Login</h2>
      <form>
        <magary-input
          [formControl]="email"
          placeholder="Email"
          [invalid]="email.invalid && email.touched"
        />
        
        <magary-input
          [formControl]="password"
          type="password"
          placeholder="Password"
          [invalid]="password.invalid && password.touched"
        />
        
        <magary-button
          label="Sign In"
          [disabled]="!email.valid || !password.valid"
        />
      </form>
    </magary-card>
  `,
})
export class LoginComponent {
  email = new FormControl('', [Validators.required, Validators.email]);
  password = new FormControl('', [Validators.required, Validators.minLength(8)]);
}

Confirmation Dialog

import { Component, inject } from '@angular/core';
import { MagaryConfirmationService, MagaryConfirmDialog } from 'ng-magary';

@Component({
  standalone: true,
  imports: [MagaryConfirmDialog],
  template: '<magary-confirm-dialog />',
})
export class MyComponent {
  private confirmService = inject(MagaryConfirmationService);
  
  deleteItem() {
    this.confirmService.confirm({
      message: 'Are you sure you want to delete this item?',
      header: 'Confirm Deletion',
      icon: 'alert-triangle',
      acceptLabel: 'Delete',
      rejectLabel: 'Cancel',
      accept: () => {
        // Handle deletion
      }
    });
  }
}

Responsive Layout

<div class="container">
  <magary-card 
    [width]="'100%'"
    [responsive]="true"
  >
    <div class="grid">
      <magary-button label="Button 1" />
      <magary-button label="Button 2" />
      <magary-button label="Button 3" />
    </div>
  </magary-card>
</div>

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem;
}

Tips for Success

Use CSS Variables: Leverage Magary’s CSS variables for consistent theming. Examples: var(--primary-500), var(--surface-0), var(--text-primary)

OnPush Strategy: All Magary components use OnPush change detection. Use signals or immutable data patterns for best performance.

Icon Explorer: Browse all available Lucide icons at lucide.dev/icons

Global Styles: Some components like tooltips require global style imports. Check the component documentation for requirements.

Congratulations! You’ve built your first Magary application. Explore more components and create beautiful Angular interfaces! 🚀

Get Started

Components

Services

Guides

Examples

Quick Start

Quick Start Guide

What We’ll Build

Prerequisites Checklist

Step-by-Step Tutorial

Understanding the Code

Component Imports

MagaryCard Component

MagaryButton Component

Toast Notifications

Customization Examples

Change Theme Colors

Add Loading States

Different Card Variants

Icon Positions

Next Steps

Explore Theming

Component Library

Form Components

Data Components

Common Patterns

Form with Validation

Confirmation Dialog

Responsive Layout

Tips for Success

Build docs developers (and LLMs) love

Get Started

Components

Services

Guides

Examples

​Quick Start Guide

​What We’ll Build

​Prerequisites Checklist

​Step-by-Step Tutorial

​Understanding the Code

​Component Imports

​MagaryCard Component

​MagaryButton Component

​Toast Notifications

​Customization Examples

​Change Theme Colors

​Add Loading States

​Different Card Variants

​Icon Positions

​Next Steps

Explore Theming

Component Library

Form Components

Data Components

​Common Patterns

​Form with Validation

​Confirmation Dialog

​Responsive Layout

​Tips for Success

Build docs developers (and LLMs) love

Quick Start Guide

What We’ll Build

Prerequisites Checklist

Step-by-Step Tutorial

Understanding the Code

Component Imports

MagaryCard Component

MagaryButton Component

Toast Notifications

Customization Examples

Change Theme Colors

Add Loading States

Different Card Variants

Icon Positions

Next Steps

Common Patterns

Form with Validation

Confirmation Dialog

Responsive Layout

Tips for Success