# Getting started (https://docs-fpm2731fy-ton-core-docs.vercel.app/llms/ecosystem/tma/telegram-ui/getting-started/content.md)



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

## Easy installation [#easy-installation]

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

```sh icon="npm"
npm install @telegram-apps/telegram-ui
```

<Callout type="tip" title="React 19 compatibility">
  If using `@telegram-apps/telegram-ui` with Next.js 15+ (React 19), create a `.npmrc` file in the project root with `legacy-peer-deps=true` to resolve peer dependency conflicts.
</Callout>

## Import styles [#import-styles]

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

```jsx
import '@telegram-apps/telegram-ui/dist/styles.css';
```

## Wrap your App [#wrap-your-app]

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

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

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

## Usage example [#usage-example]

```jsx
// 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 [#more-ui-components]

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