Andhera UI Angular component library
npm install andhera-angularA comprehensive Angular 20 UI component library featuring reusable components, directives, services, animations, and utilities for building modern admin dashboards and applications.


- ๐จ Components - Chips (with variants, sizes, icons, removable)
- ๐ฌ Animations - Fade, Slide, Zoom, Expand/Collapse, Shake
- ๐ Directives - Scroll Reset, Custom Scrollbar (Perfect Scrollbar)
- ๐ง Services - Config, Confirmation Dialog, Loading, Media Watcher, Platform Detection, Splash Screen, Utils
- โ
Validators - Form validators (mustMatch, etc.)
- ๐งช Mock API - Built-in mock API interceptor for development
``bash`
npm install andhera-angular
This library requires the following peer dependencies:
`bash`
npm install @angular/animations @angular/cdk @angular/common @angular/core @angular/forms @angular/material @angular/router rxjs
`typescript
import { ApplicationConfig } from '@angular/core';
import { provideBee } from 'andhera-angular';
export const appConfig: ApplicationConfig = {
providers: [
provideBee({
// Your Bee configuration
layout: 'classy',
scheme: 'light',
screens: { sm: '600px', md: '960px', lg: '1280px', xl: '1440px' },
theme: 'theme-default',
themes: [{ id: 'theme-default', name: 'Default' }],
}),
],
};
`
`typescript
import { Component } from '@angular/core';
import { BeeChipsComponent } from 'andhera-angular';
@Component({
selector: 'app-example',
standalone: true,
imports: [BeeChipsComponent],
template:
variant="primary"
size="md"
[removable]="true"
(removed)="onRemoved()"
(clicked)="onClicked($event)">
icon="pi pi-cog"
iconPosition="left"
variant="secondary">
,
})
export class ExampleComponent {
onRemoved() {
console.log('Chip removed');
}
onClicked(event: MouseEvent) {
console.log('Chip clicked', event);
}
}
`
`typescript
import { Component, inject } from '@angular/core';
import { BeeConfirmationService } from 'andhera-angular';
@Component({
selector: 'app-example',
template: ,
})
export class ExampleComponent {
private confirmationService = inject(BeeConfirmationService);
confirm() {
const dialogRef = this.confirmationService.open({
title: 'Confirm Delete',
message: 'Are you sure you want to delete this item?',
actions: {
confirm: { label: 'Delete', color: 'warn' },
cancel: { label: 'Cancel' },
},
});
dialogRef.afterClosed().subscribe((result) => {
if (result === 'confirmed') {
// Handle deletion
}
});
}
}
`
`typescript
import { Component } from '@angular/core';
import { beeAnimations } from 'andhera-angular';
@Component({
selector: 'app-example',
animations: beeAnimations,
template:
,
})
export class ExampleComponent {}
`$3
`typescript
import { Component } from '@angular/core';
import { BeeScrollbarDirective } from 'andhera-angular';@Component({
selector: 'app-example',
standalone: true,
imports: [BeeScrollbarDirective],
template:
,
})
export class ExampleComponent {}
`Available Exports
$3
| Component | Selector | Description |
|-----------|----------|-------------|
|
BeeChipsComponent | bee-chips | Chips with variants, sizes, icons |$3
| Service | Description |
|---------|-------------|
|
BeeConfigService | App configuration management |
| BeeConfirmationService | Confirmation dialogs |
| BeeLoadingService | Loading state management |
| BeeMediaWatcherService | Responsive breakpoint observer |
| BeePlatformService | Platform/OS detection |
| BeeSplashScreenService | Splash screen control |
| BeeUtilsService | Utility functions |$3
| Directive | Selector | Description |
|-----------|----------|-------------|
|
BeeScrollbarDirective | [beeScrollbar] | Custom scrollbar |
| BeeScrollResetDirective | [beeScrollReset] | Reset scroll on navigation |Configuration
The library can be configured via the
provideBee() function:`typescript
provideBee({
layout: 'classy', // Layout type
scheme: 'light', // 'light' | 'dark' | 'auto'
screens: { // Breakpoints
sm: '600px',
md: '960px',
lg: '1280px',
xl: '1440px',
},
theme: 'theme-default', // Active theme
themes: [ // Available themes
{ id: 'theme-default', name: 'Default' },
],
})
`Development
`bash
npm install
npm run build:lib
`Publishing
`bash
npm run build:lib
cd dist/bee-library
npm publish --access public
``Current version: 0.1.0
Compatible with Angular 20.x
MIT ยฉ Andhera Team
See LICENSE for details.
Contributions are welcome! Please read our contributing guidelines before submitting a PR.
For issues and feature requests, please use the GitHub issue tracker.