### Installation & Setup

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Instructions for installing the package and importing CSS and components.

```bash
# Install package
npm install @telegram-apps/telegram-ui

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

# Use in app
import { AppRoot, Button } from '@telegram-apps/telegram-ui';

export default function App() {
  return (
    <AppRoot>
      <Button>Hello World</Button>
    </AppRoot>
  );
}
```

--------------------------------

### Install with yarn

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/src/Getting Started.mdx

Command to install the Telegram UI library using yarn.

```sh
yarn add @telegram-apps/telegram-ui
```

--------------------------------

### Usage Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/src/Getting Started.mdx

A comprehensive example demonstrating how to import and use Telegram UI components like AppRoot, List, Section, and Cell.

```jsx
// 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>
);
```

--------------------------------

### Install with npm

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/src/Getting Started.mdx

Command to install the Telegram UI library using npm.

```sh
npm install @telegram-apps/telegram-ui
```

--------------------------------

### Wrap App with AppRoot

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/src/Getting Started.mdx

Example of wrapping the main application component with AppRoot.

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

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

--------------------------------

### Hook Utilities

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Examples of using usePlatform and useAppRootContext hooks.

```typescript
import { usePlatform, useAppRootContext } from '@telegram-apps/telegram-ui';

// Get current platform
const platform = usePlatform(); // 'ios' | 'android' | 'base'

// Get full context
const { platform, appearance, portalContainer } = useAppRootContext();
```

--------------------------------

### Layout & Overlay Components

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Examples of using layout and overlay components like FixedLayout, Tabbar, Modal, Popper, Tooltip, and Divider.

```typescript
import {
  FixedLayout,
  Tabbar,
  Modal,
  Popper,
  Tooltip,
  Divider,
} from '@telegram-apps/telegram-ui';

// Layout examples
<FixedLayout filled>
  <InlineButtons>
    <Button>Cancel</Button>
    <Button>OK</Button>
  </InlineButtons>
</FixedLayout>

<Tabbar>
  <Tabbar.Item selected={tab === 'home'}>Home</Tabbar.Item>
  <Tabbar.Item selected={tab === 'search'}>Search</Tabbar.Item>
</Tabbar>

<Modal open={open} onOpenChange={setOpen}>
  <Modal.Header>Title</Modal.Header>
  <p>Content</p>
</Modal>

<Tooltip targetRef={ref} placement="top">Helpful text</Tooltip>

<Divider />
```

--------------------------------

### Responsive Tabs

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Example of how to implement responsive tabs using the TabsList component. The active tab state is managed using useState, and the onChange handler updates the active tab.

```typescript
const [active, setActive] = useState('home');

<TabsList activeTab={active} onChange={setActive}>
  <TabsList.Item value="home">Home</TabsList.Item>
  <TabsList.Item value="profile">Profile</TabsList.Item>
</TabsList>
```

--------------------------------

### Import Styles

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/src/Getting Started.mdx

Import statement for the Telegram UI styles.

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

--------------------------------

### Package Installation

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Commands to install the Telegram UI package along with React dependencies.

```bash
npm install @telegram-apps/telegram-ui react react-dom
# or
yarn add @telegram-apps/telegram-ui react react-dom
# or
pnpm add @telegram-apps/telegram-ui react react-dom
```

--------------------------------

### Installation

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/README.md

Install the Telegram UI library along with React and ReactDOM.

```bash
npm install @telegram-apps/telegram-ui react react-dom
```

--------------------------------

### Installation with pnpm

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/README.md

Install the Telegram UI package using pnpm.

```sh
pnpm add @telegram-apps/telegram-ui
```

--------------------------------

### Installation with npm

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/README.md

Install the Telegram UI package using npm.

```sh
npm i @telegram-apps/telegram-ui
```

--------------------------------

### Card Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example of how to use the Card component with its sub-components.

```typescript
import { Card } from '@telegram-apps/telegram-ui';

function ProductCard() {
  return (
    <Card type="plain">
      <Card.Cell>
        <img src="product.jpg" alt="Product" />
      </Card.Cell>
      <Card.Cell>Product Name</Card.Cell>
      <Card.Chip>$9.99</Card.Chip>
    </Card>
  );
}
```

--------------------------------

### Basic Usage Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/README.md

A basic example demonstrating how to use AppRoot and Placeholder components from the Telegram UI library.

```jsx
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;
```

--------------------------------

### Code Splitting Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Demonstrates how to import components for effective code splitting and tree-shaking.

```typescript
// Good - Tree-shakeable
import { Button, Input } from '@telegram-apps/telegram-ui';

// Avoid - Imports everything
import * as TG from '@telegram-apps/telegram-ui';
```

--------------------------------

### Development Configuration with Storybook

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Command to start the development server with Storybook.

```bash
npm run dev
# Opens Storybook at http://localhost:6006
```

--------------------------------

### Minimal Configuration

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Basic setup for the AppRoot component with default settings.

```typescript
import '@telegram-apps/telegram-ui/dist/styles.css';
import { AppRoot } from '@telegram-apps/telegram-ui';

export function App() {
  return (
    <AppRoot>
      {/* Your app components */}
    </AppRoot>
  );
}
```

--------------------------------

### IconButton Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example of how to use the IconButton component.

```typescript
import { IconButton } from '@telegram-apps/telegram-ui';
import { Icon20Heart } from '@telegram-apps/telegram-ui/icons';

function LikeButton() {
  return (
    <IconButton onClick={() => console.log('Liked!')}>
      <Icon20Heart />
    </IconButton>
  );
}
```

--------------------------------

### Feedback Components

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Components for providing user feedback, including Spinner, Progress, CircularProgress, Skeleton, Snackbar, and Spoiler. Examples show how to use Spinner, Progress, and Snackbar.

```typescript
import {
  Spinner,           // Loading indicator (s, m, l)
  Progress,          // Linear progress bar (0-100)
  CircularProgress,  // Circular progress indicator
  Skeleton,          // Shimmer placeholder
  Snackbar,          // Temporary notification
  Spoiler,           // Reveal/hide content
} from '@telegram-apps/telegram-ui';

// Feedback examples
<Spinner size="m" />
<Progress value={65} />
<Snackbar open={true} type="success">Message</Snackbar>
```

--------------------------------

### Pagination Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/navigation-components.md

Demonstrates how to use the Pagination component to manage page navigation.

```typescript
import { Pagination } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function PaginatedList() {
  const [page, setPage] = useState(1);
  const totalPages = 10;

  return (
    <>
      {/* Page content here */}
      <Pagination
        currentPage={page}
        totalPages={totalPages}
        onChange={setPage}
      />
    </>
  );
}
```

--------------------------------

### Navigation Components

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Components for navigation, including Link, TabsList, SegmentedControl, Pagination, CompactPagination, and Breadcrumbs. Examples illustrate basic usage of Link, TabsList, SegmentedControl, Pagination, and Breadcrumbs.

```typescript
import {
  Link,              // Semantic anchor
  TabsList,          // Tab navigation
  SegmentedControl,  // Button group (single select)
  Pagination,        // Numbered page nav
  CompactPagination, // Minimal page nav
  Breadcrumbs,       // Hierarchical breadcrumbs
} from '@telegram-apps/telegram-ui';

// Navigation examples
<Link href="/page">Go to page</Link>

<TabsList activeTab="home" onChange={setTab}>
  <TabsList.Item value="home">Home</TabsList.Item>
  <TabsList.Item value="about">About</TabsList.Item>
</TabsList>

<SegmentedControl value="list" onChange={setView}>
  <SegmentedControl.Item value="list">List</SegmentedControl.Item>
  <SegmentedControl.Item value="grid">Grid</SegmentedControl.Item>
</SegmentedControl>

<Pagination currentPage={1} totalPages={10} onChange={setPage} />

<Breadcrumbs separator="slash">
  <Link href="/">Home</Link>
  <span>Current</span>
</Breadcrumbs>
```

--------------------------------

### Accordion Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example usage of the Accordion component, demonstrating how to manage its expanded state.

```typescript
import { Accordion } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function AccordionExample() {
  const [expanded, setExpanded] = useState(false);

  return (
    <Accordion expanded={expanded} onChange={setExpanded}>
      <Accordion.Summary>Click to expand</Accordion.Summary>
      <Accordion.Content>
        This content is shown when expanded.
      </Accordion.Content>
    </Accordion>
  );
}
```

--------------------------------

### Typography Components

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Components for text styling, such as Typography, Text, Title, Headline, LargeTitle, Subheadline, and Caption. Usage examples demonstrate setting different levels and weights for titles and text.

```typescript
import {
  Typography,        // Base text styling
  Text,              // Body text
  Title,             // Heading (level 1,2,3)
  Headline,          // Large title
  LargeTitle,        // Extra large title
  Subheadline,       // Secondary text
  Caption,           // Small label
} from '@telegram-apps/telegram-ui';

// Typography usage
<Title level="1">Main Heading</Title>
<Title level="2">Subheading</Title>
<Text weight="2">Bold text</Text>
<Caption level="1">Small label</Caption>
```

--------------------------------

### Accessibility Configuration Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Example of configuring accessibility using ARIA attributes on a Button component.

```typescript
import { Button } from '@telegram-apps/telegram-ui';

function AccessibleButton() {
  return (
    <Button
      aria-label="Submit form"
      aria-disabled={false}
    >
      Submit
    </Button>
  );
}
```

--------------------------------

### Form Components

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Components for handling user input, such as FormInput, Input, Textarea, Select, Checkbox, Radio, Switch, Slider, Rating, Chip, PinInput, FileInput, and ColorInput. A basic form example demonstrates the usage of Input, Checkbox, and Button.

```typescript
import {
  FormInput,         // Base form input wrapper
  Input,             // Text input
  Textarea,          // Multi-line text
  Select,            // Dropdown select
  Multiselect,       // Multi-select dropdown
  Checkbox,          // Checkbox input
  Radio,             // Radio button
  Switch,            // Toggle switch
  Slider,            // Range slider
  Rating,            // Star rating
  Chip,              // Tag/label
  PinInput,          // PIN/OTP input
  FileInput,         // File upload
  ColorInput,        // Color picker
  Selectable,        // Selectable item
  Multiselectable,   // Multi-selectable items
} from '@telegram-apps/telegram-ui';

// Basic form
<form>
  <Input
    type="email"
    header="Email"
    placeholder="email@example.com"
    status="default"
  />
  <Checkbox>Agree to terms</Checkbox>
  <Button type="submit">Submit</Button>
</form>
```

--------------------------------

### CompactPagination Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/navigation-components.md

Shows a minimal pagination control displaying the current page and total pages.

```typescript
import { CompactPagination } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function CompactPaginationExample() {
  const [page, setPage] = useState(1);

  return (
    <CompactPagination
      currentPage={page}
      totalPages={5}
      onChange={setPage}
    />
  );
}
```

--------------------------------

### Block Components

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Components for structuring content, including Accordion, Avatar, Badge, Banner, Button, Card, Cell, Image, List, Placeholder, Section, Steps, and Timeline. Basic usage examples for Button, Card, and Section are provided.

```typescript
import {
  Accordion,         // Expandable container
  Avatar,            // Profile image (with acronym fallback)
  AvatarStack,       // Multiple overlapping avatars
  Badge,             // Small indicator label
  Banner,            // Large info/warning panel
  Blockquote,        // Styled quote
  Button,            // Interactive button
  Card,              // Framed content container
  Cell,              // Flexible list item
  IconButton,        // Icon-only button
  Image,             // Image with fallback
  InlineButtons,     // Horizontal button row
  List,              // Cell container
  Placeholder,       // Empty state
  Section,           // Sectioned content with header/footer
  Steps,             // Progress indicator
  Timeline,          // Event timeline
  IconContainer,     // Icon wrapper
} from '@telegram-apps/telegram-ui';

// Basic usage
<Button mode="filled" size="m" stretched loading={false}>
  Click me
</Button>

<Card type="plain">
  <Card.Cell>Content</Card.Cell>
</Card>

<Section header="Title" footer="Footer">
  <Cell>Item 1</Cell>
  <Cell>Item 2</Cell>
</Section>
```

--------------------------------

### Banner Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example usage of the Banner component to display a warning message.

```typescript
import { Banner } from '@telegram-apps/telegram-ui';

function UpdateNotice() {
  return (
    <Banner
      type="warning"
      header="Update Available"
      description="A new version is ready to install"
    />
  );
}
```

--------------------------------

### UseAppRootContext Hook

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Example of using `useAppRootContext` to access appearance and platform information.

```typescript
import { useAppRootContext } from '@telegram-apps/telegram-ui';

function MyComponent() {
  const { appearance, platform } = useAppRootContext();

  const isDarkMode = appearance === 'dark';

  return (
    <div style={{
      backgroundColor: isDarkMode ? '#1a1a1a' : '#ffffff'
    }}>
      {/* Your content */}
    </div>
  );
}
```

--------------------------------

### TypeScript Import Patterns

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Demonstrates different ways to import components, types, and hooks from Telegram UI.

```typescript
// Import components
import { Button, Input, Modal } from '@telegram-apps/telegram-ui';

// Import types
import type { ButtonProps, InputProps, ModalProps } from '@telegram-apps/telegram-ui';

// Import hooks
import { usePlatform } from '@telegram-apps/telegram-ui';

// Tree-shakeable - only imports what you use
import { Button } from '@telegram-apps/telegram-ui';
```

--------------------------------

### Badge Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example usage of the Badge component, illustrating how to display a small visual indicator or label.

```typescript
import { Badge } from '@telegram-apps/telegram-ui';

function NotificationBadge() {
  return <Badge type="warning">5 new</Badge>;
}
```

--------------------------------

### TypeScript Type Definitions

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Example of importing TypeScript type definitions for components and hooks.

```typescript
import type { AppRootProps, ButtonProps, ModalProps } from '@telegram-apps/telegram-ui';
```

--------------------------------

### Button Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example usage of the Button component with various props like mode, size, stretched, loading, and an icon.

```typescript
import { Button } from '@telegram-apps/telegram-ui';
import { Icon20Send } from '@telegram-apps/telegram-ui/icons';

function ActionButton() {
  const [loading, setLoading] = useState(false);

  const handleClick = async () => {
    setLoading(true);
    await fetch('/api/action');
    setLoading(false);
  };

  return (
    <Button
      mode="filled"
      size="l"
      stretched
      loading={loading}
      onClick={handleClick}
      before={<Icon20Send />}
    >
      Send
    </Button>
  );
}
```

--------------------------------

### Blockquote Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example usage of the Blockquote component to display a quoted text.

```typescript
import { Blockquote } from '@telegram-apps/telegram-ui';

function Quote() {
  return (
    <Blockquote>
      "The only way to do great work is to love what you do." — Steve Jobs
    </Blockquote>
  );
}
```

--------------------------------

### Cell Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example of how to use the Cell component for a chat list item.

```typescript
import { Cell, Avatar, Badge } from '@telegram-apps/telegram-ui';

function ChatListItem() {
  return (
    <Cell
      before={<Avatar src="avatar.jpg" acronym="JD" />}
      after={<span>2:30 PM</span>}
      titleBadge={<Badge>2</Badge>}
    >
      John Doe
      <div slot="hint">Online</div>
    </Cell>
  );
}
```

--------------------------------

### AvatarStack Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example usage of the AvatarStack component, demonstrating how to display multiple avatars in a stacked or overlapped manner.

```typescript
import { Avatar, AvatarStack } from '@telegram-apps/telegram-ui';

function TeamAvatars() {
  return (
    <AvatarStack max={3} size="m">
      <Avatar src="user1.jpg" acronym="J1" />
      <Avatar src="user2.jpg" acronym="J2" />
      <Avatar src="user3.jpg" acronym="J3" />
      <Avatar src="user4.jpg" acronym="J4" />
    </AvatarStack>
  );
}
```

--------------------------------

### Tooltip Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/layout-overlays-components.md

Demonstrates how to use the Tooltip component with an IconButton to display a help message on hover.

```typescript
import { Tooltip, IconButton } from '@telegram-apps/telegram-ui';
import { useRef, useState } from 'react';
import { Icon20Help } from '@telegram-apps/telegram-ui/icons';

function HelpButton() {
  const ref = useRef(null);
  const [show, setShow] = useState(false);

  return (
    <>
      <IconButton
        ref={ref}
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        <Icon20Help />
      </IconButton>
      {show && (
        <Tooltip targetRef={ref} placement="top" mode="dark">
          Click for help
        </Tooltip>
      )}
    </>
  );
}
```

--------------------------------

### Avatar Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example usage of the Avatar component, showing how to display a user's profile picture with fallback text.

```typescript
import { Avatar } from '@telegram-apps/telegram-ui';

function UserProfile() {
  return (
    <Avatar 
      src="https://example.com/avatar.jpg"
      acronym="JS"
      size="l"
    />
  );
}
```

--------------------------------

### Select Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Shows an example of using the Select component for a dropdown with options.

```typescript
import { Select } from '@telegram-apps/telegram-ui';

function CountrySelector() {
  return (
    <Select header="Country">
      <option value="">Select a country</option>
      <option value="us">United States</option>
      <option value="uk">United Kingdom</option>
      <option value="ca">Canada</option>
    </Select>
  );
}
```

--------------------------------

### Server-Side Rendering with Next.js

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Example of setting up Server-Side Rendering (SSR) with Next.js, including a server component and a client component that uses the AppRoot.

```typescript
// App Server Component (Next.js 13+)
import { ReactNode } from 'react';
import ClientApp from './ClientApp';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html>
      <body>
        <ClientApp>{children}</ClientApp>
      </body>
    </html>
  );
}
```

```typescript
// ClientApp.tsx ('use client')
'use client';

import '@telegram-apps/telegram-ui/dist/styles.css';
import { AppRoot } from '@telegram-apps/telegram-ui';

export default function ClientApp({ children }: { children: React.ReactNode }) {
  return (
    <AppRoot>
      {children}
    </AppRoot>
  );
}
```

--------------------------------

### Modal Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/layout-overlays-components.md

Demonstrates how to use the Modal component with a trigger button and custom header.

```typescript
import { Modal, Button, Text } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function ModalExample() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open Modal</Button>
      <Modal
        open={open}
        onOpenChange={setOpen}
        header={<Modal.Header>Confirm Action</Modal.Header>}
      >
        <Text>Are you sure you want to proceed?</Text>
        <Button onClick={() => setOpen(false)}>Confirm</Button>
      </Modal>
    </>
  );
}

```

--------------------------------

### PinInput Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Example usage of the PinInput component for OTP verification.

```typescript
import { PinInput } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function OTPVerification() {
  const [otp, setOtp] = useState('');

  const handleSubmit = () => {
    console.log('OTP:', otp);
  };

  return (
    <>
      <PinInput
        length={6}
        value={otp}
        onChange={setOtp}
      />
      <button onClick={handleSubmit} disabled={otp.length !== 6}>
        Verify
      </button>
    </>
  );
}
```

--------------------------------

### Headline Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/typography-components.md

Example of using the Headline component for large, prominent headings.

```typescript
import { Headline } from '@telegram-apps/telegram-ui';

function PageHeader() {
  return <Headline>Welcome to My App</Headline>;
}
```

--------------------------------

### Divider Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/layout-overlays-components.md

Shows how to use the Divider component to visually separate content sections.

```typescript
import { Divider, Text } from '@telegram-apps/telegram-ui';

function SectionedContent() {
  return (
    <>
      <Text>Section 1 content</Text>
      <Divider />
      <Text>Section 2 content</Text>
    </>
  );
}
```

--------------------------------

### Selectable Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Example usage of the Selectable component for individual item selection.

```typescript
import { Selectable } from '@telegram-apps/telegram-ui';

function SelectableListItem() {
  const [selected, setSelected] = useState(false);

  return (
    <Selectable
      checked={selected}
      onChange={setSelected}
    >
      <span>Item to select</span>
    </Selectable>
  );
}
```

--------------------------------

### Spinner Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/feedback-components.md

Example usage of the Spinner component for displaying a loading indicator.

```typescript
import { Spinner } from '@telegram-apps/telegram-ui';

function LoadingScreen() {
  return <Spinner size="m" />;
}
```

--------------------------------

### Tabbar Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/layout-overlays-components.md

Shows how to implement a bottom navigation bar using the Tabbar component with interactive tab items.

```typescript
import { Tabbar, Cell } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function MainApp() {
  const [tab, setTab] = useState('home');

  return (
    <>
      <div>
        {tab === 'home' && <Cell>Home</Cell>}
        {tab === 'search' && <Cell>Search</Cell>}
        {tab === 'profile' && <Cell>Profile</Cell>}
      </div>

      <Tabbar>
        <Tabbar.Item
          onClick={() => setTab('home')}
          selected={tab === 'home'}
        >
          🏠 Home
        </Tabbar.Item>
        <Tabbar.Item
          onClick={() => setTab('search')}
          selected={tab === 'search'}
        >
          🔍 Search
        </Tabbar.Item>
        <Tabbar.Item
          onClick={() => setTab('profile')}
          selected={tab === 'profile'}
        >
          👤 Profile
        </Tabbar.Item>
      </Tabbar>
    </>
  );
}
```

--------------------------------

### Typography Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/typography-components.md

Demonstrates how to use the Typography component with different weight and capitalization props.

```typescript
import { Typography } from '@telegram-apps/telegram-ui';

function CustomText() {
  return (
    <>
      <Typography weight="1">Light text</Typography>
      <Typography weight="2">Normal text</Typography>
      <Typography weight="3" caps>Bold text</Typography>
    </>
  );
}
```

--------------------------------

### ColorInput Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Example usage of the ColorInput component for theme color selection.

```typescript
import { ColorInput } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function ThemeColorPicker() {
  const [color, setColor] = useState('#007AFF');

  return (
    <ColorInput
      value={color}
      onChange={setColor}
    />
  );
}
```

--------------------------------

### UsePlatform Hook

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Example of using the `usePlatform` hook to detect the current platform within a component.

```typescript
import { usePlatform } from '@telegram-apps/telegram-ui';

function MyComponent() {
  const platform = usePlatform();

  if (platform === 'ios') {
    // iOS-specific rendering
  } else if (platform === 'android') {
    // Android-specific rendering
  }

  return <div>{platform}</div>;
}
```

--------------------------------

### TabsList Component Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/navigation-components.md

Example demonstrating the TabsList component for managing tabbed content.

```typescript
import { TabsList, Cell } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function TabbedContent() {
  const [activeTab, setActiveTab] = useState('recent');

  const tabs = [
    { id: 'recent', label: 'Recent' },
    { id: 'popular', label: 'Popular' },
    { id: 'trending', label: 'Trending' },
  ];

  return (
    <>
      <TabsList activeTab={activeTab} onChange={setActiveTab}>
        {tabs.map((tab) => (
          <TabsList.Item key={tab.id} value={tab.id}>
            {tab.label}
          </TabsList.Item>
        ))}
      </TabsList>
      {activeTab === 'recent' && <Cell>Recent content</Cell>}
      {activeTab === 'popular' && <Cell>Popular content</Cell>}
    </>
  );
}
```

--------------------------------

### Progress Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/feedback-components.md

Example usage of the Progress component to show a linear progress bar, with state management for updates.

```typescript
import { Progress } from '@telegram-apps/telegram-ui';
import { useState, useEffect } from 'react';

function FileUpload() {
  const [progress, setProgress] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => {
      setProgress((p) => Math.min(p + 10, 100));
    }, 500);
    return () => clearInterval(interval);
  }, []);

  return <Progress value={progress} />;
}
```

--------------------------------

### Skeleton Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/feedback-components.md

Example usage of the Skeleton component to create placeholder shimmer effects for loading content.

```typescript
import { Skeleton } from '@telegram-apps/telegram-ui';

function LoadingCard() {
  return (
    <div>
      <Skeleton circle height={40} width={40} />
      <Skeleton count={3} />
    </div>
  );
}
```

--------------------------------

### Popper Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/layout-overlays-components.md

Shows how to use the Popper component to display floating content relative to a target button.

```typescript
import { Popper, Button } from '@telegram-apps/telegram-ui';
import { useRef, useState } from 'react';

function PopperExample() {
  const buttonRef = useRef(null);
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button ref={buttonRef} onClick={() => setOpen(!open)}>
        Show Popper
      </Button>
      {open && (
        <Popper targetRef={buttonRef} placement="bottom">
          <div>Popper content</div>
        </Popper>
      )}
    </>
  );
}

```

--------------------------------

### Input Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Example usage of the Input component for an email form, demonstrating state management for value and status.

```typescript
import { Input } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function EmailForm() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState<'default' | 'error'>('default');

  const handleChange = (e) => {
    const value = e.target.value;
    setEmail(value);
    setStatus(value.includes('@') ? 'default' : 'error');
  };

  return (
    <Input
      type="email"
      header="Email"
      placeholder="Enter your email"
      status={status}
      value={email}
      onChange={handleChange}
    />
  );
}
```

--------------------------------

### Example Usage of Caption Component

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/typography-components.md

Demonstrates how to use the Caption component with an Image component.

```typescript
import { Image, Caption } from '@telegram-apps/telegram-ui';

function Photo() {
  return (
    <>
      <Image src="photo.jpg" alt="Beautiful sunset" />
      <Caption>Photo taken in Santorini, Greece</Caption>
    </>
  );
}
```

--------------------------------

### Chip Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Provides an example of how to use the Chip component for displaying tags and handling deletion.

```typescript
import { Chip } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function TagManager() {
  const [tags, setTags] = useState(['javascript', 'react']);

  return (
    <div>
      {tags.map((tag) => (
        <Chip
          key={tag}
          onDelete={() => setTags(tags.filter((t) => t !== tag))}
        >
          {tag}
        </Chip>
      ))}
    </div>
  );
}
```

--------------------------------

### FixedLayout Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/layout-overlays-components.md

Demonstrates how to use the FixedLayout component to create a fixed action bar at the bottom of the page.

```typescript
import { FixedLayout, Button, InlineButtons } from '@telegram-apps/telegram-ui';

function AppLayout() {
  return (
    <>
      {/* Main content */}
      <div style={{ paddingBottom: '100px' }}>Page content</div>

      {/* Fixed action bar */}
      <FixedLayout filled>
        <InlineButtons mode="filled">
          <Button>Cancel</Button>
          <Button>Submit</Button>
        </InlineButtons>
      </FixedLayout>
    </>
  );
}
```

--------------------------------

### Breadcrumbs Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/navigation-components.md

Illustrates the usage of the Breadcrumbs component for hierarchical navigation.

```typescript
import { Breadcrumbs, Link } from '@telegram-apps/telegram-ui';

function PageBreadcrumbs() {
  return (
    <Breadcrumbs separator="slash">
      <Link href="/">Home</Link>
      <Link href="/products">Products</Link>
      <Link href="/products/electronics">Electronics</Link>
      <span>Laptop</span>
    </Breadcrumbs>
  );
}
```

--------------------------------

### Form with Validation

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

A common recipe for creating a form with email validation using Input and state management.

```typescript
const [email, setEmail] = useState('');
const [error, setError] = useState(false);

const validate = () => {
  setError(!email.includes('@'));
};

<Input
  value={email}
  onChange={(e) => setEmail(e.target.value)}
  status={error ? 'error' : 'default'}
  onBlur={validate}
/>
```

--------------------------------

### CSS Custom Properties

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

List of CSS custom properties for theming Telegram UI.

```css
/* Colors */
--tg-color-bg-primary: background
--tg-color-bg-secondary: secondary background
--tg-color-text-primary: main text
--tg-color-text-secondary: secondary text
--tg-color-accent: primary accent color

/* Safe areas */
--tg-safe-area-inset-top: 0px;
--tg-safe-area-inset-right: 0px;
--tg-safe-area-inset-bottom: 0px;
--tg-safe-area-inset-left: 0px;
```

--------------------------------

### Link Component Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/navigation-components.md

Example of how to use the Link component for internal and external navigation.

```typescript
import { Link } from '@telegram-apps/telegram-ui';

function Navigation() {
  return (
    <>
      <Link href="/about">About</Link>
      <Link href="https://example.com" target="_blank" rel="noopener">
        External Link
      </Link>
    </>
  );
}
```

--------------------------------

### Title Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/typography-components.md

Illustrates using the Title component for different heading levels and with supporting text.

```typescript
import { Title, Text } from '@telegram-apps/telegram-ui';

function Section() {
  return (
    <>
      <Title level="1">Main Heading</Title>
      <Title level="2">Subheading</Title>
      <Title level="3">Minor Heading</Title>
      <Text>Supporting text content goes here.</Text>
    </>
  );
}
```

--------------------------------

### Placeholder Component Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example of using the Placeholder component to display an empty state with a header, description, action button, and an image.

```typescript
import { Placeholder, Button } from '@telegram-apps/telegram-ui';

function EmptyState() {
  return (
    <Placeholder
      header="No Messages"
      description="Start a conversation to see messages here"
      action={<Button mode="filled">New Chat</Button>}
    >
      <img src="empty.svg" alt="" />
    </Placeholder>
  );
}
```

--------------------------------

### Image Component Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Example of how to use the Image component with source, alt text, size, fallback icon, and badge.

```typescript
import { Image, Avatar } from '@telegram-apps/telegram-ui';
import { Icon20User } from '@telegram-apps/telegram-ui/icons';

function ProfileImage() {
  return (
    <Image
      src="profile.jpg"
      alt="Profile"
      size="l"
      fallbackIcon={<Icon20User />}
      badge={<Avatar.Badge />}
    />
  );
}
```

--------------------------------

### Text Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/typography-components.md

Shows the usage of the Text component for standard body text.

```typescript
import { Text } from '@telegram-apps/telegram-ui';

function Article() {
  return (
    <Text>
      This is a standard paragraph of text with appropriate line height and spacing.
    </Text>
  );
}
```

--------------------------------

### Snackbar Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/feedback-components.md

Demonstrates how to use the Snackbar component to display temporary notification messages with an action button.

```typescript
import { Snackbar, Button } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function NotificationDemo() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Show Snackbar</Button>
      <Snackbar
        open={open}
        onOpenChange={setOpen}
        type="success"
        action={<Button size="s" mode="plain">Undo</Button>}
      >
        Action completed successfully
      </Snackbar>
    </>
  );
}

```

--------------------------------

### Checkbox Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Demonstrates how to use the Checkbox component to manage user agreement.

```typescript
import { Checkbox } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function TermsCheckbox() {
  const [agreed, setAgreed] = useState(false);

  return (
    <label>
      <Checkbox
        checked={agreed}
        onChange={(e) => setAgreed(e.target.checked)}
      />
      <span>I agree to the terms and conditions</span>
    </label>
  );
}
```

--------------------------------

### Subheadline Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/typography-components.md

Shows how to use the Subheadline component for smaller secondary text, alongside a Title.

```typescript
import { Title, Subheadline } from '@telegram-apps/telegram-ui';

function Card() {
  return (
    <>
      <Title>Card Title</Title>
      <Subheadline>Secondary information</Subheadline>
    </>
  );
}
```

--------------------------------

### VisuallyHidden Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/service-components.md

Demonstrates how to use the VisuallyHidden component to hide content visually while keeping it accessible to screen readers.

```typescript
import { Checkbox, VisuallyHidden } from '@telegram-apps/telegram-ui';

function AccessibleCheckbox() {
  return (
    <label>
      <VisuallyHidden Component="input" type="checkbox" />
      <span>I agree to the terms</span>
    </label>
  );
}
```

--------------------------------

### Radio Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Shows how to use the Radio component for selecting one option from a group.

```typescript
import { Radio } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function OptionSelector() {
  const [selected, setSelected] = useState('option1');

  return (
    <div>
      <label>
        <Radio
          name="options"
          value="option1"
          checked={selected === 'option1'}
          onChange={(e) => setSelected(e.target.value)}
        />
        Option 1
      </label>
      <label>
        <Radio
          name="options"
          value="option2"
          checked={selected === 'option2'}
          onChange={(e) => setSelected(e.target.value)}
        />
        Option 2
      </label>
    </div>
  );
}
```

--------------------------------

### Form Handling Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/index.md

Demonstrates how to handle form submissions using Input and Button components, including basic email validation.

```typescript
import { Input, Button } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function MyForm() {
  const [email, setEmail] = useState('');
  const [status, setStatus] = useState<'default' | 'error'>('default');

  const handleSubmit = (e) => {
    e.preventDefault();
    if (!email.includes('@')) {
      setStatus('error');
    } else {
      // Submit form
    }
  };

  return (
    <form onSubmit={handleSubmit}>
      <Input
        type="email"
        header="Email"
        value={email}
        onChange={(e) => setEmail(e.target.value)}
        status={status}
      />
      <Button stretched mode="filled" type="submit">
        Submit
      </Button>
    </form>
  );
}

```

--------------------------------

### FileInput Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Example usage of the FileInput component for image uploads.

```typescript
import { FileInput } from '@telegram-apps/telegram-ui';

function ImageUploader() {
  const handleFileSelect = (files: FileList) => {
    const file = files?.[0];
    if (file) {
      const reader = new FileReader();
      reader.onload = (e) => {
        console.log('File selected:', file.name);
      };
      reader.readAsDataURL(file);
    }
  };

  return (
    <FileInput
      accept="image/*"
      onChange={handleFileSelect}
    />
  );
}
```

--------------------------------

### Modal Dialog Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/index.md

Shows how to implement a modal dialog using the Modal component, with a button to open and close it.

```typescript
import { Modal, Button } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function ConfirmDialog() {
  const [open, setOpen] = useState(false);

  return (
    <>
      <Button onClick={() => setOpen(true)}>Open</Button>
      <Modal open={open} onOpenChange={setOpen}>
        <Modal.Header>Confirm</Modal.Header>
        <p>Are you sure?</p>
        <Button onClick={() => setOpen(false)}>OK</Button>
      </Modal>
    </>
  );
}

```

--------------------------------

### Textarea Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Example usage of the Textarea component for a comment form.

```typescript
import { Textarea } from '@telegram-apps/telegram-ui';

function CommentForm() {
  return (
    <Textarea
      header="Your Comment"
      placeholder="Write your thoughts..."
      rows={4}
    />
  );
}
```

--------------------------------

### Multiselectable Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/form-components.md

Example usage of the Multiselectable component for multiple item selection.

```typescript
import { Multiselectable } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function MultiSelectList() {
  const [selected, setSelected] = useState([false, false, false]);
  const items = ['Item 1', 'Item 2', 'Item 3'];

  return (
    <Multiselectable
      checked={selected}
      onChange={setSelected}
    >
      {items.map((item) => (
        <div key={item}>{item}</div>
      ))}
    </Multiselectable>
  );
}
```

--------------------------------

### Wrap with AppRoot

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/README.md

Wrap your application with AppRoot and use components like Button.

```typescript
import { AppRoot, Button } from '@telegram-apps/telegram-ui';

export default function App() {
  return (
    <AppRoot>
      <Button mode="filled">Hello World</Button>
    </AppRoot>
  );
}
```

--------------------------------

### Custom Platform and Appearance

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/configuration.md

Configuring AppRoot with a specific platform (iOS) and appearance (dark).

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

export function App() {
  return (
    <AppRoot platform="ios" appearance="dark">
      {/* Your app components */}
    </AppRoot>
  );
}
```

--------------------------------

### AppRoot Example Usage

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/service-components.md

Demonstrates how to use the AppRoot component to wrap an entire application, managing platform detection, appearance, and portal rendering context.

```typescript
import { AppRoot, Button, Placeholder } from '@telegram-apps/telegram-ui';
import '@telegram-apps/telegram-ui/dist/styles.css';

export function App() {
  return (
    <AppRoot>
      <Placeholder header="Welcome" description="This is a Telegram Mini App" />
      <Button>Click me</Button>
    </AppRoot>
  );
}
```

--------------------------------

### List with Cells Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/index.md

Illustrates how to create a list of items using the List, Cell, Avatar, and Badge components.

```typescript
import { List, Cell, Avatar, Badge } from '@telegram-apps/telegram-ui';

function UserList() {
  return (
    <List>
      <Cell before={<Avatar acronym="JD" />}>John Doe</Cell>
      <Cell before={<Avatar acronym="JS" />} titleBadge={<Badge>Admin</Badge>}>Jane Smith</Cell>
      <Cell before={<Avatar acronym="BM" />}>Bob Miller</Cell>
    </List>
  );
}

```

--------------------------------

### HorizontalScroll Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/service-components.md

Example usage of the HorizontalScroll component to create a scrollable container for images.

```typescript
import { HorizontalScroll } from '@telegram-apps/telegram-ui';

function ScrollableImages() {
  return (
    <HorizontalScroll>
      <img src="image1.jpg" />
      <img src="image2.jpg" />
      <img src="image3.jpg" />
    </HorizontalScroll>
  );
}
```

--------------------------------

### Steps Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Demonstrates how to use the Steps component to display progress through a multi-step process. It shows state management for the current step and mapping children to represent each step.

```typescript
import { Steps } from '@telegram-apps/telegram-ui';
import { useState } from 'react';

function Wizard() {
  const [step, setStep] = useState(0);
  const steps = ['Personal', 'Address', 'Payment', 'Review'];

  return (
    <>
      <Steps step={step}>
        {steps.map((_, i) => <div key={i} />)}
      </Steps>
      {/* Step content here */}
    </>
  );
}
```

--------------------------------

### Service Components

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Foundation components like AppRoot, RootRenderer, Tappable, VisuallyHidden, and HorizontalScroll. AppRoot is used to wrap the entire application and requires platform and appearance props.

```typescript
// Foundation components
import {
  AppRoot,           // Root context provider
  RootRenderer,      // Portal renderer
  Tappable,          // Interactive base component
  VisuallyHidden,    // Accessible hidden content
  HorizontalScroll,  // Horizontal scrolling container
} from '@telegram-apps/telegram-ui';

// AppRoot wraps entire app
<AppRoot platform="ios" appearance="dark">
  {/* Your app */}
</AppRoot>
```

--------------------------------

### CircularProgress Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/feedback-components.md

Example usage of the CircularProgress component for displaying circular loading or progress indicators.

```typescript
import { CircularProgress } from '@telegram-apps/telegram-ui';

function Processing() {
  return <CircularProgress value={75} size={64} />;
}
```

--------------------------------

### Wrap your app

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/index.md

Wrap your application with the AppRoot component to provide context and functionality.

```typescript
export function App() {
  return (
    <AppRoot>
      {/* Your components here */}
    </AppRoot>
  );
}
```

--------------------------------

### Import styles and AppRoot

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/index.md

Import the necessary styles and the AppRoot component from the telegram-ui package.

```typescript
import '@telegram-apps/telegram-ui/dist/styles.css';
import { AppRoot } from '@telegram-apps/telegram-ui';
```

--------------------------------

### Typography Props

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Interface definition for Typography component props.

```typescript
interface TypographyProps {
  weight?: '1' | '2' | '3';
  caps?: boolean;
  Component?: ElementType;
  plain?: boolean;
}
```

--------------------------------

### Spinner Props

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Interface definition for Spinner component props.

```typescript
interface SpinnerProps {
  size: 's' | 'm' | 'l';
}
```

--------------------------------

### Button Props

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/quick-reference.md

Interface definition for Button component props.

```typescript
interface ButtonProps {
  size?: 's' | 'm' | 'l';
  mode?: 'filled' | 'bezeled' | 'plain' | 'gray' | 'outline' | 'white';
  stretched?: boolean;
  loading?: boolean;
  disabled?: boolean;
  before?: ReactNode;
  after?: ReactNode;
  Component?: ElementType;
}
```

--------------------------------

### Timeline Component Example

Source: https://github.com/telegram-mini-apps-dev/telegramui/blob/main/_autodocs/api-reference/blocks-components.md

Illustrates the usage of the Timeline component to display events in chronological order. It shows how to set the mode (vertical/horizontal) and render timeline items.

```typescript
import { Timeline } from '@telegram-apps/telegram-ui';

function EventTimeline() {
  return (
    <Timeline mode="vertical">
      <div>Event 1 - Jan 1</div>
      <div>Event 2 - Jan 15</div>
      <div>Event 3 - Feb 1</div>
    </Timeline>
  );
}
```