Installation

Get started with Prism Design System in your Angular application.

1. Install Packages

Run the following command to install the core library, themes, and icons:

npm install @devynelogic/prism-core @devynelogic/prism-theme @devynelogic/prism-icons

2. Configure Styles

Import the core theme and your preferred mode (Light/Dark) in your global styles.scss:

@use '@devynelogic/prism-theme/core' as prism;
@include prism.theme-init(
  $mode: 'light', // or 'dark'
  $primary: #2563EB
);

3. Setup Core & Icons

Prism components require Angular Animations and icon registration. Configure them in your app.config.ts:

import { ApplicationConfig, APP_INITIALIZER } from '@angular/core';
import { provideAnimations } from '@angular/platform-browser/animations';
import { PrismIconRegistry } from '@devynelogic/prism-core';
import * as PrismIcons from '@devynelogic/prism-icons';

export const appConfig: ApplicationConfig = {
  providers: [
    provideAnimations(),
    {
      provide: APP_INITIALIZER,
      useFactory: (registry: PrismIconRegistry) => () => {
        registry.addIcons(Object.values(PrismIcons));
      },
      deps: [PrismIconRegistry],
      multi: true
    }
  ]
};