@thivi/react NPM

Installation

# With npm
npm install @oxygen-ui/react

# With pnpm
pnpm add @oxygen-ui/react

# With yarn
yarn add @oxygen-ui/react

Usage

ThemeProvider

The ThemeProvider component is a wrapper around the Material UI's CSSVarProvider and should be used at the root level of your application to provide a theme to all Oxygen UI components.

import React from 'react';
import { ThemeProvider, extendTheme } from '@oxygen-ui/react';

const MyThemeProvider = ({ children }) => {
  const theme = extendTheme({
    colorSchemes: {
      light: {
        palette: {
          primary: {
            main: '#FF5499',
          },
        },
      },
      dark: {
        palette: {
          primary: {
            main: '#FF5456',
          },
        },
      },
    },
  });

  return <ThemeProvider theme={theme}>{children}</ThemeProvider>;
};

export default MyThemeProvider;

Components: `Button`

Here's an example of how to use the Button component:

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

const MyButton = () => {
  return (
    <Button
      fullWidth
      color="primary"
      variant="contained"
      onClick={() => console.log('Button clicked!')}
    >
      Connect
    </Button>
  );
};

export default MyButton;

Develop

To contribute to the package, follow the guide to set-up the project.

Setup the Environment

Create a .env.local file based on the .env.example file.

cp .env.example .env.local

Update the values in the .env.local file based on your requirements.

# The subpath of the Storybook static deployment. Leave empty to serve from the root of the domain.
STORYBOOK_BASE_URL=

# The Figma personal access token (PAT) for the Storybook Design Plugin's Figspec integration.
# If this is not defined, the plugin will use the public API to fetch Figma files.
# Leave the placeholder value (<YOUR_FIGMA_ACCESS_TOKEN>) as it is to disable the integration.
# For more information, visit https://storybook.js.org/addons/storybook-addon-designs.
STORYBOOK_DESIGN_ADDON_FIGMA_ACCESS_TOKEN=<YOUR_FIGMA_ACCESS_TOKEN>

Note By default, the Design addon does not provide any capabilities to inspect the Figma design. If you create a Figma personal access token and configure the setup, you could get a bit more richer preview with the help of Figspec in Design Addon. Follow the official addon documentation for more info.