Angular Visuals

Angular Visuals is a modern Angular component library for product interfaces, admin dashboards, workflow tools, and responsive business apps. It combines a polished visual system with a clean standalone API, so you can import only what you need without forcing a custom architecture.

The library includes layout primitives, forms, navigation, overlays, feedback components, data views, and specialized modules such as calendars and kanban boards.

Docs: https://angular-visuals-docs-seven.vercel.app

Why Angular Visuals

• ⚡ Standalone-first architecture
• 🎨 Tailwind-inspired design tokens and variants
• 🌓 Light, dark, and system theme support
• 📱 Responsive components designed for desktop and mobile
• 🧩 Reusable primitives for dashboards and operational UIs
• 🏗️ Built for product, CRM, delivery, and internal tooling apps

Installation

npm install angular-visuals

Peer dependencies:

npm install @angular/core @angular/common @angular/cdk @angular/forms

Setup

1. Import global styles

@import "angular-visuals/styles/angular-visuals.css";

2. Register the library provider

import { ApplicationConfig } from '@angular/core';
import { provideAngularVisuals } from 'angular-visuals';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAngularVisuals({
      theme: {
        mode: 'system',
        defaultVariant: 'orange',
      },
    }),
  ],
};

Basic usage

import { Component } from '@angular/core';
import { AvButton, AvCard, AvInput } from 'angular-visuals';

@Component({
  selector: 'app-dashboard',
  standalone: true,
  imports: [AvCard, AvInput, AvButton],
  template: `
    <av-card rounded="lg" padding="md">
      <h2>Profile</h2>

      <av-input label="Full name" placeholder="Enter your name" />

      <button av-button variant="orange" type="button">
        Save changes
      </button>
    </av-card>
  `,
})
export class DashboardComponent {}

Component catalog

| Category | Components | | --- | --- | | Base | AvAvatar, AvBadge, AvButton, AvButtonGroup, AvCard, AvChip, AvIcon | | Form | AvInput, AvTextArea, AvSelect, AvCheckbox, AvRadio, AvSwitch, AvCurrencyInput, AvDateTimePicker, AvDateRangePicker, AvFileUpload | | Layout | AvGrid, AvAccordion, AvTable, AvPaginator, AvTimeline, AvCalendar, AvKanban | | Navigation | AvSidenav, AvBottomnav, AvBreadcrumb, AvTabs, AvStepper, AvNavLink, AvNavDropdown | | Feedback | AvAlert, AvEmptyState, AvSkeleton, AvProgressBar | | Overlay | AvDialog, AvDrawer, AvPopover, AvTooltip, AvToast, AvDropdown, AvCommandPalette | | Primitives | AvText, AvBox, AvCenter, AvCluster, AvDivider, AvHeading, AvInline, AvKbd, AvSpacer, AvStack, AvVisuallyHidden |

Core library examples

Dashboard and product UI

<av-card>
  <av-stack gap="md">
    <av-heading level="3">Revenue Overview</av-heading>

    <av-cluster gap="sm">
      <span av-chip variant="green">+12.4%</span>
      <span av-chip variant="blue">This month</span>
    </av-cluster>

    <av-button variant="orange">Export report</av-button>
  </av-stack>
</av-card>

Responsive navigation

<button #toggleTrigger type="button" av-button icon="menu">Menu</button>

<av-sidenav toggleable [toggleTrigger]="toggleTrigger" variant="orange">
  <av-nav-link label="Home" href="/" [active]="true" />
  <av-nav-link label="Calendar" href="/calendar" badge="3" />
  <av-nav-link label="Orders" href="/orders" />
</av-sidenav>

Calendar

import { AvCalendar } from 'angular-visuals';

@Component({
  standalone: true,
  imports: [AvCalendar],
  template: `
    <av-calendar
      [events]="events"
      view="month"
      [showDefaultEvents]="true"
    />
  `,
})
export class ScheduleComponent {
  events = [
    { id: '1', title: 'Sprint review', date: '2026-10-12' },
    { id: '2', title: 'Client meeting', date: '2026-10-15' },
  ];
}

Kanban board

import { AvKanban } from 'angular-visuals';

@Component({
  standalone: true,
  imports: [AvKanban],
  template: `
    <av-kanban
      [columns]="columns"
      [data]="tasks"
      valueKey="status"
      itemKey="id"
      cardTitleKey="title"
      [height]="'72vh'"
    />
  `,
})
export class BoardComponent {
  columns = [
    { id: 'todo', title: 'To do', accent: '#f59e0b' },
    { id: 'doing', title: 'Doing', accent: '#3b82f6' },
    { id: 'done', title: 'Done', accent: '#10b981' },
  ];

  tasks = [
    { id: 1, title: 'Review proposal', status: 'todo' },
    { id: 2, title: 'Send invoice', status: 'doing' },
  ];
}

Icon registry

Angular Visuals also includes an SVG icon registry for reusable brand and product icons.

import { Component, inject } from '@angular/core';
import { AvIconRegistry } from 'angular-visuals';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<span av-icon name="custom-star"></span>`,
})
export class AppComponent {
  private readonly icons = inject(AvIconRegistry);

  constructor() {
    this.icons.registerIcon(
      'custom-star',
      '<svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>'
    );
  }
}

Themes and customization

import { ThemeService } from 'angular-visuals';

const theme = inject(ThemeService);
theme.setMode('dark');

The library exposes a token-based visual system built around variants such as orange, purple, green, blue, and red, making it easy to align components with your brand.

Roadmap

• AvIconPicker
• AvTreeView
• Additional workflow and data visualization components

License

This project is licensed under the MIT License.