@oxygen-ui/react

The React implementation of the Oxygen Design System.

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

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

cp .env.example .env.local

2. 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.

Run Storybook

pnpm start

Contributing

Want to report a bug, contribute some code, or improve the documentation?

Excellent! Read up on our guidelines for contributing to get started.

License

Licenses this source under the Apache License, Version 2.0 LICENSE, You may not use this file except in compliance with the License.