Javascript

If you can't use the default React install, you can still benefit from Hopper UI.

Tokens

Hopper tokens are a collection of design decisions translated into data, which should be used to style your applications.

Installation

Run the following command to install Hopper tokens.

Usage

CSS

Import the tokens in your project:

@import "@hopper-ui/tokens/tokens.css";

Import dark mode tokens if your application supports it:

@import "@hopper-ui/tokens/dark/tokens.css";

You can now use Hopper tokens in your project by using the following syntax:

.my-class {
    background-color: var(--hop-primary-surface-weak);
}

Fonts

In order to use Hopper fonts in your project, import the following:

@import "@hopper-ui/tokens/fonts.css";

All the necessary font-face declarations are now imported into your project.

SVG Icons

If your project is not using the React framework, you can use SVG icons directly. You can find the SVG icons in the @hopper-ui/svg-icons package.

Installation

Run the following command to install Hopper icons.

Usage

You can import the SVG directly into your JavaScript file. Keep in mind that if you plan to use SVG icons as components, you'll need to ensure that your bundler is configured to handle SVG parsing appropriately.

import alertIcon from "@hopper-ui/svg-icons/alert-24.svg";

You can also use SVG icons directly in your CSS like this::

.myComponent {
    background-image: url("@hopper-ui/svg-icons/alert-24.svg");
}