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



Telegram UI kit equips you with a variety of pre-designed components and tools to help you quickly develop high-quality Telegram applications. Whether you're aiming to create custom client apps, integrate Telegram functionality, or develop unique bots, this toolkit is your go-to resource.

## Installation [#installation]

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

## Usage [#usage]

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

import { AppRoot, Placeholder } from '@telegram-apps/telegram-ui';

const App = () => (
  <AppRoot>
    <Placeholder
      header="Title"
      description="Description"
    >
      <img
        alt="Telegram sticker"
        src="https://xelene.me/telegram.gif"
        style={{ display: 'block', width: '144px', height: '144px' }}
      />
    </Placeholder>
  </AppRoot>
);

export default App;
```

## Features [#features]

* **Cross-Platform Design Consistency:** Use built-in support for iOS’s Human Interface Guidelines and Android’s Material Design to maintain a uniform look and functionality across both platforms.
* **Pre-designed UI Components:** Access a variety of ready-to-use UI components inspired by Telegram’s interface, designed for easy integration and customization.
* **Responsive Design:** Create apps that look and work great on any device, using flexible layouts and media queries to ensure optimal display and functionality.
* **Telegram Color Scheme Support:** Apply Telegram’s native color schemes to your apps for consistent branding and a familiar user experience.

## Environment support [#environment-support]

* Modern browsers
* Server-side Rendering
* [All known](https://telegram.org/apps) Telegram clients

## Resources [#resources]

* **Example Mini App:** [GitHub](https://github.com/Telegram-Mini-Apps/TGUI-Example).
* **Playground and Storybook:** Experiment with components and visualize changes in real-time at [Playground and Storybook](https://tgui.xelene.me/).
* **Figma Resources:** Design and prototype with ease using our comprehensive Figma files available at [Figma](https://figma.com/community/file/1348989725141777736/).

## Contribute [#contribute]

Contributions are welcome! To contribute, fork the repository, make your changes, and [submit a pull request](https://github.com/Telegram-Mini-Apps/TelegramUI/pulls). We look forward to your innovative [ideas](https://github.com/Telegram-Mini-Apps/TelegramUI/pulls) and improvements.

## License [#license]

This Telegram UI Kit is available under the [MIT License](https://opensource.org/license/mit). Use it freely in both personal and commercial projects.

The library was skillfully crafted by [`@mainsmirnov`](https://github.com/mainsmirnov) and [`@heyqbnk`](https://github.com/heyqbnk), with the generous sponsorship of [TON Foundation](https://github.com/ton-society/grants-and-bounties/issues/364).