Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/telegram-mini-apps/telegramui

React components library for Telegram Mini Apps inspired by Telegram interface
https://github.com/telegram-mini-apps/telegramui

design-systems miniapps react telegram typescript ui-kit ui-library

Last synced: about 8 hours ago
JSON representation

React components library for Telegram Mini Apps inspired by Telegram interface

Host: GitHub
URL: https://github.com/telegram-mini-apps/telegramui
Owner: Telegram-Mini-Apps
License: mit
Created: 2024-01-02T12:13:37.000Z (10 months ago)
Default Branch: main
Last Pushed: 2024-10-15T14:54:26.000Z (21 days ago)
Last Synced: 2024-10-31T16:04:41.417Z (5 days ago)
Topics: design-systems, miniapps, react, telegram, typescript, ui-kit, ui-library
Language: TypeScript
Homepage: https://ton.org/mini-apps
Size: 1.77 MB
Stars: 391
Watchers: 3
Forks: 30
Open Issues: 21
Metadata Files:
- Readme: README.md
- License: LICENSE

Awesome Lists containing this project

README

# 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](https://telegram.org/apps) Telegram clients

| [](http://godban.github.io/browsers-support-badges/)
Edge | [](http://godban.github.io/browsers-support-badges/)
Firefox | [](http://godban.github.io/browsers-support-badges/)
Chrome | [](http://godban.github.io/browsers-support-badges/)
Safari | [](http://godban.github.io/browsers-support-badges/)
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](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/).

## Installation

```sh
npm i @telegram-apps/telegram-ui
```

```sh
yarn add @telegram-apps/telegram-ui
```

```sh
pnpm add @telegram-apps/telegram-ui
```

## Usage

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

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

const App = () => (

);

export default App;
```

## 🤝 Contributing [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square)](http://makeapullrequest.com)

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

## 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), with the generous sponsorship of [TON Foundation](https://github.com/ton-society/grants-and-bounties/issues/364).