> For the complete documentation index, see [llms.txt](https://apcom.gitbook.io/altrone-ui/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://apcom.gitbook.io/altrone-ui/usage.md).

# Usage

To use Altrone in your project you have to import css styles and `Altrone` component. You have to place all the components inside Altrone wrapper. 

```tsx
import { Altrone, Theme } from "altrone-ui";
import "altrone-ui/dist/index.css";

return <Altrone theme={Theme.system}>
    ...
</Altrone>
```

Altrone wrapper provides to use some properties to configure your application. Better to have only one Altrone wrapper on the page, but you also can use some wrappers on the same page.&#x20;

## Properties

| Property                                              | Type                                        | Description                                                                      |
| ----------------------------------------------------- | ------------------------------------------- | -------------------------------------------------------------------------------- |
| **`children`**<mark style="color:red;">**`*`**</mark> | `ReactNode`                                 | Inner components                                                                 |
| **`theme`**                                           | [`Theme`](/altrone-ui/utils/enums/theme.md) | Theme of the application. Default value is `system`                              |
| **`locale`**                                          | `string`                                    | Locale of the application (used for dates, numbers, etc). Default value is en-US |
| **`style`**                                           | `CSSProperties`                             | Custom styles of Altrone wrapper                                                 |
| **`lang`**                                            | `string`                                    | Language of the application. Default value is en                                 |
| **`options`**                                         | `AltroneOptions`                            | List of global configurations and configurations for specific components         |
| **`className`**                                       | `string`                                    | Custom CSS class                                                                 |

## Altrone Options

Update Altrone 2.1 introduced the ability to specify configurations for some component settings at the Altrone root component level.&#x20;

There is a list of all possible configurations:

<details>

<summary>Global configurations</summary>

* **reduceMotion**\
  Disable all animations in all components. Default value is `false`. \
  *`Added in 2.1`*
* **transitionDuration**\
  Set a duration for all animations (works only for JS animations). Default value is `200`. \
  *Added in 2.2*

</details>

<details>

<summary>Modal</summary>

* **reduceMotion**\
  Disable all animations in all modals on the page. Default value is `false`. \
  *`Added in 2.1`*

</details>

<details>

<summary>Carousel</summary>

* **reduceMotion**\
  Disable all animations in all modals on the page. Default value is `false`. \
  *`Added in 2.1`*

</details>

<details>

<summary>NumberInput</summary>

* **useFormatFromLocale**\
  All NumberInputs on the page will use delimiters from current locale. Default value is `true`. \
  *`Added in 2.1`*

</details>

<details>

<summary>FloatingBox</summary>

* **offset**\
  Offset from parent element. Default value is `4`\
  *`Added in 2.2`*
* **windowOffset**\
  Offset from window boundaries. Default value is `4`\
  *`Added in 2.2`*

</details>

<details>

<summary>PhotoViewer</summary>

* **openDescriptionByDefault**\
  Show description block in all PhotoViewer on the page. Default value is `true`. \
  *`Added in 2.2`*

</details>

<details>

<summary>Spoiler</summary>

* **reduceMotion**\
  Disable all animations in all spoilers on the page. Default value is `false`. \
  *`Added in 2.2`*

</details>