UIKit & Design System

Introduction

Our UIKit is built on top of HeroUI, providing a curated set of components that are simple to use while maintaining flexibility. We've wrapped the HeroUI npm packages, setting up theming, icons, fonts, and working with assets to ensure consistency across our applications.

The UIKit offers a quick start for new projects, allowing you to create visually appealing apps right from day one. We've made a conscious decision to limit certain HeroUI features to streamline the user experience and focus on what's essential for our platform.

Key Features

• Curated Components: We’ve carefully selected and modified components from HeroUI to ensure they’re easy to use and meet the needs of our applications. The UIKit doesn’t just wrap existing components; we’ve enhanced and simplified them to make development faster and more intuitive.
• Customization: Theming, icons, fonts, and asset management are set up to align with our design principles, ensuring that your app’s visual identity is consistent from the very start.
• Quick Start: When you begin a new project, you’ll clone the UIKit and start building based on your design. While the UIKit provides a solid foundation, it’s flexible enough to adapt and evolve as your project grows. This approach helps reduce development time without limiting your design possibilities.
• Storybook Integration: We document all components in Storybook, making it easy for developers and designers to collaborate and refine UI elements. You can explore the components and their variants in real-time at our Storybook.
• Code Quality: Our CI pipeline includes linters and other code quality tools to ensure high standards across all projects. This allows us to maintain a clean and consistent codebase, ensuring that quality is built into every project from the ground up.

Benefits of the UIKit

• Consistency: With the UIKit, every application we build shares the same foundational design system. This consistency makes our apps easier to maintain and scale, ensuring a cohesive user experience.
• Speed: By providing ready-made, tested components, the UIKit accelerates development and helps teams hit the ground running. It takes care of repetitive tasks, letting developers focus on building core features and custom functionality.
• Flexibility: While the UIKit provides a quick start, it’s not rigid. You can modify or extend the components to meet the specific needs of your project, whether that’s adding new features or adjusting styles.