### Install MAX UI Library

Source: https://dev.max.ru/ui

Use npm, yarn, or pnpm to install the MAX UI library. This is the first step to integrating MAX UI into your project.

```shell
npm i @maxhub/max-ui yarn add @maxhub/max-ui pnpm add @maxhub/max-ui 
```

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

### Initialize MAX UI Provider and Styles

Source: https://dev.max.ru/ui

Wrap your application's root component with the MaxUI provider and import the necessary CSS styles. This sets up the theming and platform context for all components.

```jsx
import { createRoot } from 'react-dom/client';
import { MaxUI } from '@maxhub/max-ui';
import '@maxhub/max-ui/dist/styles.css';
import App from './App.jsx';

const Root = () => (
  <MaxUI>
    <App />
  </MaxUI>
)

createRoot(document.getElementById('root')).render(<Root />);

```

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

### Using MAX UI Components

Source: https://dev.max.ru/ui

Import and use various components like Panel, Grid, Container, Flex, Avatar, and Typography from the MAX UI library to build your application's UI.

```jsx
import { Panel, Grid, Container, Flex, Avatar, Typography } from '@maxhub/max-ui';

const App = () => (
  <Panel mode="secondary" className="panel">
    <Grid gap={12} cols={1}>
      <Container className="me">
        <Flex direction="column" align="center">
          <Avatar.Container size={72} form="squircle" className="me__avatar">
            <Avatar.Image src="https://sun9-21.userapi.com/1N-rJz6-7hoTDW7MhpWe19e_R_TdGV6Wu5ZC0A/67o6-apnAks.jpg" />
          </Avatar.Container>
          <Typography.Title>Иван Иванов</Typography.Title>
        </Flex>
      </Container>
    </Grid>
  </Panel>
)

export default App;

```

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

### Button Playground

Source: https://dev.max.ru/ui/components/Button

The playground allows for interactive exploration of the Button component's properties.

```APIDOC
## Button Playground

### Description
Interactive component to test different Button configurations.

### Endpoint
/

### Parameters
#### Query Parameters
- **mode** (string) - Optional - Possible values: "link", "primary", "secondary", "tertiary"
- **appearance** (string) - Optional - Possible values: "themed", "negative", "neutral", "neutral-themed", "contrast-static"
- **size** (string) - Optional - Possible values: "small", "medium", "large"
- **iconAfter** (ReactNode) - Optional - Renders an icon after the content. Values: False, True
- **iconBefore** (ReactNode) - Optional - Renders an icon before the content. Values: False, True
- **indicator** (ReactNode) - Optional - Renders an indicator. Value: None
- **children** (string) - Optional - The text content of the button.
- **disabled** (boolean) - Optional - Disables the button. Values: False, True
- **stretched** (boolean) - Optional - Stretches the button to fill available width. Values: False, True
- **loading** (boolean) - Optional - Shows a loading state. Values: False, True
- **innerClassNames** (InnerClassNamesProp<ButtonInnerElementKey>) - Optional - Custom class names for inner elements.
- **asChild** (boolean) - Optional - Renders the button as a child element. Value: -
```

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

### Link as Button

Source: https://dev.max.ru/ui/components/Button

Configures the button component to act as a link, navigating to a specified URL.

```APIDOC
## Link as Button

### Description
This configuration allows the button component to function as a hyperlink, navigating to a provided URL upon click. By default, the external resource will open in a new browser tab.

### Endpoint
/

### Parameters
- **mode** (string) - Required - Must be set to "link".
- **children** (string) - Required - The text content of the button.
- **href** (string) - Required - The URL to navigate to.
- **target** (string) - Optional - Specifies where to open the linked document. Default is "_blank".
```

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

### CellList Playground

Source: https://dev.max.ru/ui/components/CellList

Configuration options for the CellList component in the playground.

```APIDOC
## CellList Playground

### Description
Configuration options for the CellList component.

### Method
N/A (Playground configuration)

### Endpoint
N/A (Playground configuration)

### Parameters
#### Query Parameters
- **mode** (string) - Optional - Can be either "full-width" or "island".
- **filled** (boolean) - Optional - Can be either `False` or `True`.
- **header** (ReactNode) - Optional - Can be `None` or a React Node.

### Request Example
```json
{
  "mode": "full-width",
  "filled": false,
  "header": null
}
```

### Response
N/A (Playground configuration)

```

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

### Polymorphic Button Component with asChild

Source: https://dev.max.ru/ui

Demonstrates the use of the `asChild` prop with the Button component to render it as a different HTML element, such as an anchor tag or a React Router Link. This preserves component styling while changing the underlying DOM element.

```jsx
import { Link } from "react-router-dom";

<Button asChild>
  <a href="#">Я — ссылка!</a>
</Button>

<Button asChild>
  <Link to="/home">Я — ссылка RRD!</Link>
</Button>

```

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

### Default Button

Source: https://dev.max.ru/ui/components/Button

The default state of the button component as it appears on initial render.

```APIDOC
## Default Button

### Description
Represents the default state of the button component when first rendered, displaying initial text.

### Endpoint
/

### Parameters
(Same parameters as Button Playground apply, with default values assumed for initial render.)
```

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

### Override Platform and Color Scheme in MaxUI Provider

Source: https://dev.max.ru/ui

Explicitly set the platform ('ios' or 'android') and color scheme ('light' or 'dark') for MAX UI components by passing props to the MaxUI provider. This allows for consistent theming across different environments.

```jsx
import { createRoot } from 'react-dom/client';
import { MaxUI } from '@maxhub/max-ui';
import '@maxhub/max-ui/dist/styles.css';
import App from './App.jsx';

const Root = () => (
    <MaxUI platform="android" colorScheme="dark">
        <App />
    </MaxUI>
)

createRoot(document.getElementById('root')).render(<Root />);

```

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

### Использование innerClassNames в Button

Source: https://dev.max.ru/ui

Пример применения пользовательских классов к внутренним элементам компонента Button.

```jsx
<Button   
disabled={true}  
iconBefore={<svg />}  
>  
Кнопка с иконкой  
</Button>
```

```jsx
<Button   
disabled={true}  
iconBefore={<svg />}  
innerClassNames={{  
iconBefore: 'my-custom-icon-class'  
}}  
>  
Кнопка с иконкой  
</Button>
```

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

### CellInput Component API

Source: https://dev.max.ru/ui/components/CellInput

API documentation for the CellInput component, detailing its parameters and their types.

```APIDOC
## CellInput Component

### Description
A UI component for developers, providing input functionality with various configuration options.

### Parameters
#### Query Parameters
- **before** (ReactNode) - Optional - Content to display before the input.
- **height** (string) - Optional - Specifies the height of the input. Accepts 'compact' or 'normal'.
- **placeholder** (string) - Optional - Placeholder text for the input field.
- **disabled** (boolean) - Optional - Disables the input field. Accepts `True` or `False`.
- **innerClassNames** (InnerClassNamesProp<CellInputElementKey>) - Optional - Custom class names for inner elements.
```

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

### CellAction Component Properties

Source: https://dev.max.ru/ui/components/CellAction

Detailed breakdown of the properties available for the CellAction component.

```APIDOC
## CellAction Component

### Description
The CellAction component provides an interactive action element. It supports custom modes, sizing, and state management.

### Parameters
- **children** (string) - Required - The content to display within the action.
- **showChevron** (boolean) - Optional - Whether to display a chevron icon. Defaults to False.
- **before** (ReactNode) - Optional - An icon or element to display before the content.
- **mode** (string) - Optional - The visual style of the action: "primary", "custom", or "destructive".
- **height** (string) - Optional - The vertical size of the component: "compact" or "normal".
- **disabled** (boolean) - Optional - Whether the action is disabled. Defaults to False.
- **onClick** (function) - Optional - Callback function triggered on click.
- **innerClassNames** (InnerClassNamesProp) - Optional - Custom class names for internal elements.
- **asChild** (boolean) - Optional - Whether to render as a child component.
```

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

### Handling Prop Conflicts with asChild

Source: https://dev.max.ru/ui

Illustrates how the `asChild` prop merges conflicting properties like `className`, `style`, and event handlers between parent and child components. For other properties, the parent component's values take precedence.

```jsx
<Button disabled={true} asChild>
  <button disabled={false}>
    Кнопка
  </button>
</Button>

<Button style={{ color: 'red' }} asChild>
  <button style={{ background: 'green' }}>
    Кнопка
  </button>
</Button>

```

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

### Avatar.Text Component

Source: https://dev.max.ru/ui/components/Avatar.Text

The Avatar.Text component allows for the display of text within an avatar, with customizable text content and gradient options.

```APIDOC
## Avatar.Text Component

### Description
Displays text within an avatar. Supports custom text content and predefined gradient colors.

### Parameters
#### Query Parameters
- **children** (string) - Required - The text content to display in the avatar.
- **gradient** (string) - Optional - Specifies the gradient color. Allowed values: "custom", "red", "orange", "green", "blue", "purple".

### Request Example
```json
{
  "children": "JD",
  "gradient": "blue"
}
```

### Response
#### Success Response (200)
- **avatar_url** (string) - The URL to the generated avatar image.

#### Response Example
```json
{
  "avatar_url": "https://example.com/avatars/jd_blue.png"
}
```
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.