@kern-ux-annex/kern-angular-kit

Angular component library implementing the KERN Design System. This library provides a comprehensive set of accessible, reusable UI components following the KERN UX standards.

🚀 Features

• 🎨 KERN Design System - Complete implementation of KERN UX components
• 📱 Modern Angular - Built with Angular 20.2+ using signal APIs
• ♿ Accessibility First - WCAG 2.1 AA compliant components
• 📝 Form Integration - Full Angular Forms support (Template-driven & Reactive)
• 🔧 TypeScript Ready - Full TypeScript support with comprehensive type definitions
• 📦 Tree Shakable - Optimized bundle size with standalone components
• 🎯 Production Ready - Thoroughly tested and CI/CD integrated
• 🔄 Signal-based - Modern Angular patterns with InputSignal and OutputEmitterRef

⚡ Quick Start

npm install @kern-ux-annex/kern-angular-kit

🛠️ Usage

Import Components

// Option 1: Import entire module
import { KernAngularKitModule } from '@kern-ux-annex/kern-angular-kit';

@NgModule({
  imports: [KernAngularKitModule]
})
export class AppModule {}

// Option 2: Import individual components (Recommended)
import { KernInputText, KernAlert } from '@kern-ux-annex/kern-angular-kit';

@Component({
  imports: [KernInputText, KernAlert],
  template: `...`
})
export class MyComponent {}

Basic Example

<kern-input-text
  labelText="Full Name"
  hintText="Enter your first and last name"
>
</kern-input-text>

<kern-alert title="Success!" variant="success">
  Form submitted successfully!
</kern-alert>

🎨 CSS Dependencies

You'll need the KERN UX CSS framework:

npm install @kern-ux/native

Add to your angular.json or main CSS file:

@import '@kern-ux/native/dist/kern.min.css';
@import '@kern-ux/native/dist/fonts/fira-sans.css';

🔧 Peer Dependencies

The library requires these Angular packages:

• @angular/core: ^20.2.3
• @angular/common: ^20.2.3
• @angular/forms: ^20.2.3
• @angular/localize: ^20.2.3

📄 Storybook Documentation

Explore all components interactively with our Storybook documentation

🔗 View Component Storybook

The Storybook includes:

• 🎯 Interactive Examples - Live component demonstrations with controls
• 📋 API Documentation - Complete property and event documentation
• 🔧 Usage Examples - Copy-paste ready code snippets

📄 License

EUPL-1.2

🤝 Contributing

This package is part of the KERN-UX community project. For more information, visit: https://gitlab.opencode.de/kern-ux/community/angular-kit