TeamXtend UI Kit

A comprehensive Angular 18 component library built with Bootstrap 5 and NG Bootstrap.

Installation

npm install teamxtend-ui-kit

Peer Dependencies

This library requires the following peer dependencies:

npm install @angular/common@^18.0.0 @angular/core@^18.0.0 @angular/forms@^18.0.0 @angular/router@^18.0.0 @ng-bootstrap/ng-bootstrap@^17.0.0 bootstrap@^5.3.0

Setup

1. Import Bootstrap styles

Add Bootstrap CSS to your angular.json:

{
  "styles": [
    "node_modules/bootstrap/dist/css/bootstrap.min.css",
    "src/styles.scss"
  ]
}

Or import in your global styles.scss:

@import "bootstrap/scss/bootstrap";

2. Import components

All components are standalone and can be imported directly:

import { ButtonComponent } from 'teamxtend-ui-kit';

@Component({
  standalone: true,
  imports: [ButtonComponent],
  // ...
})
export class MyComponent {}

Features

• Standalone Components: All components are standalone (no NgModule required)
• Bootstrap 5: Built on top of Bootstrap 5.3
• NG Bootstrap: Leverages NG Bootstrap components
• TypeScript: Full TypeScript support with type definitions
• SCSS: Customizable SCSS variables
• Tree-shakeable: Optimized bundle size with tree-shaking support

Component Categories

• Foundation: Design tokens, utilities, and base styles
• Primitives: Basic UI components (buttons, inputs, icons)
• Components: Composed components (modals, dropdowns)
• Directives: Standalone directives
• Pipes: Standalone pipes

Documentation

For detailed documentation and examples, visit our Storybook documentation.

License

MIT