Getting started

Dive into our sleek design on Figma to get a glimpse of what awaits you.

Easy installation

Getting started is a breeze with npm or yarn. Simply run:

npm install @telegram-apps/telegram-ui

Import styles

Before diving into the development, ensure to import the necessary styles:

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

Wrap your App

Wrap your application with AppRoot to leverage this platform’s features:

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

ReactDOM.render(
  <AppRoot>
    <App />
  </AppRoot>,
  document.getElementById('root')
);

Usage example

// Import the necessary styles globally
import '@telegram-apps/telegram-ui/dist/styles.css';

// Import components from the library
import { AppRoot, Cell, List, Section } from '@telegram-apps/telegram-ui';

// Example data for rendering list cells
const cellsTexts = ['Chat Settings', 'Data and Storage', 'Devices'];

export const App = () => (
  <AppRoot>
    {/* List component to display a collection of items */}
    <List>
      {/* Section component to group items within the list */}
      <Section header="Header for the section" footer="Footer for the section">
        {/* Mapping through the cells data to render Cell components */}
        {cellsTexts.map((cellText, index) => (
          <Cell key={index}>
            {cellText}
          </Cell>
        ))}
      </Section>
    </List>
  </AppRoot>
);

With these steps, you’re all set to explore the potential of this library.

More UI components

Find more demo components here.