Valtech Components

Component library for Angular + Ionic + Capacitor apps. 145 components and 23+ services for auth, Firebase, i18n, and more.

Full documentation → ui.myvaltech.com

Installation

npm install valtech-components

Peer dependencies (required):

npm install @angular/common @angular/core @ionic/angular ionicons rxjs

Optional — only if you use these features:

npm install @angular/fire firebase          # Firebase services
npm install @capacitor/app @capacitor/clipboard  # Native features
npm install qr-code-styling                 # QR code component
npm install prismjs                         # Code highlighting
npm install swiper                          # Carousel component

Usage

UI only (no backend needed)

144 of 145 components work standalone — no Firebase, no backend:

import { ButtonComponent, CardComponent, TextComponent } from 'valtech-components';

@Component({
  standalone: true,
  imports: [ButtonComponent, CardComponent, TextComponent],
  template: `
    <val-card [props]="{ title: 'My Card' }">
      <val-text [props]="{ content: 'Hello World' }" />
      <val-button [props]="{ text: 'Click me', color: 'primary' }" />
    </val-card>
  `
})
export class MyComponent {}

Full integration (auth + Firebase + i18n)

Add providers in main.ts:

import {
  provideValtechFirebase,
  provideValtechAuth,
  provideValtechI18n,
  createFirebaseConfig,
} from 'valtech-components';
import firebaseConfig from './config/firebase.config.json';

bootstrapApplication(AppComponent, {
  providers: [
    provideValtechFirebase(createFirebaseConfig(firebaseConfig)),
    provideValtechAuth({ apiUrl: 'https://api.yourapp.com' }),
    provideValtechI18n({ defaultLang: 'en', supportedLangs: ['en', 'es', 'pt'] }),
  ],
});

Components

| Category | Count | Includes | |----------|------:|---------| | Atoms | 24 | avatar, button, icon, text, image, skeleton, progress-bar, qr-code… | | Molecules | 81 | inputs (text, email, phone, pin, date), cards, tabs, accordion, pagination… | | Organisms | 31 | forms, data-table, menu, toolbar, login, comment-section, infinite-list… | | Templates | 9 | page-wrapper, page-content, docs-shell, auth-background, maintenance-page… | | Total | 145 | |

Components requiring a backend API: LoginComponent, ContentReactionComponent.

Services

No setup required: ThemeService · ToastService · NavigationService · DownloadService · IconsService · LocaleService · LocalStorageService · ModalService · ConfirmationDialogService · QrGeneratorService · PaginationService · SkeletonService

Requires provideValtechAuth: AuthService · OAuthService · SessionService · TokenService · AuthStateService · DeviceService

Requires provideValtechFirebase: FirebaseService · AnalyticsService · FirestoreService · MessagingService · NotificationsService · FirebaseStorageService

Requires provideValtechI18n: I18nService

Technologies

Angular 18+ · Ionic 8+ · Capacitor 6+ · Firebase 10+ · RxJS 7.8+

Development

npm install
npm run storybook     # http://localhost:6006
npm run build         # build library
npm run test          # unit tests

License

MIT