Overview

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 Telegram clients

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

✅ Supported Vue versions: >= 3.5.0

Installation

pnpm add telegram-ui-vue

npm install telegram-ui-vue

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.

Usage

<template>
  <AppRoot>
    <Placeholder>
      <template #header>Title</template>
      <template #description>Description</template>
      <img
        alt="Telegram sticker"
        src="https://storage.mbredikhin.com/tg-banana.gif"
        style="display: block; width: 144px; height: 144px"
      />
    </Placeholder>
  </AppRoot>
</template>

<script setup lang="ts">
import { AppRoot, Placeholder } from 'telegram-ui-vue';
</script>

Dev Setup

1. Clone the repo git clone [email protected]: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.

Contributing

We would love to have your contributions, all PRs are welcome! We need help building the core components, docs, tests, stories.