Web
Version: 5.0.1Use Unifi Web
In order to use the Unifi Web library install the npm package: @nelnet/unifi-components-web
For Nelnet branded products, include the following Google font where appropriate in your project:
<link href="https://fonts.googleapis.com/css?family=Open+Sans:300,400,600&display=swap" rel="stylesheet" />
Next, you need to create two theming files, _theme-variables.scss and _theme-tokens.scss.
Your theming files should look like this:
After your theming files are created the last step is to update your main stylesheet (make sure it is linked in your html) to use your theming files (paths may be different depending on where your styles are located) and the base Unifi styles.
NOTE: only @use the Unifi styles once in your app, your theming files can be included here and in any other stylesheet where you need access to the Sass variables.
Customize Unifi
To learn more about custom theming and styling for Unifi Web, review the Unifi Web Theming documentation.
Component Documentation
Explore the available components for more detail on using Unifi components.