> 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/introduction-to-altrone.md).

# Introduction to Altrone

**Altrone** is a comprehensive React component library offering a versatile collection of reusable UI elements for streamlined and visually appealing web development.

{% hint style="warning" %}
**Altrone 2 is no longer supported.** There will be no new features or bug fixes. Move to the next generation of Altrone - Altrone 3.\
\
[Read more about Altrone 3](https://altrone.vercel.app/)
{% endhint %}

## Altrone 2.2 is here! 

See what new things have been added:

<figure><img src="/files/eMYV5OQfUWjd6RXCDfll" alt=""><figcaption><p>New features in <mark style="color:green;"><strong>Altrone 2.2</strong></mark></p></figcaption></figure>

{% content-ref url="/pages/0rAlGAyXMx3Jp3CDsvls" %}
[What's new in 2.2?](/altrone-ui/blog/2.2.md)
{% endcontent-ref %}

{% content-ref url="/pages/oJpseYhWHiweL1llFVLY" %}
[What's new in 2.1?](/altrone-ui/blog/2.1.md)
{% endcontent-ref %}

{% content-ref url="/pages/KzDA3nHwjk4Z0vxnZqF9" %}
[What's new in 2.0?](/altrone-ui/blog/2.0.md)
{% endcontent-ref %}

## Storybook

{% embed url="<https://apcom52.github.io/altrone-ui/>" %}

## Components

<table data-view="cards"><thead><tr><th></th><th></th><th></th><th data-hidden data-card-cover data-type="files"></th><th data-hidden data-card-target data-type="content-ref"></th></tr></thead><tbody><tr><td><strong>Typography</strong></td><td>Paragraph, Heading, Message and etc.</td><td></td><td><a href="/files/YO7y1NTGNDlKbnEVscpj">/files/YO7y1NTGNDlKbnEVscpj</a></td><td><a href="/pages/JEIPRocQzGa4jK7YHfmh">/pages/JEIPRocQzGa4jK7YHfmh</a></td></tr><tr><td><strong>Containers</strong></td><td>FloatingBox, Spoiler, Modal and etc.</td><td></td><td><a href="/files/ZDP6iOsBMqtTOKr5SJ1q">/files/ZDP6iOsBMqtTOKr5SJ1q</a></td><td><a href="/pages/nU8GQ6yXJ0ucIqqcfDDU">/pages/nU8GQ6yXJ0ucIqqcfDDU</a></td></tr><tr><td><strong>Data</strong></td><td>Carousel, DataTable and Calendar</td><td></td><td><a href="/files/dPvdWSQE52SYwjmpL0Or">/files/dPvdWSQE52SYwjmpL0Or</a></td><td><a href="/pages/IbLUzI4dyWh2cvrxoj4w">/pages/IbLUzI4dyWh2cvrxoj4w</a></td></tr><tr><td><strong>Forms</strong></td><td>Button, TextInput, DatePicker and etc.</td><td></td><td><a href="/files/YGvUzGX8QGbMJXEBY1gZ">/files/YGvUzGX8QGbMJXEBY1gZ</a></td><td><a href="/pages/IoWU7JX2ZKbLPmegtX8J">/pages/IoWU7JX2ZKbLPmegtX8J</a></td></tr><tr><td><strong>Lists</strong></td><td>NavigationList, Chips, Breadcrumbs and etc.</td><td></td><td><a href="/files/VhRBK5I2DjRSvVRdCWhZ">/files/VhRBK5I2DjRSvVRdCWhZ</a></td><td><a href="/pages/6TGjCKbLfPJFjtrdBcK6">/pages/6TGjCKbLfPJFjtrdBcK6</a></td></tr><tr><td><strong>Indicators</strong></td><td>Loading, Progress and Pagination</td><td></td><td><a href="/files/bt3XL2EGOrCjW7LTOj9X">/files/bt3XL2EGOrCjW7LTOj9X</a></td><td><a href="/pages/s0dTXvlRmUg4ncCSYbFP">/pages/s0dTXvlRmUg4ncCSYbFP</a></td></tr></tbody></table>