🧩 PK-UI — Angular Component Library

Enterprise Angular UI Component Library built with Angular 18 standalone components, signals, accessibility, and modern TypeScript patterns.

✨ Features

• ✅ Standalone Angular components
• ✅ Fully typed APIs
• ✅ OnPush change detection
• ✅ ControlValueAccessor support
• ✅ Accessible components (ARIA support)
• ✅ Signals-based state management
• ✅ Tree-shakeable Angular Package Format
• ✅ Production-ready enterprise architecture

📦 Installation

npm install @prabakarkaruppasamy/pk-ui

🚀 Usage

Import Components

import {
  PkButtonComponent,
  PkInputComponent,
  PkToastContainerComponent,
  PkToastService
} from '@prabakarkaruppasamy/pk-ui';

@Component({
  standalone: true,
  imports: [
    PkButtonComponent,
    PkInputComponent,
    PkToastContainerComponent
  ]
})
export class AppComponent {
  constructor(private toast: PkToastService) {}

  save() {
    this.toast.success('Saved successfully');
  }
}

🧩 Components

| Component | Selector | |---|---| | Button | <pk-button> | | Input | <pk-input> | | Badge | <pk-badge> | | Alert | <pk-alert> | | Toast | <pk-toast-container> | | Modal | <pk-modal> | | Table | <pk-table> | | Card | <pk-card> | | Accordion | <pk-accordion> | | Tabs | <pk-tabs> |

🔧 Example

<pk-button variant="primary">
  Save Changes
</pk-button>

<pk-input
  label="Email"
  type="email"
  placeholder="Enter email">
</pk-input>

<pk-toast-container position="top-right" />

🏗️ Tech Stack

• Angular 18
• TypeScript 5.4
• Angular Signals
• RxJS
• ng-packagr

👤 Author

Prabakar Karuppasamy
Frontend Architect & Technical Lead

• GitHub: https://github.com/PrabakarKaruppasamy
• LinkedIn: https://linkedin.com/in/prabakarsamy

📄 License

MIT