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 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");

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: