# @availity/mui-spaces

> Availity MUI Spaces component to be used with @availity/element design system.

[![Version](https://img.shields.io/npm/v/@availity/mui-spaces.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-spaces)
[![NPM Downloads](https://img.shields.io/npm/dt/@availity/mui-spaces.svg?style=for-the-badge)](https://www.npmjs.com/package/@availity/mui-spaces)
[![Dependency Status](https://img.shields.io/librariesio/release/npm/@availity/mui-spaces?style=for-the-badge)](https://github.com/Availity/element/blob/main/packages/spaces/package.json)

## Documentation

Live demo and documentation in our [Storybook](https://availity.github.io/element/?path=/docs/components-spaces-introduction--docs)

Availity standards for design and usage can be found in the [Availity Design Guide](https://design.availity.com/2e36e50c7)

## Installation

### Import Through @availity/element (Recommended)

#### NPM

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

#### Yarn

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

### Direct Import

#### NPM

_This package has a few peer dependencies. See the [Peer Dependencies](#peer-dependencies) section for more information._

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

#### Yarn

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

#### Peer Dependencies

Ensure the following dependencies are installed in your project.

- `@availity/mui-button`
- `@availity/mui-card`
- `@availity/mui-chip`
- `@availity/mui-dialog`
- `@availity/mui-disclaimer`
- `@availity/mui-favorites`
- `@availity/mui-icon`
- `@availity/mui-layout`
- `@availity/mui-list`
- `@availity/mui-modal`
- `@availity/mui-progress`
- `@availity/mui-typography`
- `@mui/material`
- `react`

### Usage

#### Import through @availity/element

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

#### Direct import

```tsx
import { Spaces } from '@availity/mui-spaces';
```