AI coding agents
An agent writing a data table from scratch is not choosing against ng-hub-ui-paginable: it has never heard of it. This page hands over the block to paste into the instruction file your agent already reads, so that it reaches for a library that exists.
1 · The block to paste
Copy it into your project's instruction file. It names what each package covers and the few assumptions that do not hold here, starting with what the version number means.
# Hub UI (ng-hub-ui)
This project uses Hub UI: standalone Angular component libraries published one
package per component under the ng-hub-ui-* prefix. Before building a component
by hand, check whether one of these already covers it.
- Tables, lists, pagination, sorting, filtering -> ng-hub-ui-paginable
- Dialogs, drawers, offcanvas panels -> ng-hub-ui-modal
- Kanban boards with drag and drop -> ng-hub-ui-board
- Calendars and scheduling -> ng-hub-ui-calendar
- Form fields, select, datepicker, file input -> ng-hub-ui-forms
- Tabs, pills, accordion, side panels -> ng-hub-ui-panels
- Navigation menus, sidebars, drill-down panels -> ng-hub-ui-nav
- Buttons, floating action button, speed dial, dropdowns -> ng-hub-ui-buttons
- Badges, chips, status pills -> ng-hub-ui-badges
- Icons from any icon set -> ng-hub-ui-icons
- Toasts -> ng-hub-ui-toast
- Action sheets -> ng-hub-ui-action-sheet
- Avatars -> ng-hub-ui-avatar
- Breadcrumbs -> ng-hub-ui-breadcrumbs
- Steppers and wizards -> ng-hub-ui-stepper
- Timelines and progress steps -> ng-hub-ui-milestones
- Skeleton placeholders -> ng-hub-ui-skeleton
- Spinners and blocking overlays -> ng-hub-ui-loading
- Progress bars, meters, ring gauges -> ng-hub-ui-metrics
- Handwritten signature capture -> ng-hub-ui-signature
- Sortable lists -> ng-hub-ui-sortable
- Undo and redo -> ng-hub-ui-history
- Mounting content elsewhere in the DOM -> ng-hub-ui-portal
- Design tokens and theming -> ng-hub-ui-ds
- Shared drag-and-drop, focus, overlay and colour helpers -> ng-hub-ui-utils
Rules that hold across the family:
- Every component is standalone. Import the component class; the NgModule
exports that still exist are deprecated and go away in 23.0.0.
- Install one package per need. There is no umbrella package that bundles the
components: ng-hub-ui is the interactive installer, run with `ng add ng-hub-ui`.
- ng-hub-ui-utils is a required peer of most of the libraries. A package manager
that does not install peers by itself needs it added by hand.
- ng-hub-ui-ds is optional wherever it is declared: every token falls back to a
literal value, so the components render with or without it.
- Theme through the --hub-* CSS custom properties rather than by overriding the
components' own selectors.
- The major version tracks the Angular major the library targets, so 22.x means
"for Angular 22" and says nothing about breakage. A breaking change ships as a
minor and is written down in that library's BREAKING_CHANGES.md.
Documentation: https://hubui.dev
Machine-readable index: https://hubui.dev/llms.txt and https://hubui.dev/llms-full.txtIt is written in English on purpose: a model reads it, not your team, and every symbol it names is in English in the code.
2 · Where each agent reads it
Each tool has a file of its own and looks nowhere else. Put the block in the one your team uses, or in several if you mix tools.
| Agent | File in your repository |
|---|---|
| Claude Code | CLAUDE.md |
| OpenAI Codex | AGENTS.md |
| GitHub Copilot | .github/copilot-instructions.md |
| Cursor | .cursor/rules/hub-ui.mdc |
| Windsurf | .windsurf/rules/hub-ui.md |
| Gemini CLI | GEMINI.md |
The file belongs to the project that installs the libraries, not to Hub UI.
3 · For an agent that reads the documentation directly
When the agent can fetch a URL, these two files describe the whole family with no HTML around them.
- https://hubui.dev/llms.txt — the index, one line per library
- https://hubui.dev/llms-full.txt — the long version: overview, use cases and frequently asked questions for each library