Setup Neo Libraries
Neo is a CSS framework built with reusable user interface components, guided by clear user experience standards, that are assembled to create a truly cohesive experience for all Avaya products. Neo supports the latest 2 versions of web browsers.
Getting Started
Select either the React framework and another framework depending upon your preferred working environment.
- If you are working with React, use the Neo React Framework .
- If you are working with any other framework, skip to the section Other Frameworks below for installation instructions.
Neo React Framework
This package contains both compiled and minified versions of the Neo .css file, as well as separate stylesheets for both icons and multilingual font support.
Versioning recommendations for React: React version 18+ required. Previous versions are not supported and you will run into issues.
To install the Neo React framework, follow the two step process shown below. Then, import the component(s) that you'd like to use.
Step 1
Select one of these three command lines according to your preferred platform.
Option 1 - With NPM
npm install @avaya/neo-react
Option 2 - With Yarn
yarn add @avaya/neo-react
Option 3 - With PNPM
pnpm add @avaya/neo-react
Step 2
Import the CSS styles at the root of your project using this command line.
import "@avaya/neo-react/avaya-neo-react.css";
NOTE: The Neo CSS Library is included with the Neo React Library. If you install the Neo React Library, you do not need to install or import from the CSS Library.
Other Frameworks (CSS)
Use these steps to install a version of Neo for frameworks other than React.
Step 1
Run one of the following command lines. The package contains both compiled and minified versions of the Neo .css file, as well as separate stylesheets for both icons and multilingual font support.
Option 1 - With NPM
npm install @avaya/neo
Option 2 - With Yarn
yarn add @avaya/neo
Option 3 - With PNPM
pnpm add @avaya/neo
Step 2
After installing neo-css to your project, add the compiled or compressed CSS to the head element of your HTML5 document.
<link rel="stylesheet" type="text/css" href="dist/css/neo/neo.min.css" />
NOTE: The Neo CSS Library includes design tokens, icons and CSS classes.
Usage Examples
To see more examples and recommendations, please visit our GitHub page or our Storybook .
Example Projects
There are several example projects that we host in our GitHub organization . You can also view any of the examples in the Interactive Playground of our Components by clicking the CodeSandbox link.