Getting Started

Minerva was designed to be extremely flexible and framework agnostic at it's core. This means there are many ways to use Minerva and the process varies from project to project. If you don't see a guide here that matches your project, reach out to web@ua.edu.

React based project

If you're using Minerva in a React based project like a site generated with NextJS, this guide is for you. There are two ways to install minerva, and usage varies slightly between them.

Manual installation

This is probably the easiest way to consume the package and works for a variety of environments.

1. Download the latest version of Minerva
2. Unpack the Minerva download into your project

You can now consume components by importing them like this:

import "path/to/minerva/minerva.css";
import { Button } from "path/to/minerva/esm";

Package installation

To install as an NPM package, you'll need to create an .npmrc file at the root of your project. You can download the configuration file here.

Now you should be able to install minerva as a package.

npm install @UA-Stratcom/minerva

Once the package is installed, you can consume components by importing them like this:

import "@UA-Stratcom/minerva/css";
import { Button } from "@UA-Stratcom/minerva";

Non-React based project

To use Minerva in a non-react project, simply extract the minerva download and copy the files you need into your project. These files are likely needed:

• minerva-baseline.css
• minerva.js
• fontawesome.css

If you want to use minerva components in a non-react project, the best way currently is to create your own implementation if your project architecture supports components, alternatively you can hard code the HTML patterns Minerva components generate. Using minerva components, you'll want to swap out minerva-baseline.css for minerva.css, or include the individual component stylesheets located in /css