@availity/element

Frontend design system built on top of @mui/material with @availity/design-tokens

This is a collection of reusable React components intended to be used across multiple projects. These components use @availity/design-tokens for styling and Material UI as the base.

Visit our documentation site and Storybook for more information on how to use the components.

Installation

NPM

npm install @availity/element

Yarn

yarn add @availity/element

Usage

The @availity/element package contains all of the components and hooks for the design system. We recommend using this package when you want to use multiple components.

To use the components in your project, you will need to import them first:

import { Button, ThemeProvider } from '@availity/element';

Make sure all of the components you use are inside the ThemeProvider component. We recommend placing it in your root index.{js|tsx} file.

import { ThemePovider } from '@availity/element';

const App = () => {
  return <ThemeProvider>{/* Application code. Most likely a router. */}</ThemeProvider>;
};

Automated Testing

We recommend using ids on the components you want to target with automated testing.