Installation

Hopper is Workleap's official design system, offering a robust collection of React components, design tokens and icons to streamline application development and maintain brand consistency. We've put together a guide to help you quickly get started with integrating Hopper into your project.

Choose Your Installation Path

Hopper supports flexible installation options tailored to different project types.

Select the path that best suits your setup:

Advanced Installation Options

Looking for a more tailored or specialized setup? Hopper offers advanced options to meet unique project requirements.

• Micro Frontend Architecture: Integrate Hopper into modular, micro-frontend-based projects. Coming Soon
• Granular CSS Imports: Optimize performance by importing only the CSS needed for specific components. Coming Soon

Guides

Explore our collection of guides designed to help you get the most out of Hopper. From styling tips to advanced customization techniques, these resources are here to support your journey with our design system. Check back often as we continue to expand with more tutorials and best practices.

• Text Crop: Discover how to achieve perfect vertical text alignment with our Text Crop guide. Learn how to compensate for uneven whitespace in web fonts and improve the appearance of your text using simple, effective CSS techniques. Learn more about Text Crop
• Customizing Components: Explore the flexibility of Hopper and Orbiter with our Customizing Components guide. This article introduces various customization options, from minimal styling adjustments to building entirely new components, categorized into distinct tiers to help you make the best choice for your needs. Learn more about Customizing Components