Get started

1. Install

   npm install @pacit/components

   Copy

   No zone.js anywhere in the tree — the package refuses it by gate, not by convention.

2. Provide

   The library reads one optional config for defaults; the application stays the owner of policy — locale, texts, theme.

   import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
   import { providePctConfig } from '@pacit/components';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideZonelessChangeDetection(),
       providePctConfig({ defaultSize: 'md' }),
     ],
   };

   Copy

3. A first form

   Signal forms end to end: the model is a signal, the schema is a function, the field wrapper wires the label, hint and error lines.

   import { Component, signal } from '@angular/core';
   import { FormField, form, required } from '@angular/forms/signals';
   import { PctField, PctText } from '@pacit/components/field';
   
   /** The first form: a model that is a signal, a schema that is a function, one required rule. */
   @Component({
     selector: 'app-first-form',
     imports: [FormField, PctField, PctText],
     template: `
       <pct-field label="Workspace name" hint="Lowercase, dashes allowed">
         <input pctText [formField]="settings.name" />
       </pct-field>
     `,
   })
   export class FirstForm {
     readonly model = signal({ name: '' });
     readonly settings = form(this.model, (path) => {
       required(path.name, { message: 'Every workspace needs a name' });
     });
   }

   Copy

   Workspace name *

   Lowercase, dashes allowed

4. Server-side rendering

   Every component hydrates cleanly — the sandbox suite measures it per view, in three engines. One line more than step 2, and this documentation site is itself prerendered from the same package.

   import { ApplicationConfig, provideZonelessChangeDetection } from '@angular/core';
   import { provideClientHydration } from '@angular/platform-browser';
   import { providePctConfig } from '@pacit/components';
   
   export const appConfig: ApplicationConfig = {
     providers: [
       provideZonelessChangeDetection(),
       provideClientHydration(),
       providePctConfig({ defaultSize: 'md' }),
     ],
   };

   Copy

Next: the components · theming