ng-hub-ui

Español | English

The official installer and entry point for the ng-hub-ui family of Angular component libraries. Run a single ng add ng-hub-ui command, pick the libraries you need, and let the schematic wire the dependencies into your project.

This is the umbrella installer package. It does not ship UI components itself — it installs the individual ng-hub-ui-* libraries listed below into your application.

Documentation and Live Examples

This package is part of Hub UI, a collection of Angular component libraries for standalone apps.

• Docs: https://hubui.dev/
• Live examples: https://hubui.dev/

🧩 Library Family ng-hub-ui

ng-hub-ui is the family installer. These are the libraries that make up the ecosystem:

• ng-hub-ui-avatar
• ng-hub-ui-badges
• ng-hub-ui-board
• ng-hub-ui-breadcrumbs
• ng-hub-ui-buttons
• ng-hub-ui-calendar
• ng-hub-ui-ds
• ng-hub-ui-forms
• ng-hub-ui-icons
• ng-hub-ui-metrics
• ng-hub-ui-milestones
• ng-hub-ui-modal
• ng-hub-ui-nav
• ng-hub-ui-paginable
• ng-hub-ui-panels
• ng-hub-ui-portal
• ng-hub-ui-skeleton
• ng-hub-ui-sortable
• ng-hub-ui-stepper
• ng-hub-ui-toast
• ng-hub-ui-utils

ng-hub-ui-accordion is deprecated — its accordion view lives on, improved, in ng-hub-ui-panels. ng-hub-ui-history and ng-hub-ui-action-sheet exist in the monorepo but are not yet published to npm, so the installer does not offer them.

📋 Table of Contents

• 🚀 Installation
• ⚙️ Usage
• 🛠️ What the schematic does
• 🎛️ Options
• 📦 Installable libraries
• ✋ Manual installation
• 🤝 Contribution
• ☕ Support
• 📄 License

🚀 Installation

The recommended way to add ng-hub-ui to your Angular project is the Angular CLI ng add command, which runs the installer schematic interactively:

ng add ng-hub-ui

The Angular CLI fetches the ng-hub-ui package and executes its ng-add schematic.

⚙️ Usage

Interactive

Running the command with no arguments launches a multi-select prompt:

ng add ng-hub-ui

? Which ng-hub-ui libraries do you want to install? (Press <space> to select, <a> to toggle all, <i> to invert selection)
 ◯ Avatar
 ◯ Badges & Chips
 ◯ Board (Kanban)
 ◯ Breadcrumbs
 ◯ Buttons (FAB, speed dial, dropdown)
 ◯ Calendar
 ◯ Design Tokens (ds)
 ◯ Forms
 ◯ Icons
 ◯ Metrics (progress, meter, gauge)
 ◯ Milestones (timeline)
 ◯ Modal
 ◯ Nav
 ◯ Paginable (table & list)
 ◯ Panels (tabs, pills, accordion)
 ◯ Portal
 ◯ Skeleton
 ◯ Sortable
 ◯ Stepper
 ◯ Toast
 ◯ Utils

Select one or more libraries with the space bar and confirm. The schematic resolves the matching npm packages (plus any required dependencies), adds them to your package.json, and installs them.

Non-interactive

You can skip the prompt by passing the libraries directly. Use the short identifiers shown in the prompt (the part before the label), comma-separated or repeated:

# Comma-separated
ng add ng-hub-ui --libraries=modal,paginable,utils

# Repeated flag
ng add ng-hub-ui --libraries=calendar --libraries=stepper

To update package.json without triggering the package manager install step:

ng add ng-hub-ui --libraries=modal --skip-install

🛠️ What the schematic does

The ng-add schematic performs exactly the following steps:

1. Normalizes the selection. It accepts the libraries chosen in the prompt or passed via flags (array or comma-separated string), de-duplicates them, and fails with a clear error if the selection is empty or contains an unknown library identifier.
2. Resolves dependencies. Each selected library is mapped to its npm package and version range. Required peers are pulled in automatically:
   • badges, board, buttons, calendar, modal, nav, paginable, portal and stepper additionally install ng-hub-ui-utils.
   • panels additionally installs ng-hub-ui-ds (the design-token layer it themes against).
   • sortable additionally installs the external package sortablejs.
3. Updates package.json. The resolved packages are added to the dependencies section of your project's root package.json. Existing entries are left untouched (the schematic never overwrites a version you already have pinned).
4. Installs packages. Unless --skip-install is provided, it schedules a package install task so your package manager (npm/yarn/pnpm, as detected by the Angular CLI) downloads the new dependencies.
5. Logs the result, listing the libraries that were installed.

Scope note: The installer's job is dependency wiring only. It does not modify angular.json, import providers, register components, or add stylesheet entries. After installation, import and configure each library in your app following its own README (linked above).

🎛️ Options

| Option | Type | Default | Description | | -------------- | ---------- | ------- | ------------------------------------------------------------------------------------------------ | | --libraries | string[] | — | Required. Library identifiers to install. Provide via prompt, comma-separated, or repeated. | | --skip-install | boolean | false | Update package.json only; skip the package manager install step. |

📦 Installable libraries

The schematic can install the following libraries. The identifier on the left is what you pass to --libraries; transitive packages are added automatically.

| Identifier | npm package | Auto-added dependencies | | ------------- | ---------------------------------------------------------------------------- | ----------------------- | | avatar | ng-hub-ui-avatar | — | | badges | ng-hub-ui-badges | ng-hub-ui-utils | | board | ng-hub-ui-board | ng-hub-ui-utils | | breadcrumbs | ng-hub-ui-breadcrumbs | — | | buttons | ng-hub-ui-buttons | ng-hub-ui-utils | | calendar | ng-hub-ui-calendar | ng-hub-ui-utils | | ds | ng-hub-ui-ds | — | | forms | ng-hub-ui-forms | — | | icons | ng-hub-ui-icons | — | | metrics | ng-hub-ui-metrics | — | | milestones | ng-hub-ui-milestones | — | | modal | ng-hub-ui-modal | ng-hub-ui-utils | | nav | ng-hub-ui-nav | ng-hub-ui-utils | | paginable | ng-hub-ui-paginable | ng-hub-ui-utils | | panels | ng-hub-ui-panels | ng-hub-ui-ds | | portal | ng-hub-ui-portal | ng-hub-ui-utils | | skeleton | ng-hub-ui-skeleton | — | | sortable | ng-hub-ui-sortable | sortablejs | | stepper | ng-hub-ui-stepper | ng-hub-ui-utils | | toast | ng-hub-ui-toast | — | | utils | ng-hub-ui-utils | — |

ng-hub-ui-history and ng-hub-ui-action-sheet are not offered by the installer yet: history has not been published to npm and action-sheet is pre-release. ng-hub-ui-accordion is deprecated — pick panels instead.

✋ Manual installation

If you prefer not to use the schematic, install any library directly with your package manager:

npm install ng-hub-ui-modal ng-hub-ui-paginable

Then import and configure each library following its own README, linked in the Library Family section above. Remember that some libraries have additional dependencies (for example, ng-hub-ui-calendar depends on ng-hub-ui-utils, and ng-hub-ui-sortable depends on sortablejs).

🤝 Contribution

We welcome all contributions! Here's how you can help:

# Clone the repository
git clone https://github.com/carlos-morcillo/ng-hub-ui.git
cd ng-hub-ui

# Install dependencies
npm install

1. Fork the repository
2. Create a feature branch: git checkout -b feature/amazing-feature
3. Commit your changes: git commit -m 'Add amazing feature'
4. Push to your branch: git push origin feature/amazing-feature
5. Submit a pull request

Found a bug or have a request? Open an issue: https://github.com/carlos-morcillo/ng-hub-ui/issues

☕ Support

Do you like this project? You can support us by buying us a coffee ☕:

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

MIT © ng-hub-ui contributors