React Applications

Hopper is a Design System that provides a collection of React components, tokens, and icons to help you build applications.

Requirements:

• React 18 or higher.

Installation

Install Packages

Run the following command to install Hopper packages and their peer dependencies.

Setup provider

Wrap your application with the HopperProvider component. This sets up the global styles and context required for Hopper components. Typically, this is done in your index.tsx or app.tsx, but it may vary depending on your setup.

import { HopperProvider } from "@hopper-ui/components";
import { createRoot } from 'react-dom/client';
 
const root = createRoot(document.getElementById('root'));
root.render(
    <HopperProvider theme="workleap" withBodyStyle>
        <App />
    </HopperProvider>
);

Import Styles

Add Hopper styles to your project by importing the following CSS file. Place this in your global CSS file or main stylesheet.

@import url("@hopper-ui/components/index.css");

New: Import Theme

Add your product's theme to your project by importing the following CSS file. Place this in your global CSS file or main stylesheet. You can add as many themes as you want, in case your application switch between different themes.

@import url("@hopper-ui/styled-system/theme/workleap.css");
/** or */
@import url("@hopper-ui/styled-system/theme/sharegate.css");

Make sure to set the theme on your HopperProvider to match the imported theme.

Enjoy!

Leverage Hopper's components and styled system to build user interfaces efficiently and with ease.

import { Button, Stack } from "@hopper-ui/components";
 
const Demo = () => {
    return (
        <Stack>
            <Button>Click me</Button>
            <Button>Click me</Button>
        </Stack>
    );
}

Take it Further

Explore advanced features of Hopper to unlock its full potential: