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...

Make sure the path is relative to the location of your CSS file.

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...