Usage

Step-by-step guide to integrate Akinon UI Kit components into your React applications.

This guide explains how to integrate and use the Akinon UI library in React applications. The library offers two ways of integration: using the entire UI kit or installing individual components.

Installation

Installing UI Kit

Install the full Akinon UI kit to access all components:


pnpm install @akinon/ui-react

Installing Individual UI Components

For specific UI components, install them individually. You can find the list of components in the Storybook section.


pnpm install @akinon/ui-[component-name]
# Example: pnpm install @akinon/ui-button

Setting Up the AkinonUiProvider

Wrap your application with AkinonUiProvider to ensure all UI components are styled and function correctly.

Example in `main.tsx`

src/main.tsx


import { AkinonUiProvider } from '@akinon/ui-react';
// or from "@akinon/ui-system" package
import { AkinonUiProvider } from '@akinon/ui-system';
 
// Other necessary imports...
 
// React application rendering
ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <AkinonUiProvider>{/* Rest of your application */}</AkinonUiProvider>
  </React.StrictMode>
);

Using Components in Your Application

After setting up the AkinonUiProvider, you can start using Akinon UI components.

Importing Components

From the full library:


import { Button } from '@akinon/ui-react';

Or individual components:


import { Button } from '@akinon/ui-button';