> 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

v2.2.1

**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="https://1842370076-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW5YLGWqfJIMCnPELJjW6%2Fuploads%2Fsmi6XSZTPkI0Tdjo6j0k%2Fbasilisk22.png?alt=media&amp;token=a1f042df-1f7e-4c08-8068-f8a53c823f6f" 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="https://1842370076-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW5YLGWqfJIMCnPELJjW6%2Fuploads%2FbYomGRB0jQiKpAVPvanN%2Ftypography.png?alt=media&amp;token=41a7d323-91f7-4e42-8d38-ce0f68ff361e">typography.png</a></td><td><a href="/altrone-ui/components/typography.md">Typography</a></td></tr><tr><td><strong>Containers</strong></td><td>FloatingBox, Spoiler, Modal and etc.</td><td></td><td><a href="https://1842370076-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW5YLGWqfJIMCnPELJjW6%2Fuploads%2FZLzwgbuTsURQRiiuadEl%2Fcontainers.png?alt=media&amp;token=a941373c-dd88-438c-8889-8e8bb0148fee">containers.png</a></td><td><a href="/altrone-ui/components/containers.md">Containers</a></td></tr><tr><td><strong>Data</strong></td><td>Carousel, DataTable and Calendar</td><td></td><td><a href="https://1842370076-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW5YLGWqfJIMCnPELJjW6%2Fuploads%2FWIIVTyPlxxVG0aSDVgd3%2Fdata.png?alt=media&amp;token=cbca247a-26de-4da3-ba08-2fdc82627ae6">data.png</a></td><td><a href="/altrone-ui/components/data.md">Data</a></td></tr><tr><td><strong>Forms</strong></td><td>Button, TextInput, DatePicker and etc.</td><td></td><td><a href="https://1842370076-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW5YLGWqfJIMCnPELJjW6%2Fuploads%2Fw10aXUgAlrn7TfGnWwI7%2Fforms.png?alt=media&amp;token=6efd135f-1bf6-4455-808a-ccc7b8d70aa3">forms.png</a></td><td><a href="/altrone-ui/components/forms.md">Forms</a></td></tr><tr><td><strong>Lists</strong></td><td>NavigationList, Chips, Breadcrumbs and etc.</td><td></td><td><a href="https://1842370076-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW5YLGWqfJIMCnPELJjW6%2Fuploads%2Fw1VpXMDAAgTML2mKo3LF%2Flists.png?alt=media&amp;token=0de14cc3-bff1-4fc3-bb17-ce93f64b0404">lists.png</a></td><td><a href="/altrone-ui/components/lists.md">Lists</a></td></tr><tr><td><strong>Indicators</strong></td><td>Loading, Progress and Pagination</td><td></td><td><a href="https://1842370076-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FW5YLGWqfJIMCnPELJjW6%2Fuploads%2FahyFWZemPgqdnMJ0cpgM%2Findicators-home.png?alt=media&amp;token=e009e4ba-a05d-4cd0-8338-e77e23645012">indicators-home.png</a></td><td><a href="/altrone-ui/components/indicators.md">Indicators</a></td></tr></tbody></table>