### Install @availity/element using npm

Source: https://github.com/availity/element/blob/main/apps/element-storybook/src/bs4-migration/migration.mdx

Instructions to install the @availity/element library in your project using the npm package manager.

```sh
npm install @availity/element
```

--------------------------------

### Install @availity/element using yarn

Source: https://github.com/availity/element/blob/main/apps/element-storybook/src/bs4-migration/migration.mdx

Instructions to install the @availity/element library in your project using the Yarn package manager.

```sh
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-transitions package

Source: https://github.com/availity/element/blob/main/packages/transitions/README.md

Installs the @availity/mui-transitions package directly. This method requires @mui/material and @emotion/react as peer dependencies to be installed separately.

```bash
npm install @availity/mui-transitions
```

```bash
yarn add @availity/mui-transitions
```

--------------------------------

### Install and Run Storybook Development Server

Source: https://github.com/availity/element/blob/main/apps/element-storybook/README.md

Installs project dependencies using yarn and then starts the Storybook development server for local development and component preview.

```sh
yarn install
yarn start:storybook
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/block-ui/README.md

Installs the @availity/element package using npm, which is the recommended way to get the BlockUi component.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/block-ui/README.md

Installs the @availity/element package using yarn, which is the recommended way to get the BlockUi component.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element (Recommended)

Source: https://github.com/availity/element/blob/main/packages/event-tracker/README.md

Install the @availity/element package, which includes the EventTracker component, using either NPM or Yarn. This is the recommended installation method.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install Availity MUI File Selector via @availity/element

Source: https://github.com/availity/element/blob/main/packages/file-selector/README.md

Instructions for installing the `@availity/element` package, which is the recommended way to get the Availity MUI File Selector component. This method provides the component as part of the larger Availity Element design system.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-tooltip with NPM

Source: https://github.com/availity/element/blob/main/packages/tooltip/README.md

This command directly installs the `@availity/mui-tooltip` package using npm. Use this method if you only need the tooltip component and prefer not to install the entire `@availity/element` design system.

```bash
npm install @availity/mui-tooltip
```

--------------------------------

### Install @availity/element for EmptyState component

Source: https://github.com/availity/element/blob/main/packages/empty-state/README.md

Install the `@availity/element` package, which includes the `EmptyState` component. This is the recommended installation method for integrating with the Availity design system.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element package

Source: https://github.com/availity/element/blob/main/packages/transitions/README.md

Installs the @availity/element package, which includes the @availity/mui-transitions components, using either npm or yarn.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/utils/README.md

Installs the @availity/element package, which includes @availity/mui-utils, using npm. This is the recommended installation method.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/utils/README.md

Installs the @availity/element package, which includes @availity/mui-utils, using yarn. This is the recommended installation method.

```bash
yarn add @availity/element
```

--------------------------------

### Set Up Development Environment

Source: https://github.com/availity/element/blob/main/README.md

Steps to set up the development environment, including installing Yarn globally and then installing project dependencies using Yarn Berry.

```sh
npm i -g yarn
```

```sh
yarn install
```

--------------------------------

### Directly install @availity/mui-paper with Yarn

Source: https://github.com/availity/element/blob/main/packages/paper/README.md

Installs the `@availity/mui-paper` package directly using yarn. This provides a lightweight installation if only the Paper component is needed.

```bash
yarn add @availity/mui-paper
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/controlled-form/README.md

Instructions to install the `@availity/element` package using yarn, which is the recommended way to get `@availity/mui-controlled-form` components.

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install Availity MUI File Selector

Source: https://github.com/availity/element/blob/main/packages/file-selector/README.md

Instructions for directly installing the `@availity/mui-file-selector` package. This method requires manually installing peer dependencies such as `@mui/material` and `@emotion/react` if they are not already present in your project.

```bash
npm install @availity/mui-file-selector
```

```bash
yarn add @availity/mui-file-selector
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/layout/README.md

This command installs the @availity/element package using npm, which is the recommended way to get Availity MUI layout components. It includes all necessary dependencies for the layout components.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/element package

Source: https://github.com/availity/element/blob/main/packages/snackbar/README.md

Instructions to install the @availity/element package, which is the recommended way to get the MUI Snackbar component, using both npm and yarn.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/controlled-form/README.md

Instructions to install the `@availity/element` package using npm, which is the recommended way to get `@availity/mui-controlled-form` components.

```bash
npm install @availity/element
```

--------------------------------

### Directly install @availity/mui-empty-state package

Source: https://github.com/availity/element/blob/main/packages/empty-state/README.md

Install the `@availity/mui-empty-state` package directly. Note that this package has peer dependencies such as `@mui/material` and `@emotion/react`, which must be installed separately if not already present in your project.

```bash
npm install @availity/mui-empty-state
```

```bash
yarn add @availity/mui-empty-state
```

--------------------------------

### Install @availity/element package

Source: https://github.com/availity/element/blob/main/packages/toggle-button/README.md

Installs the @availity/element package, which is the recommended way to get the ToggleButton component. This package includes the component and its dependencies.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/nx-generator/src/generators/nx-generator/files/README.md

Installs the `@availity/element` package using Yarn, providing the recommended way to include the `<%= componentName %>` component. This approach streamlines project setup.

```bash
yarn add @availity/element
```

--------------------------------

### Install Availity MUI Tabs via @availity/element

Source: https://github.com/availity/element/blob/main/packages/tabs/README.md

These commands install the `@availity/element` package, which includes the `@availity/mui-tabs` component, using either npm or Yarn. This is the recommended installation method.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-tooltip with Yarn

Source: https://github.com/availity/element/blob/main/packages/tooltip/README.md

This command directly installs the `@availity/mui-tooltip` package using yarn. It's an alternative installation method for projects that only require the tooltip component without the full `@availity/element` design system.

```bash
yarn add @availity/mui-tooltip
```

--------------------------------

### Directly Install @availity/mui-pagination Component

Source: https://github.com/availity/element/blob/main/packages/pagination/README.md

Installs the @availity/mui-pagination package directly. Note that this package has peer dependencies on @mui/material and @emotion/react, which should be installed separately if not already present.

```bash
npm install @availity/mui-pagination
```

```bash
yarn add @availity/mui-pagination
```

--------------------------------

### Directly install @availity/mui-stepper via NPM or Yarn

Source: https://github.com/availity/element/blob/main/packages/stepper/README.md

Instructions for directly installing the @availity/mui-stepper package. Users should ensure `@mui/material` and `@emotion/react` are also installed as peer dependencies.

```bash
npm install @availity/mui-stepper
```

```bash
yarn add @availity/mui-stepper
```

--------------------------------

### Importing Form Component Examples

Source: https://github.com/availity/element/blob/main/apps/element-storybook/src/FormComponents.mdx

Imports various React form component examples from a local file, 'FormComponentExamples', for demonstration purposes within a Storybook environment. These imports enable the rendering of interactive examples for different form components such as Autocomplete, Datepicker, TextField, Checkbox, and Radio.

```JavaScript
import { Markdown } from '@storybook/blocks';
import { Meta, Source } from '@storybook/blocks';
import {
  AutocompleteExample,
  AsyncAutocompleteExample,
  CodesAutocompleteExample,
  DatepickerExample,
  TextFieldExample,
  CheckboxExample,
  FieldHelpIconExample,
  FormControlExample,
  FormControlLabelExample,
  FormGroupExample,
  FormHelperTextExample,
  FormLabelExample,
  InputExample,
  RadioExample,
  RadioGroupExample,
  RequiredKeyExample,
  SelectExample,
  SwitchExample
} from './FormComponentExamples';
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/nx-generator/src/generators/nx-generator/files/README.md

Installs the `@availity/element` package using npm, which is the recommended way to get the `<%= componentName %>` component. This method simplifies dependency management.

```bash
npm install @availity/element
```

--------------------------------

### Directly install @availity/mui-tree package

Source: https://github.com/availity/element/blob/main/packages/tree/README.md

Installs the @availity/mui-tree package directly. This approach requires manual installation of peer dependencies such as @mui/material, @emotion/react, and @availity/mui-icon if they are not already present in your project.

```bash
npm install @availity/mui-tree
```

```bash
yarn add @availity/mui-tree
```

--------------------------------

### Import Stepper component from @availity/element

Source: https://github.com/availity/element/blob/main/packages/stepper/README.md

Example of importing the Stepper component when following the recommended installation path through the @availity/element package.

```tsx
import { Stepper } from '@availity/element';
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/disclaimer/README.md

Installs the @availity/element package using npm, which includes the MUI Disclaimer component. This is the recommended installation method.

```bash
npm install @availity/element
```

--------------------------------

### Storybook MDX Documentation Page Configuration

Source: https://github.com/availity/element/blob/main/packages/block-ui/introduction.mdx

This snippet illustrates the standard setup for an MDX-based Storybook documentation page. It includes importing core Storybook modules for blocks and docs, along with raw Markdown files for content. It also shows how to define page metadata and render Markdown content within the Storybook environment.

```MDX
import { Markdown } from '@storybook/blocks';
import { Meta } from '@storybook/addon-docs';
import ReadMe from './README.md?raw';
import CHANGELOG from './CHANGELOG.md?raw';

<Meta title="Components/BlockUi/Introduction" />

<Markdown>{ReadMe}</Markdown>

<Markdown>{CHANGELOG}</Markdown>
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/backdrop/README.md

Installs the @availity/element package, which includes the @availity/mui-backdrop component, using npm.

```bash
npm install @availity/element
```

--------------------------------

### Storybook MDX Documentation Page Setup

Source: https://github.com/availity/element/blob/main/packages/chip/introduction.mdx

This code snippet illustrates the complete setup for a Storybook MDX documentation page. It includes JavaScript import statements for Storybook's documentation blocks and raw markdown files, followed by MDX/JSX tags to define the page title and render the imported markdown content.

```mdx
import { Markdown } from '@storybook/blocks';
import { Meta } from '@storybook/addon-docs';
import ReadMe from './README.md?raw';
import CHANGELOG from './CHANGELOG.md?raw';

<Meta title="Components/Chip/Introduction" />

<Markdown>{ReadMe}</Markdown>

<Markdown>{CHANGELOG}</Markdown>
```

--------------------------------

### Directly Install @availity/mui-link

Source: https://github.com/availity/element/blob/main/packages/link/README.md

Install the @availity/mui-link package directly. Note that this method requires manually installing peer dependencies such as `@mui/material`, `@emotion/react`, and `@mui/system` if they are not already present in your application.

```bash
npm install @availity/mui-link
```

```bash
yarn add @availity/mui-link
```

--------------------------------

### Install @availity/element for Availity MUI Authorize component

Source: https://github.com/availity/element/blob/main/packages/authorize/README.md

These commands install the `@availity/element` package, which is the recommended way to integrate the `@availity/mui-authorize` component. It provides all necessary dependencies and components for the Availity design system.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-authorize package

Source: https://github.com/availity/element/blob/main/packages/authorize/README.md

These commands directly install the `@availity/mui-authorize` package. When using this method, ensure that required peer dependencies such as `@mui/material` and `@emotion/react` are already installed in your project.

```bash
npm install @availity/mui-authorize
```

```bash
yarn add @availity/mui-authorize
```

--------------------------------

### Install @availity/element Package

Source: https://github.com/availity/element/blob/main/packages/element/README.md

Commands to install the @availity/element design system package using either npm or yarn.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-typography with NPM or Yarn

Source: https://github.com/availity/element/blob/main/packages/typography/README.md

Instructions to directly install the @availity/mui-typography package. Note that @mui/material and @emotion/react are peer dependencies and should be installed if not already present in your project.

```bash
npm install @availity/mui-typography
```

```bash
yarn add @availity/mui-typography
```

--------------------------------

### Directly Install Availity MUI Tabs

Source: https://github.com/availity/element/blob/main/packages/tabs/README.md

These commands directly install the `@availity/mui-tabs` package using either npm or Yarn. Remember to also install its peer dependencies: `@mui/material` and `@emotion/react`.

```bash
npm install @availity/mui-tabs
```

```bash
yarn add @availity/mui-tabs
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/tooltip/README.md

This command installs the `@availity/element` package using yarn. It's the recommended method for integrating the `@availity/mui-tooltip` component, as it comes bundled within this comprehensive design system package.

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-alert

Source: https://github.com/availity/element/blob/main/packages/alert/README.md

Instructions for directly installing the `@availity/mui-alert` package using npm or yarn, if you prefer not to use the full `@availity/element` design system.

```bash
npm install @availity/mui-alert
```

```bash
yarn add @availity/mui-alert
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/disclaimer/README.md

Installs the @availity/element package using yarn, which includes the MUI Disclaimer component. This is the recommended installation method.

```bash
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-spaces package

Source: https://github.com/availity/element/blob/main/packages/spaces/README.md

Directly installs the @availity/mui-spaces package using either npm or yarn. This package has several peer dependencies that must also be installed in your project.

```bash
npm install @availity/mui-spaces
```

```bash
yarn add @availity/mui-spaces
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/tooltip/README.md

This command installs the `@availity/element` package using npm. The `@availity/mui-tooltip` component is included as part of this larger design system package, providing a recommended way to integrate it into your project.

```bash
npm install @availity/element
```

--------------------------------

### Directly install @availity/mui-backdrop with NPM

Source: https://github.com/availity/element/blob/main/packages/backdrop/README.md

Installs the @availity/mui-backdrop package directly using npm. Note that @mui/material and @emotion/react are peer dependencies and must be installed separately.

```bash
npm install @availity/mui-backdrop
```

--------------------------------

### Install @availity/element (Recommended)

Source: https://github.com/availity/element/blob/main/packages/link/README.md

Install the @availity/element package, which is the recommended way to use the Availity MUI Link component. This method simplifies dependency management by including necessary peer dependencies.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-favorites

Source: https://github.com/availity/element/blob/main/packages/favorites/README.md

These snippets show how to directly install the `@availity/mui-favorites` package using both npm and Yarn. Ensure that peer dependencies like `@mui/material` and `@emotion/react` are also installed.

```bash
npm install @availity/mui-favorites
```

```bash
yarn add @availity/mui-favorites
```

--------------------------------

### Install @availity/mui-toggle-button directly

Source: https://github.com/availity/element/blob/main/packages/toggle-button/README.md

Installs the @availity/mui-toggle-button package directly. Note that this package has peer dependencies like @mui/material and @emotion/react that must be installed separately if not already present in your project.

```bash
npm install @availity/mui-toggle-button
```

```bash
yarn add @availity/mui-toggle-button
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/menu/README.md

Recommended method to install the @availity/element package, which includes the MUI Menu component, using npm.

```bash
npm install @availity/element
```

--------------------------------

### Directly install @availity/mui-backdrop with Yarn

Source: https://github.com/availity/element/blob/main/packages/backdrop/README.md

Installs the @availity/mui-backdrop package directly using yarn. Note that @mui/material and @emotion/react are peer dependencies and must be installed separately.

```bash
yarn add @availity/mui-backdrop
```

--------------------------------

### Install @availity/element for Availity MUI Progress

Source: https://github.com/availity/element/blob/main/packages/progress/README.md

This snippet provides the recommended methods to install the @availity/element package, which includes the Availity MUI Progress components. Both npm and yarn commands are provided for convenience.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element for Pagination Component

Source: https://github.com/availity/element/blob/main/packages/pagination/README.md

Installs the @availity/element package, which is the recommended way to include the Availity MUI Pagination component in your project.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element using NPM

Source: https://github.com/availity/element/blob/main/packages/popover/README.md

Installs the @availity/element package, which includes the Availity MUI Popover component, using npm. This is the recommended installation method.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/mui-dialog and @availity/element

Source: https://github.com/availity/element/blob/main/packages/dialog/README.md

Instructions for installing the @availity/mui-dialog component, either directly or as part of the @availity/element package, using npm or Yarn. Note that direct import requires @mui/material and @emotion/react as peer dependencies.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

```bash
npm install @availity/mui-dialog
```

```bash
yarn add @availity/mui-dialog
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/badge/README.md

Installs the @availity/element package using Yarn. This package includes the @availity/mui-badge component, offering an alternative installation method.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element using Yarn

Source: https://github.com/availity/element/blob/main/packages/popover/README.md

Installs the @availity/element package, which includes the Availity MUI Popover component, using yarn. This is the recommended installation method.

```bash
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-feedback using NPM

Source: https://github.com/availity/element/blob/main/packages/feedback/README.md

This command directly installs the @availity/mui-feedback package using npm. Ensure that peer dependencies like @mui/material and @emotion/react are also installed in your project.

```bash
npm install @availity/mui-feedback
```

--------------------------------

### Install @availity/element for Favorites Component

Source: https://github.com/availity/element/blob/main/packages/favorites/README.md

These snippets show how to install the `@availity/element` package using both npm and Yarn, which is the recommended method for integrating the Favorites component.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/backdrop/README.md

Installs the @availity/element package, which includes the @availity/mui-backdrop component, using yarn.

```bash
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-layout with Yarn

Source: https://github.com/availity/element/blob/main/packages/layout/README.md

This command directly installs the @availity/mui-layout package using Yarn. When using this method, ensure that peer dependencies such as @mui/material and @emotion/react are already installed in your project.

```bash
yarn add @availity/mui-layout
```

--------------------------------

### Install @availity/mui-autocomplete directly via Yarn

Source: https://github.com/availity/element/blob/main/packages/autocomplete/README.md

Installs the `@availity/mui-autocomplete` package directly using yarn. This method requires manual installation of peer dependencies such as `@mui/material`, `@emotion/react`, `@availity/mui-form-utils`, and `@availity/mui-textfield`.

```bash
yarn add @availity/mui-autocomplete
```

--------------------------------

### Install @availity/mui-tree via @availity/element

Source: https://github.com/availity/element/blob/main/packages/tree/README.md

Installs the @availity/element package, which is the recommended way to include the @availity/mui-tree component in your project. This method simplifies dependency management.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/mui-autocomplete directly via NPM

Source: https://github.com/availity/element/blob/main/packages/autocomplete/README.md

Installs the `@availity/mui-autocomplete` package directly using npm. This method requires manual installation of peer dependencies such as `@mui/material`, `@emotion/react`, `@availity/mui-form-utils`, and `@availity/mui-textfield`.

```bash
npm install @availity/mui-autocomplete
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/menu/README.md

Recommended method to install the @availity/element package, which includes the MUI Menu component, using yarn.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element via NPM or Yarn

Source: https://github.com/availity/element/blob/main/packages/stepper/README.md

Instructions for installing the @availity/element package, which includes the Stepper component, using both npm and yarn package managers. This is the recommended installation method.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element with NPM or Yarn

Source: https://github.com/availity/element/blob/main/packages/typography/README.md

Instructions to install the @availity/element package, which is the recommended way to include @availity/mui-typography.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-form-utils Package

Source: https://github.com/availity/element/blob/main/packages/form-utils/README.md

Install the `@availity/mui-form-utils` package directly using npm or Yarn. This method requires you to manually install peer dependencies such as `@availity/mui-button`, `@availity/mui-icon`, `@mui/material`, and `@emotion/react`.

```bash
npm install @availity/mui-form-utils
```

```bash
yarn add @availity/mui-form-utils
```

--------------------------------

### Install @availity/mui-badge directly with Yarn

Source: https://github.com/availity/element/blob/main/packages/badge/README.md

Installs the @availity/mui-badge package directly using Yarn. This provides a direct installation path for the badge component, bypassing the @availity/element package.

```bash
yarn add @availity/mui-badge
```

--------------------------------

### Wrap application with ThemeProvider

Source: https://github.com/availity/element/blob/main/apps/element-storybook/src/bs4-migration/migration.mdx

Illustrates the recommended way to wrap your entire application with the ThemeProvider component. This ensures all Availity Element components have access to the theme and should typically be placed in your root index file.

```javascript
import { ThemeProvider } from '@availity/element';

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

--------------------------------

### Install @availity/element (Recommended)

Source: https://github.com/availity/element/blob/main/packages/icon/README.md

Installs the recommended @availity/element package, which includes the MUI Icon component, using either npm or yarn package managers.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Run Storybook Development Server

Source: https://github.com/availity/element/blob/main/README.md

Command to start the Storybook server, allowing developers to see components in action during development.

```sh
yarn start:storybook
```

--------------------------------

### Directly Install @availity/mui-event-tracker

Source: https://github.com/availity/element/blob/main/packages/event-tracker/README.md

Directly install the @availity/mui-event-tracker package using NPM or Yarn. Note that this package has peer dependencies like @mui/material and @emotion/react, which should be installed if not already present in your project.

```bash
npm install @availity/mui-event-tracker
```

```bash
yarn add @availity/mui-event-tracker
```

--------------------------------

### Directly install @availity/mui-feedback using Yarn

Source: https://github.com/availity/element/blob/main/packages/feedback/README.md

This command directly installs the @availity/mui-feedback package using yarn. Remember to add @mui/material and @emotion/react as peer dependencies if they are not already present in your project.

```bash
yarn add @availity/mui-feedback
```

--------------------------------

### Install @availity/mui-block-ui directly with Yarn

Source: https://github.com/availity/element/blob/main/packages/block-ui/README.md

Installs the @availity/mui-block-ui package directly using yarn. Note that this package has peer dependencies like @mui/material and @emotion/react that should be installed separately if not already present.

```bash
yarn add @availity/mui-block-ui
```

--------------------------------

### Configure Storybook Component Introduction Page

Source: https://github.com/availity/element/blob/main/packages/nx-generator/src/generators/nx-generator/files/introduction.stories.mdx

This snippet demonstrates how to set up an introduction page for a component in Storybook. It imports `Markdown` for rendering Markdown content and `Meta` for defining page metadata. It then loads raw content from `README.md` and `CHANGELOG.md` files and renders them using the `Markdown` component.

```JavaScript
import { Markdown } from '@storybook/blocks';
import { Meta } from '@storybook/addon-docs';
import ReadMe from './README.md?raw';
import CHANGELOG from './CHANGELOG.md?raw';

<Meta title="Components/<%= componentName %>/Introduction" />

<Markdown>{ReadMe}</Markdown>

<Markdown>{CHANGELOG}</Markdown>
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/page-header/README.md

Installs the @availity/element package using yarn, which includes the PageHeader component.

```bash
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-disclaimer via NPM

Source: https://github.com/availity/element/blob/main/packages/disclaimer/README.md

Installs the @availity/mui-disclaimer package directly using npm. This method requires peer dependencies such as @mui/material and @emotion/react to be installed separately in your project.

```bash
npm install @availity/mui-disclaimer
```

--------------------------------

### Storybook Documentation Page Configuration

Source: https://github.com/availity/element/blob/main/packages/file-selector/introduction.mdx

This snippet demonstrates how to set up a Storybook documentation page using `@storybook/blocks` and `@storybook/addon-docs`, importing Markdown files for content display.

```typescript
import { Markdown } from '@storybook/blocks';
import { Meta } from '@storybook/addon-docs';
import ReadMe from './README.md?raw';
import CHANGELOG from './CHANGELOG.md?raw';

<Meta title="Components/File Selector/Introduction" />

<Markdown>{ReadMe}</Markdown>

<Markdown>{CHANGELOG}</Markdown>
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/chip/README.md

Installs the @availity/element package using npm, which is the recommended way to include the Availity MUI Chip component.

```bash
npm install @availity/element
```

--------------------------------

### Directly install @availity/<%= packageName %> with Yarn

Source: https://github.com/availity/element/blob/main/packages/nx-generator/src/generators/nx-generator/files/README.md

Installs the `@availity/<%= packageName %>` component directly using Yarn. Ensure that necessary peer dependencies such as `@mui/material` and `@emotion/react` are already installed in your project.

```bash
yarn add @availity/<%= packageName %>
```

--------------------------------

### Install @availity/mui-table directly via Yarn

Source: https://github.com/availity/element/blob/main/packages/table/README.md

Installs the @availity/mui-table package directly using yarn. This package has peer dependencies like @mui/material and @emotion/react, which should be installed separately if not already present.

```bash
yarn add @availity/mui-table
```

--------------------------------

### Install @availity/mui-block-ui directly with NPM

Source: https://github.com/availity/element/blob/main/packages/block-ui/README.md

Installs the @availity/mui-block-ui package directly using npm. Note that this package has peer dependencies like @mui/material and @emotion/react that should be installed separately if not already present.

```bash
npm install @availity/mui-block-ui
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/table/README.md

Installs the @availity/element package using npm, which includes the MUI Table component.

```bash
npm install @availity/element
```

--------------------------------

### Install Availity MUI Divider Component

Source: https://github.com/availity/element/blob/main/packages/divider/README.md

Instructions for installing the @availity/mui-divider component, either through the recommended @availity/element package or by direct import, using both npm and yarn package managers.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

```bash
npm install @availity/mui-divider
```

```bash
yarn add @availity/mui-divider
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/checkbox/README.md

This command installs the `@availity/element` package using Yarn. It is the recommended approach for including the Availity MUI Checkbox component, providing a streamlined installation process.

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-progress Package

Source: https://github.com/availity/element/blob/main/packages/progress/README.md

This snippet shows how to directly install the @availity/mui-progress package using npm or yarn. Users should ensure that peer dependencies like @mui/material and @emotion/react are already installed in their project.

```bash
npm install @availity/mui-progress
```

```bash
yarn add @availity/mui-progress
```

--------------------------------

### Import EventTracker from @availity/element

Source: https://github.com/availity/element/blob/main/packages/event-tracker/README.md

Example of how to import the EventTracker component when it is installed as part of the @availity/element package.

```tsx
import { EventTracker } from '@availity/element';
```

--------------------------------

### Install @availity/mui-chip directly via Yarn

Source: https://github.com/availity/element/blob/main/packages/chip/README.md

Installs the @availity/mui-chip package directly using yarn. This method requires peer dependencies like @mui/material and @emotion/react to be installed separately.

```bash
yarn add @availity/mui-chip
```

--------------------------------

### Directly install @availity/mui-menu via Yarn

Source: https://github.com/availity/element/blob/main/packages/menu/README.md

Install the @availity/mui-menu package directly using yarn. Note that this package has peer dependencies like @mui/material and @emotion/react, which should be installed separately if not already present.

```bash
yarn add @availity/mui-menu
```

--------------------------------

### Directly Install @availity/mui-datepicker via Yarn

Source: https://github.com/availity/element/blob/main/packages/datepicker/README.md

This command directly installs the `@availity/mui-datepicker` package using yarn. Note that this package has peer dependencies, so `@mui/material` and `@emotion/react` must also be installed in your project if they are not already present.

```bash
yarn add @availity/mui-datepicker
```

--------------------------------

### Directly install @availity/mui-avatar package

Source: https://github.com/availity/element/blob/main/packages/avatar/README.md

Directly installs the @availity/mui-avatar package using either npm or yarn.

```bash
npm install @availity/mui-avatar
```

```bash
yarn add @availity/mui-avatar
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/chip/README.md

Installs the @availity/element package using yarn, which is the recommended way to include the Availity MUI Chip component.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element using NPM

Source: https://github.com/availity/element/blob/main/packages/feedback/README.md

This command installs the @availity/element package using npm, which is the recommended way to include the Availity MUI Feedback component in your project.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/element for Availity MUI Button

Source: https://github.com/availity/element/blob/main/packages/button/README.md

Recommended method to install the @availity/element package, which includes the Availity MUI button component, using either NPM or Yarn.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/autocomplete/README.md

Installs the `@availity/element` package using npm. This is the recommended method for importing the Autocomplete component, providing access to the entire Availity Element design system.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/mui-utils directly via Yarn

Source: https://github.com/availity/element/blob/main/packages/utils/README.md

Installs the @availity/mui-utils package directly using yarn. Note that this package has peer dependencies like @mui/material and @emotion/react, which must be installed separately if not already present.

```bash
yarn add @availity/mui-utils
```

--------------------------------

### Import Availity MUI Divider Component for Usage

Source: https://github.com/availity/element/blob/main/packages/divider/README.md

Examples demonstrating how to import the Divider component into a TypeScript/TSX project, either when installed as part of @availity/element or when directly imported from @availity/mui-divider.

```tsx
import { Divider } from '@availity/element';
```

```tsx
import { Divider } from '@availity/mui-divider';
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/page-header/README.md

Installs the @availity/element package using npm, which includes the PageHeader component.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/element using NPM

Source: https://github.com/availity/element/blob/main/packages/popper/README.md

Installs the recommended @availity/element package, which includes the Availity MUI Popper component, using the npm package manager.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/element package

Source: https://github.com/availity/element/blob/main/packages/spaces/README.md

Installs the @availity/element package, which includes the MUI Spaces component, using either npm or yarn.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Integrate DateRangePicker with React Hook Form and Yup

Source: https://github.com/availity/element/blob/main/packages/datepicker/DateRangePickerDocs.md

This example demonstrates how to integrate the `DateRangePicker` component with `react-hook-form` and the `yup` validation schema. It shows form setup, controller usage for date inputs, real-time validation with `mode: 'onChange'`, and handling form submission, including displaying validation errors.

```tsx
import { useForm, Controller } from 'react-hook-form';
import { yupResolver } from '@hookform/resolvers/yup';
import * as yup from 'yup';
import { Dayjs } from 'dayjs';
import { useEffect } from 'react';

import { DateRangePicker } from './DateRangePicker';

interface DateRangeForm {
  startDate: Dayjs | null;
  endDate: Dayjs | null;
}

const dateRangeSchema = yup.object().shape({
  startDate: yup.mixed<Dayjs | null>().nullable().required('Start date is required'),

  endDate: yup
    .mixed<Dayjs | null>()
    .nullable()
    .required('End date is required')
    .test('is-after-start', 'End date must be after start date', function (endDate, context) {
      const { startDate } = context.parent;

      if (!startDate || !endDate) {
        return true;
      }

      return endDate.isAfter(startDate) || endDate.isSame(startDate);
    }),
});

const DateRangeForm = () => {
  const {
    control,
    handleSubmit,
    formState: { errors },
    watch,
  } = useForm<DateRangeForm>({
    resolver: yupResolver(dateRangeSchema),
    defaultValues: {
      startDate: null,
      endDate: null,
    },
    mode: 'onChange',
  });

  const startDate = watch('startDate');
  const endDate = watch('endDate');

  useEffect(() => {
    if (startDate && endDate) {
      console.log('Date range changed:', { startDate, endDate });
    }
  }, [startDate, endDate]);

  const onSubmit = (data: DateRangeForm) => {
    console.log('Form submitted:', data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="startDate"
        control={control}
        render={({ field: { onChange, value } }) => (
          <Controller
            name="endDate"
            control={control}
            render={({ field: { onChange: onEndChange, value: endValue } }) => (
              <DateRangePicker
                startDate={value}
                endDate={endValue}
                onStartDateChange={onChange}
                onEndDateChange={onEndChange}
                startFieldProps={{
                  helperText: errors.startDate?.message,
                  error: Boolean(errors.startDate),
                  label: 'Start Date',
                  fullWidth: true,
                }}
                endFieldProps={{
                  helperText: errors.endDate?.message,
                  error: Boolean(errors.endDate),
                  label: 'End Date',
                  fullWidth: true,
                }}
              />
            )}
          />
        )}
      />
      <button type="submit" style={{ marginTop: '16px' }}>
        Submit
      </button>
    </form>
  );
};
```

--------------------------------

### Install @availity/element for MUI Alert

Source: https://github.com/availity/element/blob/main/packages/alert/README.md

Instructions for installing the `@availity/element` package using npm or yarn, which includes the MUI Alert component as part of the design system.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-layout with NPM

Source: https://github.com/availity/element/blob/main/packages/layout/README.md

This command directly installs the @availity/mui-layout package using npm. Note that this method requires manually adding peer dependencies like @mui/material and @emotion/react if they are not already present in your project.

```bash
npm install @availity/mui-layout
```

--------------------------------

### Install @availity/mui-chip directly via NPM

Source: https://github.com/availity/element/blob/main/packages/chip/README.md

Installs the @availity/mui-chip package directly using npm. This method requires peer dependencies like @mui/material and @emotion/react to be installed separately.

```bash
npm install @availity/mui-chip
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/textfield/README.md

This command installs the @availity/element package using npm. This is the recommended method for integrating the @availity/mui-textfield component, as it bundles the component and manages its dependencies within the Availity design system.

```bash
npm install @availity/element
```

--------------------------------

### Directly Install Availity MUI Button Component

Source: https://github.com/availity/element/blob/main/packages/button/README.md

Alternative method to directly install the @availity/mui-button package using either NPM or Yarn.

```bash
npm install @availity/mui-button
```

```bash
yarn add @availity/mui-button
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/table/README.md

Installs the @availity/element package using yarn, which includes the MUI Table component.

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-datepicker via NPM

Source: https://github.com/availity/element/blob/main/packages/datepicker/README.md

This command directly installs the `@availity/mui-datepicker` package using npm. Note that this package has peer dependencies, so `@mui/material` and `@emotion/react` must also be installed in your project if they are not already present.

```bash
npm install @availity/mui-datepicker
```

--------------------------------

### Directly install @availity/mui-textfield with NPM

Source: https://github.com/availity/element/blob/main/packages/textfield/README.md

This command directly installs the @availity/mui-textfield package using npm. When using this method, ensure that peer dependencies like @mui/material and @emotion/react are already installed in your project to avoid runtime issues.

```bash
npm install @availity/mui-textfield
```

--------------------------------

### Directly install @availity/mui-menu via NPM

Source: https://github.com/availity/element/blob/main/packages/menu/README.md

Install the @availity/mui-menu package directly using npm. Note that this package has peer dependencies like @mui/material and @emotion/react, which should be installed separately if not already present.

```bash
npm install @availity/mui-menu
```

--------------------------------

### Install @availity/mui-utils directly via NPM

Source: https://github.com/availity/element/blob/main/packages/utils/README.md

Installs the @availity/mui-utils package directly using npm. Note that this package has peer dependencies like @mui/material and @emotion/react, which must be installed separately if not already present.

```bash
npm install @availity/mui-utils
```

--------------------------------

### Directly install @availity/mui-textfield with Yarn

Source: https://github.com/availity/element/blob/main/packages/textfield/README.md

This command directly installs the @availity/mui-textfield package using Yarn. It's important to verify that required peer dependencies such as @mui/material and @emotion/react are already present in your project when using this direct installation method.

```bash
yarn add @availity/mui-textfield
```

--------------------------------

### Directly install @availity/mui-paper with NPM

Source: https://github.com/availity/element/blob/main/packages/paper/README.md

Installs the `@availity/mui-paper` package directly using npm. This approach is suitable for projects that only require the Paper component without the full `@availity/element` suite.

```bash
npm install @availity/mui-paper
```

--------------------------------

### Install @availity/element for MUI Form Utilities

Source: https://github.com/availity/element/blob/main/packages/form-utils/README.md

Install the `@availity/element` package using either npm or Yarn. This is the recommended method for integrating `@availity/mui-form-utils` as it includes other necessary Availity components.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-popper using Yarn

Source: https://github.com/availity/element/blob/main/packages/popper/README.md

Installs the @availity/mui-popper package directly using Yarn. Note that this package has peer dependencies like @mui/material and @emotion/react, which should be installed separately if not already present in your project.

```bash
yarn add @availity/mui-popper
```

--------------------------------

### Install @availity/element for MUI List component

Source: https://github.com/availity/element/blob/main/packages/list/README.md

Installs the @availity/element package, which includes the @availity/mui-list component, using both npm and yarn.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/autocomplete/README.md

Installs the `@availity/element` package using yarn. This is the recommended method for importing the Autocomplete component, providing access to the entire Availity Element design system.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/layout/README.md

This command installs the @availity/element package using Yarn, providing the recommended method for integrating Availity MUI layout components. It ensures all required dependencies are included.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/modal/README.md

Installs the @availity/element package using npm, which is the recommended way to import the Availity MUI Modal component.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/element using Yarn

Source: https://github.com/availity/element/blob/main/packages/popper/README.md

Installs the recommended @availity/element package, which includes the Availity MUI Popper component, using the Yarn package manager.

```bash
yarn add @availity/element
```

--------------------------------

### Install Availity Element Library

Source: https://github.com/availity/element/blob/main/README.md

Instructions on how to add the `@availity/element` package to your project using either npm or yarn.

```sh
npm install @availity/element
```

```sh
yarn add @availity/element
```

--------------------------------

### Install @availity/theme with NPM

Source: https://github.com/availity/element/blob/main/packages/theme/README.md

This command installs the @availity/theme package using the Node Package Manager (NPM), making it available for use in your project.

```bash
npm install @availity/theme
```

--------------------------------

### Install @availity/element using Yarn

Source: https://github.com/availity/element/blob/main/packages/feedback/README.md

This command installs the @availity/element package using yarn, providing the Availity MUI Feedback component as part of the element design system.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element via NPM

Source: https://github.com/availity/element/blob/main/packages/card/README.md

Installs the @availity/element package using npm, which includes the Availity MUI Card component.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/mui-icon Directly

Source: https://github.com/availity/element/blob/main/packages/icon/README.md

Installs the @availity/mui-icon package directly, using either npm or yarn package managers, for standalone usage.

```bash
npm install @availity/mui-icon
```

```bash
yarn add @availity/mui-icon
```

--------------------------------

### Directly Install @availity/mui-breadcrumbs with Yarn

Source: https://github.com/availity/element/blob/main/packages/breadcrumbs/README.md

Installs the `@availity/mui-breadcrumbs` package directly using yarn. Ensure `@mui/material` and `@emotion/react` are already installed as peer dependencies.

```bash
yarn add @availity/mui-breadcrumbs
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/paper/README.md

Installs the `@availity/element` package using npm. This package includes the `@availity/mui-paper` component, integrating it into the Availity design system.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/design-tokens using NPM

Source: https://github.com/availity/element/blob/main/packages/design-tokens/README.md

This command installs the @availity/design-tokens package using the Node Package Manager (NPM). It adds the package to your project's dependencies, making the design tokens available for use.

```bash
npm install @availity/design-tokens
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/card/README.md

Installs the @availity/element package using yarn, which includes the Availity MUI Card component.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element via Yarn

Source: https://github.com/availity/element/blob/main/packages/modal/README.md

Installs the @availity/element package using yarn, which is the recommended way to import the Availity MUI Modal component.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element package

Source: https://github.com/availity/element/blob/main/packages/avatar/README.md

Installs the @availity/element package, which includes the Availity MUI Avatar component, using either npm or yarn.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly Install @availity/mui-breadcrumbs with NPM

Source: https://github.com/availity/element/blob/main/packages/breadcrumbs/README.md

Installs the `@availity/mui-breadcrumbs` package directly using npm. This method requires `@mui/material` and `@emotion/react` as peer dependencies to be installed separately.

```bash
npm install @availity/mui-breadcrumbs
```

--------------------------------

### Storybook Docs Page Setup with Markdown

Source: https://github.com/availity/element/blob/main/packages/spaces/introduction.mdx

This snippet illustrates how to set up a Storybook documentation page using JSX. It imports necessary components from @storybook/blocks and @storybook/addon-docs, defines the page's metadata including its title, and embeds raw Markdown content from external files like README.md and CHANGELOG.md for display.

```jsx
import { Markdown } from '@storybook/blocks';
import { Meta } from '@storybook/addon-docs';
import ReadMe from './README.md?raw';
import CHANGELOG from './CHANGELOG.md?raw';

<Meta title="Components/Spaces/Introduction" />

<Markdown>{ReadMe}</Markdown>

<Markdown>{CHANGELOG}</Markdown>
```

--------------------------------

### Directly install @availity/mui-controlled-form via Yarn

Source: https://github.com/availity/element/blob/main/packages/controlled-form/README.md

Instructions to directly install the `@availity/mui-controlled-form` package using yarn. Note that peer dependencies like `@mui/material` and `@emotion/react` might also be required.

```bash
yarn add @availity/mui-controlled-form
```

--------------------------------

### Install @availity/mui-page-header directly with Yarn

Source: https://github.com/availity/element/blob/main/packages/page-header/README.md

Installs the @availity/mui-page-header package directly using yarn. This package has peer dependencies on @mui/material and @emotion/react.

```bash
yarn add @availity/mui-page-header
```

--------------------------------

### Storybook Documentation Page Configuration

Source: https://github.com/availity/element/blob/main/packages/theme-provider/introduction.mdx

This snippet demonstrates how to configure a Storybook documentation page using `@storybook/addon-docs` and `@storybook/blocks`. It imports raw Markdown files for the component's README and CHANGELOG, and sets the page title.

```JavaScript
import { Markdown } from '@storybook/blocks';
import { Meta } from '@storybook/addon-docs';
import ReadMe from './README.md?raw';
import CHANGELOG from './CHANGELOG.md?raw';

<Meta title="Design System/ThemeProvider/Introduction" />

<Markdown>{ReadMe}</Markdown>

<Markdown>{CHANGELOG}</Markdown>
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/textfield/README.md

This command installs the @availity/element package using Yarn. It is the recommended approach for including the @availity/mui-textfield component, ensuring proper dependency management and integration with the Availity design system.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element with NPM

Source: https://github.com/availity/element/blob/main/packages/badge/README.md

Installs the @availity/element package using npm. This package includes the @availity/mui-badge component, providing a recommended way to integrate it into your project.

```bash
npm install @availity/element
```

--------------------------------

### Install @availity/element with Yarn

Source: https://github.com/availity/element/blob/main/packages/paper/README.md

Installs the `@availity/element` package using yarn. This method provides the `@availity/mui-paper` component as part of the broader Availity element library.

```bash
yarn add @availity/element
```

--------------------------------

### Install @availity/element for Accordion component

Source: https://github.com/availity/element/blob/main/packages/accordion/README.md

Installs the @availity/element package using either npm or yarn, which includes the Availity MUI Accordion component.

```bash
npm install @availity/element
```

```bash
yarn add @availity/element
```

--------------------------------

### Directly install @availity/mui-list component

Source: https://github.com/availity/element/blob/main/packages/list/README.md

Installs the @availity/mui-list package directly using npm and yarn. This package has peer dependencies like @mui/material and @emotion/react.

```bash
npm install @availity/mui-list
```

```bash
yarn add @availity/mui-list
```