Prerequisites

Use this guide to manually install the Hubtel design system packages in your existing project without the Aqua CLI.

1

Prerequisite

First, since the packages are published to the internal npm registry, you will need to setup Azure Artifact Credentials if you haven’t already done so. Visit Dev Docs for instruction on how to setup setup Azure Artifact Credentials.

Once that is done, you will need to install Tailwind CSS based on your project’s framework, as The Hubtel design system uses TailwindCSS Framework Guides.

2

Installing Hubtel Packages

Install the UI package:

npmpnpmyarn

Loading Code Block...

3

Source Configuration

Important — This step is required for components to render with their styling.

In your root CSS file (e.g. main.css, global.css), add a @source directive pointing to the installed package in node_modules:

Loading Code Block...

The @source path is relative — and it changes per layout. The snippets above are only examples. The value must be the relative path from your CSS file to node_modules, so copying a hardcoded path is the #1 silent cause of unstyled components (Tailwind never scans the library, but there’s no error). If you use the MCP server, call get_setup_instructions with your css_file_path + package_json_path and it computes the exact line for you (or verify an existing file with check_setup).

4

Icons

The Hubtel design system includes icons as components. Install the icons package for your framework:

npmpnpmyarn

Loading Code Block...

5

Usage

Importing Components

Components are imported from their direct file path (no barrel exports):

Loading Code Block...

Importing Icons

Icons use barrel exports, so you can import multiple icons from a single path:

Loading Code Block...