Hub-UI is the Angular library ecosystem I have been building since 2020. It was born from real needs in professional projects: instead of depending on monolithic frameworks or rewriting the same logic over and over, I chose to create independent, lightweight, production-ready components.
Modal system independent of any CSS framework. Handles lifecycle, accessibility (focus traps, ARIA) and is fully customisable through templates.
Step component for wizard-style flows. Supports linear and non-linear navigation, per-step validation and full design customisation.
Versatile content-panels container with four visualisations: tabs, pills, accordion and cards. Customisable header/footer, routing and keyboard navigation.
Buttons, FAB, Speed Dial and a dropdown directive for Angular, sharing the same variants and states as the rest of the system.
Animated placeholders for loading states. They mirror the visual structure of the content being loaded, improving perceived performance.
Avatars with automatic fallback: if the image fails to load, it falls back to initials, Gravatar or other sources. Multiple shapes and sizes.
Digital signature pad. Captures handwritten signatures on canvas, exports them as images and validates the signature. Useful in contract flows and legal forms.
Flexible navigation system for menus, sidebars and nav bars. Decoupled from Angular’s route configuration.
Dynamic breadcrumbs generated automatically from the route configuration. Supports i18n and RTL reading.
Tables and lists with built-in client and server pagination. Fully customisable headers, cells and filters.
Kanban board with native drag & drop. Move cards between columns, reorder them and customise the design completely.
Directive for sortable lists with drag & drop. Built on SortableJS, with FormArray support, animations and typed events.
Standalone toast notifications for Angular, with semantic types, positioning and configurable auto-dismiss.
Customisable loading indicator: inline block, container overlay or fullscreen, with CSS-only variants, a branding image and a programmatic service.
Read-only value visualisations: progress bar, meter and gauge ring, for Angular 21+.
Cross-cutting pipes, directives and services shared across the ecosystem. DOM utilities, reactive helpers and formatting functions.
Icon-set-agnostic component and directive: Font Awesome, Bootstrap Icons, Material Symbols, Solar or your own SVGs, all through the same API.
Design tokens for the ecosystem: primitive and semantic CSS custom properties with light/dark mode and 8 built-in themes. Framework-agnostic, CSS or SCSS.
