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 with ECMAScript 2022, the 13th edition 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

@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:

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 />
);