Individual Packages

If you require a specific installation, you can install Hopper UI packages separately.

Tokens

Installation

Run the following command to install the tokens package.

Usage

Import the tokens in your project by doing the following:

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

If your application supports a dark mode, import dark mode tokens as well:

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

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

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

Fonts

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

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

Font-face declarations are now imported in your project.

Failing to do so would prevent you from using font family tokens such as var(--hop-font-family-primary).

Inter and ABC Favorit variable fonts are used. This allows for a more efficient use of font files, only one font is loaded per typeface, covering all font-weights. Resulting in a smaller bundle size for all.

Styled System

A styled system package inspired by styled-components will be released, allowing the use of these tokens as JavaScript props at a later time.

Icons

Installation

Usage

You can now use icons and rich icons in your project by using the following syntax:

import { AddIcon, ConversationRichIcon } from "@hopper-ui/icons";
 
<AddIcon />
<ConversationRichIcon />

Standalone Installation

It is recommended to use @hopper-ui/icons with @hopper-ui/components. The standalone installation procedure is detailed in case you only need the icons, and not the components. This is also the installation process until the components are released.

Import the styles in your project:

@import "@hopper-ui/icons/index.css";
@import "@hopper-ui/styled-system/index.css";

Configuring your application is a little different:

import { StyledSystemProvider } from "@hopper-ui/styled-system";
import { createRoot } from "react-dom/client";
import App from "./App";
 
const root = createRoot(document.getElementById("root")!);
 
root.render(
    <StyledSystemProvider withBodyStyle colorScheme="light">
        <App />
    </StyledSystemProvider>
);

Using the icon is the exact same way as with the default package.

import { AddIcon } from "@hopper-ui/icons";
 
<AddIcon />

React 16 Installation

If you're using React 16, you need to use the @hopper-ui/icons-react16 package.

The usage is the same as the default package, you only need to import the icons from a different package.

import { AddIcon, ConversationRichIcon } from "@hopper-ui/icons-react16";
 
<AddIcon />
<ConversationRichIcon />