availity-element

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

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 for more information on how to use the components.

Installation

To install the library in your project, you can use either NPM or Yarn:

npm install @availity/element

OR

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 { ThemeProvider } from '@availity/element';

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

Development

This repo requires Node.js v22 or v24 and yarn v4. We recommend using fnm to automatically switch Node versions when you cd into the repo (the .nvmrc is set to 24).

Note: This is an ESM-only monorepo. All packages are published as ES modules.

We use yarn berry (aka yarn v4) to manage dependencies. The recommended way to activate yarn v4 is via Corepack, which ships with Node.js 16.10+:

corepack enable

Alternatively, you can install yarn v1 globally and yarn v4 will be activated when you run yarn install in this repo (the version is pinned in package.json#packageManager):

npm install -g yarn

Then install the dependencies:

yarn install

If you want to see the components in action as you develop then run the storybook server as you code

yarn start:storybook

Want to make sure you didn't break anything? Run the unit test script

yarn test

Contributing

Want to contribute? Read the Contributing Guide for setup instructions, commit format, and the full contributor workflow.

Further help

Visit the Nx Documentation to learn more.