TelegramUI is a React components library that gives developers building Telegram Mini Apps a ready-made set of interface elements styled after Telegram's own design.

What it is

TelegramUI, published on npm as @telegram-apps/telegram-ui, is a TypeScript component library for the React ecosystem that supplies pre-designed UI components, color schemes, and layout patterns modelled on the Telegram interface. It is aimed at developers creating custom client apps, integrating Telegram functionality, or building bots, and it is part of the broader Telegram Mini Apps tooling space alongside example projects and design resources such as its companion Figma files.

The concrete problem it solves is the cost of hand-building an interface that looks and behaves like Telegram across every platform a Mini App can run. Instead of reimplementing Telegram's visual language from scratch, a developer imports ready-made components and its stylesheet, and the library handles consistency. It maintains a uniform appearance across platforms through built-in support for iOS's Human Interface Guidelines and Android's Material Design, applies Telegram's native color schemes for familiar branding, and uses flexible layouts and media queries so components respond correctly on any device.

Key capabilities

• Import ready-to-use UI components such as AppRoot and Placeholder from @telegram-apps/telegram-ui, paired with the bundled dist/styles.css stylesheet.
• Apply Telegram's native color schemes directly to an app so branding stays consistent with the Telegram look.
• Maintain a single consistent design across platforms with built-in support for both iOS Human Interface Guidelines and Android Material Design.
• Build responsive layouts through flexible layout primitives and media queries that adapt to different screen sizes.
• Run in modern browsers with documented support for Edge >= 79, Firefox >= 78, Chrome >= 73, Safari >= 12.0, and iOS >= 12.0.
• Render on the server, since server-side rendering is listed among supported environments, and work across all known Telegram clients.
• Explore components interactively in the hosted Playground and Storybook at tgui.xelene.me, and prototype against the published Figma community files.

Who uses it and how

• Frontend developers scaffolding a new Telegram Mini App who want a shell in place quickly; the TGUI-Example repository provides a complete TypeScript example project to start from.
• Teams that split design and engineering work, using the shared Figma files for design and prototyping while engineers implement the same components in React.
• Contributors working in the open: pull requests are explicitly welcome, and the repository currently carries 45 open issues with 860 stars and 90 forks, indicating an active community audience.
• Organizations shipping across many clients and browsers who rely on the stated support matrix rather than testing each combination ad hoc.

Getting started

Install the package with npm i @telegram-apps/telegram-ui (or the equivalent yarn add / pnpm add command), import @telegram-apps/telegram-ui/dist/styles.css, and wrap your app in AppRoot.

How it compares

The library sits within the Telegram Mini Apps ecosystem referenced by the project's homepage and alongside its own example app, Storybook playground, and Figma resources rather than competing with general-purpose React UI kits; the facts supplied name no comparable alternatives. It is licensed under the MIT license and may be used freely in personal and commercial projects, and it was crafted by mainsmirnov with sponsorship from TON Foundation.

When to use it — and when not to

Because it is a component library rather than a hosted service, there is no database, storage, or SMTP to operate; a self-hoster only needs a normal React build and hosting for the Mini App itself. It is the wrong choice for a project that does not target Telegram, or one that must diverge substantially from Telegram's visual language, since its value depends on matching that interface. Note that the repository has 45 open issues and the README is a fairly brief overview, so teams needing extensive documentation may have to read source and Storybook examples instead.

npm i @telegram-apps/telegram-ui

yarn add @telegram-apps/telegram-ui

pnpm add @telegram-apps/telegram-ui

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;