> ## Documentation Index
> Fetch the complete documentation index at: https://companyname-a7d5b98e-ton-storage.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Getting started

Dive into our sleek design on [Figma](https://figma.com/community/file/1348989725141777736/) to get a glimpse of what awaits you.

## Easy installation

Getting started is a breeze with npm or yarn. Simply run:

```sh icon="npm" theme={null}
npm install @telegram-apps/telegram-ui
```

## Import styles

Before diving into the development, ensure to import the necessary styles:

```jsx theme={null}
import '@telegram-apps/telegram-ui/dist/styles.css';
```

## Wrap your App

Wrap your application with `AppRoot` to leverage this platform's features:

```jsx theme={null}
import { AppRoot } from '@telegram-apps/telegram-ui';

ReactDOM.render(
  <AppRoot>
    <App />
  </AppRoot>,
  document.getElementById('root')
);
```

## Usage example

```jsx theme={null}
// Import the necessary styles globally
import '@telegram-apps/telegram-ui/dist/styles.css';

// Import components from the library
import { AppRoot, Cell, List, Section } from '@telegram-apps/telegram-ui';

// Example data for rendering list cells
const cellsTexts = ['Chat Settings', 'Data and Storage', 'Devices'];

export const App = () => (
  <AppRoot>
    {/* List component to display a collection of items */}
    <List>
      {/* Section component to group items within the list */}
      <Section header="Header for the section" footer="Footer for the section">
        {/* Mapping through the cells data to render Cell components */}
        {cellsTexts.map((cellText, index) => (
          <Cell key={index}>
            {cellText}
          </Cell>
        ))}
      </Section>
    </List>
  </AppRoot>
);
```

With these steps, you're all set to explore the potential of this library.

### More UI components

Find more demo components [here](https://tgui.xelene.me/?path=/docs/getting-started--documentation).