https://github.com/mbredikhin/telegram-ui-vue
Vue components library for Telegram Mini Apps inspired by Telegram interface
https://github.com/mbredikhin/telegram-ui-vue
design-system telegram telegram-mini-apps telegram-ui tma typescript ui ui-kit vue vue-components
Last synced: 5 months ago
JSON representation
Vue components library for Telegram Mini Apps inspired by Telegram interface
- Host: GitHub
- URL: https://github.com/mbredikhin/telegram-ui-vue
- Owner: mbredikhin
- License: mit
- Created: 2025-03-22T17:41:06.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-09-16T10:52:14.000Z (9 months ago)
- Last Synced: 2025-09-16T12:53:12.302Z (9 months ago)
- Topics: design-system, telegram, telegram-mini-apps, telegram-ui, tma, typescript, ui, ui-kit, vue, vue-components
- Language: TypeScript
- Homepage: https://telegram-ui-vue.mbredikhin.com
- Size: 966 KB
- Stars: 3
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
telegram-ui-vue
Vue UI kit for Telegram Mini Apps inspired by Telegram interface.
## Overview
This 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
- [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 |
✅ Supported Vue versions: >= 3.5.0
## Installation
```bash
pnpm add telegram-ui-vue
```
```bash
npm install telegram-ui-vue
```
```bash
yarn add telegram-ui-vue
```
## Resources
- **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](https://figma.com/community/file/1348989725141777736/).
## Usage
```js
Title
Description
import { AppRoot, Placeholder } from 'telegram-ui-vue';
```
## Dev Setup
1. Clone the repo `git clone git@github.com:mbredikhin/telegram-ui-vue.git`
2. Run `pnpm install`
3. Run `pnpm dev` to run storybook, preview is available at `http://localhost:6006`
- Run `pnpm build` to run build `telegram-ui-vue` locally
- Run `pnpm build-stories` to build stories locally
- Run `pnpm test` to run unit tests
## Releases
For changelog, visit [releases](https://github.com/mbredikhin/telegram-ui-vue/releases).
## Contributing
We would love to have your contributions, all PRs are welcome! We need help building the core components, docs, tests, stories.