Skip to main content

Getting Started

This guide is designed to help teams seamlessly integrate Abyss into their applications, enhancing their development capabilities with our robust suite of tools and features. Whether you're looking to improve your app's scalability, performance, or developer experience, Abyss is the right choice to elevate your project.

Get started with a template​

The easiest way to get started with Abyss is to use one of the pre-configured templates via the Abyss CLI. Use templates find to list all available templates, or templates create to scaffold a new project:

TemplateCommand
Next.js 16 (App)npx @uhg-abyss/cli templates create next-app [project-name]
Vite (React + TypeScript)npx @uhg-abyss/cli templates create vite [project-name]

Add Abyss to an existing application​

Peer dependencies​

React and React DOM are peer dependencies, meaning you should ensure they are installed before installing Abyss.

"peerDependencies": {
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^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​

The Abyss documentation on this site gives detailed information on importing and using all components within the Abyss library. Simply search for the component you would like to use and follow the guide. Below is an example of how to import the Button component into a file:

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

Upgrading Abyss​

Abyss releases New Versions on a biweekly basis. For further details, refer to our Versioning Guide.

You can upgrade Abyss by running the following command in the root of your application:

npm install @uhg-abyss/web@latest
yarn add @uhg-abyss/web@latest

Benefits to staying current with the latest version of Abyss include:

  • Adhering to Brand Guidelines
    • Align with the latest branding guidelines, ensuring your application maintains a consistent look and feel with the overall brand identity.
  • Enhanced Security
    • Address vulnerabilities and security enhancements to protect your application against emerging threats.
  • Improved Accessibility
    • As accessibility standards evolve, Abyss updates provide enhancements and fixes that help ensure your application is accessible to all users, including those with disabilities.
  • Access to New Components Features
    • Gain access to new components and features that can enrich the user experience and offer new functionality for your application.
  • Bug Fixes
    • Addresses defects that improve the stability and performance of your application.
  • Efficient Upgrades and Minimal Regression Testing
    • Staying updated with the latest version simplifies the upgrade process and minimizes related regression testing efforts.
Table of Contents