# Hub UI — Angular Component Library for Standalone Apps

> Hub UI (ng-hub-ui) is an open-source ecosystem of standalone, signal-friendly,
> CSS-variable-driven Angular UI libraries, each published individually on NPM
> under the ng-hub-ui-* prefix.
> Docs: https://hubui.dev | Repo: https://github.com/hub-env/hub-ui | License: MIT

## Component Libraries

- [Angular Action Sheet](https://hubui.dev/en/action-sheet/overview/): Angular action sheet opened from a service: actions with roles, grouped or flat, handlers that can refuse to close, and dismissal by backdrop, keyboard or a drag of the sheet.
- [Angular Avatar Component](https://hubui.dev/en/avatar/overview/): Angular avatar component with initials, fallback images, presence badges and CSS variables for reusable user identity interfaces.
- [Angular Badges Library](https://hubui.dev/en/badges/overview/): Semantic Angular badges for statuses, counters and removable filter tags, with CSS variables and public SCSS mixins for custom colour families.
- [Angular Kanban Board Component](https://hubui.dev/en/board/overview/): Angular Kanban board component with drag and drop, custom card templates, column workflows and CSS variables for business dashboards.
- [Angular Breadcrumbs Component](https://hubui.dev/en/breadcrumbs/overview/): Angular breadcrumbs component with router integration, custom templates, RTL support and flexible styling tokens.
- [Angular Button Library](https://hubui.dev/en/buttons/overview/): Complete Angular 22 button system with signal-based API — standard buttons, FAB, speed dial and overlay dropdown. Zero dependencies beyond ng-hub-ui-utils.
- [Angular Calendar Component](https://hubui.dev/en/calendar/overview/): Angular calendar component with event views, drag and drop, templates, internationalization and CSS variables for scheduling interfaces.
- [Angular Forms Library](https://hubui.dev/en/forms/overview/): Accessible Angular form fields (input, textarea, slider, select, datepicker) with automatic control/group/form error display, reactive forms and CSS variables.
- [Angular Undo Redo History Store](https://hubui.dev/en/history/overview/): Angular undo and redo history store with Signals-friendly APIs, transactions, limits and reactive form support.
- [Angular Icon Library (set-agnostic)](https://hubui.dev/en/icons/overview/): Icon-set-agnostic Angular icons: render Font Awesome, Bootstrap Icons, Material Symbols, Solar or your own SVGs through one <hub-icon> / [hubIcon] API, themed with CSS variables.
- [Install Angular UI Libraries with ng add](https://hubui.dev/en/installer/overview/): The ng-hub-ui family installer: one ng add command that asks which libraries you want, resolves the packages each of them needs and writes them into your manifest.
- [Angular Loading Spinner & Overlay](https://hubui.dev/en/loading/overview/): Angular loading component with spinner, dots, bars, pulse and ring indicators in inline, overlay and fullscreen modes, plus a service for app-wide blocking overlays.
- [Angular Progress, Meter & Ring](https://hubui.dev/en/metrics/overview/): Read-only Angular metric primitives — a linear progress bar, a graded meter and a circular ring gauge — driven by design-system tokens with full ARIA semantics.
- [Angular Timeline & Progress Steps](https://hubui.dev/en/milestones/overview/): Angular timeline and progress-steps component: vertical or horizontal, fully customizable nodes, content inside and beside each step, themed with CSS variables.
- [Angular Modal Component](https://hubui.dev/en/modal/overview/): Accessible Angular modal component with stacking, fullscreen mode, templates, keyboard handling and CSS variables for standalone apps.
- [Angular Navigation Menu Component](https://hubui.dev/en/nav/overview/): Angular navigation component with dropdowns, drill-down panels, responsive collapse, router integration and CSS-variable theming.
- [Angular Data Table & Lists](https://hubui.dev/en/paginable/overview/): Angular data table and paginated list with server-side pagination, sorting, filtering, selection, templates and CSS variables.
- [Angular Tabs, Pills & Accordion](https://hubui.dev/en/panels/overview/): Angular content-panels component that renders as tabs, pills or an accordion, with routing, reactive forms, keyboard navigation and CSS variables.
- [Angular Portal and Overlay Rendering](https://hubui.dev/en/portal/overview/): Angular portal library for dynamic component, template and overlay rendering outside the current DOM tree with positioning control.
- [Angular Signature Pad](https://hubui.dev/en/signature/overview/): Accessible Angular signature field that stores mouse, touch and pen input as scalable SVG form values, with undo, redo and PNG export.
- [Angular Skeleton Loader Component](https://hubui.dev/en/skeleton/overview/): Angular skeleton loading placeholders with reusable presets, inline DSL templates, responsive values and CSS variables for shimmer states.
- [Angular Drag & Drop Sortable List](https://hubui.dev/en/sortable/overview/): Angular sortable list and drag-and-drop utilities for arrays, FormArray integration, Signals workflows and connected lists.
- [Angular Stepper Component](https://hubui.dev/en/stepper/overview/): Angular stepper component with validation, orientation modes, custom controls, i18n and CSS-variable theming.
- [Angular Toast Notification Service](https://hubui.dev/en/toast/overview/): Standalone Angular toast notification service with Signals, lifecycle observables, progress bar, six positions and full CSS variable theming.
- [Angular Utility Library](https://hubui.dev/en/utils/overview/): Angular utility library with pipes, focus management, overlays, transitions and translation helpers shared across reusable UI components.

## API References

- [ng-hub-ui-action-sheet API](https://hubui.dev/en/action-sheet/api/): HubActionSheet, HubActionSheetRole, HubActionSheetGroup — full ng-hub-ui-action-sheet API reference: inputs, outputs, types and templates.
- [ng-hub-ui-avatar API](https://hubui.dev/en/avatar/api/): AvatarSource, AvatarComponent, AvatarModule, AvatarConfig, AvatarService — full ng-hub-ui-avatar API reference: inputs, outputs, types and templates.
- [ng-hub-ui-badges API](https://hubui.dev/en/badges/api/): HubBadgeSize, HubBadgeColor, HubBadgeShape, HubChipSetApi, HubBadgeVariant — full ng-hub-ui-badges API reference: inputs, outputs, types and templates.
- [ng-hub-ui-board API](https://hubui.dev/en/board/api/): Board, BoardCard, BoardColumn, BoardDragItem, BoardDragDropEvent — full ng-hub-ui-board API reference: inputs, outputs, types and templates.
- [ng-hub-ui-breadcrumbs API](https://hubui.dev/en/breadcrumbs/api/): HubBreadcrumbComponent, HubBreadcrumbItemDirective — full ng-hub-ui-breadcrumbs API reference: inputs, outputs, types and templates.
- [ng-hub-ui-buttons API](https://hubui.dev/en/buttons/api/): HubFabSize, HubBtnSize, HubRowAction, HubBtnVariant, HubFabPosition — full ng-hub-ui-buttons API reference: inputs, outputs, types and templates.
- [ng-hub-ui-calendar API](https://hubui.dev/en/calendar/api/): CalendarDay, CalendarWeek, CalendarEvent, CalendarMonth, CalendarViewType — full ng-hub-ui-calendar API reference: inputs, outputs, types and templates.
- [ng-hub-ui-forms API](https://hubui.dev/en/forms/api/): HubMapPipe, HubOtpMode, HubFileItem, HubFileKind, HubLabelType, HubDateRange — full ng-hub-ui-forms API reference: inputs, outputs, types and templates.
- [ng-hub-ui-history API](https://hubui.dev/en/history/api/): HistoryEntry, HistoryMetadata, HistoryCommitOptions, HistoryPatchOperation — full ng-hub-ui-history API reference: inputs, outputs, types and templates.
- [ng-hub-ui-icons API](https://hubui.dev/en/icons/api/): HubIconPack, HubIconImgSpec, HubIconSvgSpec, HubIconUseSpec, HubIconComponent — full ng-hub-ui-icons API reference: inputs, outputs, types and templates.
- [ng-hub-ui-loading API](https://hubui.dev/en/loading/api/): HubLoadingMode, HubLoadingSize, HubLoadingBarMode, HubLoadingOptions — full ng-hub-ui-loading API reference: inputs, outputs, types and templates.
- [ng-hub-ui-metrics API](https://hubui.dev/en/metrics/api/): HubRingBand, HubMeterBand, HubMetricsColor, HubProgressSize, HubMeterResolved — full ng-hub-ui-metrics API reference: inputs, outputs, types and templates.
- [ng-hub-ui-milestones API](https://hubui.dev/en/milestones/api/): HubMilestoneState, HubMilestoneComponent, HubMilestonesComponent — full ng-hub-ui-milestones API reference: inputs, outputs, types and templates.
- [ng-hub-ui-modal API](https://hubui.dev/en/modal/api/): ModalDismissReasons, HubModal, HubActiveModal, HubModalOptions — full ng-hub-ui-modal API reference: inputs, outputs, types and templates.
- [ng-hub-ui-nav API](https://hubui.dev/en/nav/api/): HubNavItem, HubNavLabels, HubNavItemType, HubNavPosition, HubNavComponent — full ng-hub-ui-nav API reference: inputs, outputs, types and templates.
- [ng-hub-ui-paginable API](https://hubui.dev/en/paginable/api/): PaginableDefaults, PaginableTableHeader, PaginableStateOutlet — full ng-hub-ui-paginable API reference: inputs, outputs, types and templates.
- [ng-hub-ui-panels API](https://hubui.dev/en/panels/api/): PanelsType, PanelsComponent, PanelsConfig, HubTabNavItem, HubPanelVariant — full ng-hub-ui-panels API reference: inputs, outputs, types and templates.
- [ng-hub-ui-portal API](https://hubui.dev/en/portal/api/): PortalDismissReasons, HubPortal, HubPortalStack, HubActivePortal — full ng-hub-ui-portal API reference: inputs, outputs, types and templates.
- [ng-hub-ui-signature API](https://hubui.dev/en/signature/api/): HubSignaturePoint, HubSignatureLabel, HubSignatureStroke — full ng-hub-ui-signature API reference: inputs, outputs, types and templates.
- [ng-hub-ui-skeleton API](https://hubui.dev/en/skeleton/api/): HubSkeletonPreset, HubSkeletonParams, HubSkeletonAstNode — full ng-hub-ui-skeleton API reference: inputs, outputs, types and templates.
- [ng-hub-ui-sortable API](https://hubui.dev/en/sortable/api/): Sortable, SortableData, SortableEvent, SortableBinding, SortableBindings — full ng-hub-ui-sortable API reference: inputs, outputs, types and templates.
- [ng-hub-ui-stepper API](https://hubui.dev/en/stepper/api/): StepperLayout, StepperOptions, StepperComponent, StepperNavDirective — full ng-hub-ui-stepper API reference: inputs, outputs, types and templates.
- [ng-hub-ui-toast API](https://hubui.dev/en/toast/api/): ToastComponent, ToastContainerComponent, ToastService, ToastConfigService — full ng-hub-ui-toast API reference: inputs, outputs, types and templates.
- [ng-hub-ui-utils API](https://hubui.dev/en/utils/api/): HubRgb, HubColor, HubOklch, HubGetPipe, HubNeutralRamp, HubNeutralStep — full ng-hub-ui-utils API reference: inputs, outputs, types and templates.