Peer dependencies

Please note that react and react-dom are peer dependencies, meaning you should ensure they are installed before installing Abyss.

"peerDependencies": {
    "react": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0",
    "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
},

Install Abyss Web

To add Abyss web to an existing application, first install the Abyss dependencies:

npm install @uhg-abyss/web

Then, wrap your application root component with ThemeProvider. The ThemeProvider enables global theming for your application, with the option to customize or rely on the default styles of Abyss components. Utilizing React's context, it distributes your theme to all nested components.

import { ThemeProvider } from '@uhg-abyss/web/ui/ThemeProvider';

const theme = createTheme('uhc');

function Demo() {
  return (
    <ThemeProvider theme={theme}>
      <App />
    </ThemeProvider>
  );
}

Importing components

Abyss documents give detailed directions for the importation and use of all components within the Abyss library. Simply seach Abyss docs for the component you would like to use and follow the guide. Below is an example of how to import the Button component into your file.

import { Button } from '@uhg-abyss/web/ui/Button';