Telegram UI kit equips you with a variety of pre-designed components and tools to help you quickly develop high-quality Telegram applications using Vue. Whether you're aiming to create custom client apps, integrate Telegram functionality, or develop unique bots, this toolkit is your go-to resource.
- 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.
- Modern browsers
- Server-side Rendering
- All known Telegram clients
 Edge |
 Firefox |
 Chrome |
 Safari |
Ios |
|---|---|---|---|---|
| >= 79 | >= 78 | >= 73 | >= 12.0 | >= 12.0 |
- Example Mini App: Vue version — GitHub Repository
- 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.
| React Version | Vue Implementation |
|---|---|
| Avatar | ✅ |
| Badge | ✅ |
| Button | ✅ |
| Caption | ✅ |
| CircularProgress | ✅ |
| Headline | ✅ |
| IconButton | ✅ |
| Image | ✅ |
| LargeTitle | ✅ |
| Placeholder | ✅ |
| Spinner | ✅ |
| Subheadline | ✅ |
| Switch | ✅ |
| Text | ✅ |
| Title | ✅ |
| Accordion | 🚫 |
| AccordionContent | 🚫 |
| AccordionSummary | 🚫 |
| AvatarStack | 🚫 |
| Banner | 🚫 |
| Blockquote | 🚫 |
| Breadcrumbs | 🚫 |
| ButtonCell | 🚫 |
| Card | 🚫 |
| Cell | 🚫 |
| Checkbox | 🚫 |
| Chip | 🚫 |
| ColorInput | 🚫 |
| CompactPagination | 🚫 |
| CompactPaginationItem | 🚫 |
| Divider | 🚫 |
| FileInput | 🚫 |
| FixedLayout | 🚫 |
| Info | 🚫 |
| InlineButtons | 🚫 |
| InlineButtonsItem | 🚫 |
| Input | 🚫 |
| List | 🚫 |
| Modal | 🚫 |
| ModalClose | 🚫 |
| ModalHeader | 🚫 |
| Multiselect | 🚫 |
| Multiselectable | 🚫 |
| Navigation | 🚫 |
| Pagination | 🚫 |
| PinInput | 🚫 |
| Popper | 🚫 |
| Progress | 🚫 |
| Radio | 🚫 |
| Rating | 🚫 |
| Section | 🚫 |
| SectionFooter | 🚫 |
| SectionHeader | 🚫 |
| SegmentedControl | 🚫 |
| SegmentedControlItem | 🚫 |
| Select | 🚫 |
| Selectable | 🚫 |
| Skeleton | 🚫 |
| Slider | 🚫 |
| Snackbar | 🚫 |
| Spoiler | 🚫 |
| Steps | 🚫 |
| Tabbar | 🚫 |
| TabbarItem | 🚫 |
| TabsItem | 🚫 |
| TabsList | 🚫 |
| Textarea | 🚫 |
| Timeline | 🚫 |
| TimelineItem | 🚫 |
| Tooltip | 🚫 |
npm i @townsquarelabs/telegram-ui-vueyarn add @townsquarelabs/telegram-ui-vuepnpm add @townsquarelabs/telegram-ui-vue<template>
<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>
</template>
<script setup>
import { AppRoot, Placeholder } from '@townsquarelabs/telegram-ui-vue';
</script>
<style>
@import '@townsquarelabs/telegram-ui-vue/dist/styles.css';
</style>
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.
This Telegram UI Kit for Vue is available under the MIT License. Use it freely in both personal and commercial projects.
The library is developed and maintained by TownSquare Labs. It is based on the React version of TelegramUI developed by XeleneStudio.