# Nuralogix Web UI Library - React

## Description

A modern, customizable React UI component library designed for efficiency and
ease of use. Built with accessibility, performance, and flexibility in mind,
this library provides a set of reusable components to streamline development and
enhance user experience.

## Installation

The main way that we ship our Nuralogix UI Library code to NPM is 
as [ECMAScript modules](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules)
with [ECMAScript 2022, the 13th edition](https://tc39.es/ecma262/) syntax.
This allows developers to take advantage of modern JavaScript features and have
greater control over what they ship to their end users.

A. Install both `@nuralogix.ai/web-ui` and `@stylexjs/stylex`:

```
# yarn
yarn add @nuralogix.ai/web-ui @stylexjs/stylex

# npm
npm install @nuralogix.ai/web-ui @stylexjs/stylex
```

B. Add the following lines to your main CSS file.

styles.css

```css
@import '@nuralogix.ai/web-ui/lib/themes/dark/stylex.css';
@import '@nuralogix.ai/web-ui/lib/themes/light/stylex.css';
@import '@nuralogix.ai/web-ui/lib/stylex.css';
```

**Note:** Your bundler should be able to resolves `@import` in your CSS file.
You may need to use `postcss` and configure `postcss-import` plugin to enable
that.

C. Add the theme provider to your main React file:

index.tsx:

```typescript
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
import { ThemeProvider, Button } from '@nuralogix.ai/web-ui';
import darkTheme from '@nuralogix.ai/web-ui/themes/dark';
import lightTheme from '@nuralogix.ai/web-ui/themes/light';
import './styles.css';

const container = document.getElementById('root') as Element;
const root = createRoot(container);

const App = () => {
  const [theme, setTheme] = useState(lightTheme);

  return (
    <ThemeProvider theme={theme}>
      <Button
        variant='primary'
        onClick={() => setTheme(theme === darkTheme ? lightTheme : darkTheme)}
      >
        Change theme
      </Button>
    </ThemeProvider>
  );
};

root.render(
  <App />
);
```