Manual Installation
Use this guide to manually install the Hubtel design system packages in your existing project without the Aqua CLI.
1
Prerequisite
Section titled “Prerequisite”The Hubtel design system uses TailwindCSS Framework Guides so you need to install Tailwind CSS based on your project’s framework.
Installing Hubtel Packages
Section titled “Installing Hubtel Packages”Install the
Loading Code Block...Source Configuration
Section titled “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.
The Hubtel design system includes icons as components. Install the icons package for your framework:
Loading Code Block...5
Importing Components
Section titled “Importing Components”Components are imported from their direct file path (no barrel exports):
Loading Code Block...Importing Icons
Section titled “Importing Icons”Icons use barrel exports, so you can import multiple icons from a single path:
Loading Code Block...