Skip to Content
UI KitGetting StartedOverview

Overview

Akinon's UI Kit aims to provide a consistent design system for our frontend products.

Akinon UI Kit

Purpose of this library

The Akinon UI library serves several key purposes:

  1. Consistent Design System: This library is at the heart of ensuring a unified design system and user experience across all Akinon products
  2. Efficient Product Development: Akinon UI Kit empowers our development teams to create new products with speed and agility. By providing a wealth of pre-built components and design elements, it accelerates the development process while maintaining quality.
  3. Empowering Customers: Akinon UI Kit extends its benefits beyond our internal teams. It is made available to our customers, enabling them to create their own products within the Akinon ecosystem. This not only enhances customer satisfaction but also fosters growth within our ecosystem.

Opinionated design system

Our design system is opinionated, meaning it adheres to predefined standards and is not open to extensive customization in certain areas, such as colors, fonts, paddings, margins, and more. This opinionated approach is widely adopted by renowned companies globally to maintain consistency and brand identity across their products.

Most components within the library are designed to be consistent and not accept any props for styling purposes. For example, the Button component won’t allow users to override its design using custom styles or className props. This approach ensures that our design remains intact and in line with our design guidelines. But we also do our best to provide a way to customize the components when needed.

React Eco-system

The Akinon UI library is a comprehensive collection of React components, built on top of the Ant Design library.

SCSS is used for overriding Ant Design’s default styles and adding our own custom styles. Also, CSS variables made available from single source of truth, by using AkinonUiProvider component from @akinon/ui-system package.

All components are written in TypeScript, which ensures type safety even before the code is executed. As Akinon Engineers, we value developer experience as much as user experience thus we’re making sure that VS Code intellicense is working properly for all components.

Code check-ins are validated by our CI/CD pipeline, which runs tests, type checking and linting to ensure that the code is error-free and meets our quality standards.

Usage