Telegram UI

Overview

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.

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

| Edge | Firefox | Chrome | Safari | Ios | |------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | >= 79 | >= 78 | >= 73 | >= 12.0 | >= 12.0 |

Resources

• Example Mini App: Typescript version — https://github.com/Telegram-Mini-Apps/TGUI-Example
• 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.

Installation

npm i @telegram-apps/telegram-ui

yarn add @telegram-apps/telegram-ui

pnpm add @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;

🤝 Contributing

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, with the generous sponsorship of TON Foundation.