Skip to main content
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

npm i @telegram-apps/telegram-ui

​
Usage

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

  • 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

  • Modern browsers
  • Server-side Rendering
  • All known Telegram clients

​
Resources

  • Example Mini App: GitHub.
  • Playground and Storybook: Experiment with components and visualize changes in real-time at Playground and Storybook.
  • Figma Resources: Design and prototype with ease using our comprehensive Figma files available at Figma.

​
Contribute

Contributions are welcome! To contribute, fork the repository, make your changes, and submit a pull request. We look forward to your innovative ideas and improvements.

​
License

This Telegram UI Kit is available under the MIT License. Use it freely in both personal and commercial projects. The library was skillfully crafted by @mainsmirnov and @heyqbnk, with the generous sponsorship of TON Foundation.
⌘I