@perfectui/core

Complete PerfectUI component library for Angular 19+.

Why @perfectui/core?

Install @perfectui/core to get all PerfectUI components in one import.

Installation

npm install @perfectui/core @perfectui/toastr @perfectui/dialog

Usage

import { provideToastr, provideDialog } from '@perfectui/core';

export const appConfig: ApplicationConfig = {
  providers: [
    provideToastr(),
    provideDialog(),
  ],
};

import { ToastrService, DialogService } from '@perfectui/core';

export class AppComponent {
  private toastr = inject(ToastrService);
  private dialog = inject(DialogService);

  showToast() {
    this.toastr.success('Hello World!', 'Success');
  }

  async showDialog() {
    const result = await this.dialog.confirm('Are you sure?', 'Confirm');
  }
}

Included Packages

| Package | Description | |---------|-------------| | @perfectui/toastr | Toast notifications | | @perfectui/dialog | Dialogs & modals |

Theming

Customize colors using CSS custom properties in your styles.css:

:root {
  /* Colors */
  --pui-success-500: #22c55e;
  --pui-error-500: #f43f5e;
  --pui-warning-500: #eab308;
  --pui-info-500: #0ea5e9;

  /* Toast customization */
  --pui-toast-radius: 12px;

  /* Dialog customization */
  --pui-dialog-radius: 16px;
}

See the individual package docs for all available CSS variables.

License

MIT