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
The currently recommended version of node to use when developing in this repo is: v20. We recommend using fnm to have your node version automatically changed when you cd into the repo.
We use yarn berry (aka yarn v3) to manage dependencies. Install yarn globally:
npm i -g yarn
This command will install yarn v1. When we run the next command then yarn v3 will be added.
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
Further help
Visit the Nx Documentation to learn more.
