Overview

UI-React is a React component library designed to facilitate the development of powerful applications at scale. It emphasizes the separation between theming and layout, allowing for efficient and consistent UI creation. The library is compatible with styled-components and provides a variety of components and customization options.

Features

• Theming and Layout Separation: UI-React promotes strong separation between theming and layout, enabling quick and reusable interface creation.
• React Components: The library offers a wide range of React components for building user interfaces.
• Styled-Components Integration: UI-React is built on and requires styled-components as a peer dependency.
• Customizable Theming: Developers can easily customize the theming in their applications by providing a parameter to the buildTheme function.
• Easy Setup: The KibaApp component simplifies the setup process for using UI-React components.

Installation

To install UI-React, you can run the following command:

npm install ui-react

Since UI-React is built on styled-components, you need to install it as a peer dependency by running:

npm install styled-components

To set up your code to use UI-React components, you can use the KibaApp component at the topmost level. Here’s an example of how to pass a theme object to the KibaApp component:

import { KibaApp } from 'ui-react';

const theme = {
  // theme object properties
};

const App = () => (
  <KibaApp theme={theme}>
    {/* Your app content here */}
  </KibaApp>
);

Alternatively, if you prefer not to use the KibaApp component, you can instantiate the ThemeProvider yourself, as shown below:

import { ThemeProvider } from 'styled-components';
import { resetCss } from 'ui-react';

const theme = {
  // theme object properties
};

const App = () => (
  <ThemeProvider theme={{/* resetCss, ...theme */}}>
    {/* Your app content here */}
  </ThemeProvider>
);

Please note that when instantiating the ThemeProvider manually, you’ll need to provide the CSS to reset styles as the resetCss property.

Summary

UI-React is a React component library that emphasizes the separation between theming and layout. It offers a comprehensive collection of components for building powerful applications at scale. The library integrates with styled-components and provides customization options through theming. With its easy setup and theming capabilities, UI-React allows for efficient and consistent UI creation.