### CDN Setup with esm.sh for VKUI

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/install.mdx

Example of how to use VKUI with esm.sh via HTML links and import maps. This method is recommended for quick prototyping.

```html
<link rel="stylesheet" href="https://esm.sh/@vkontakte/vkui@7/dist/vkui.css" />
<script type="importmap">
  {
    "imports": {
      "react": "https://esm.sh/react@19/",
      "react-dom/": "https://esm.sh/react-dom@19/",
      "@vkontakte/vkui": "https://esm.sh/@vkontakte/vkui@7/"
    }
  }
</script>
<script type="module">
  import React from 'react';
  import { createRoot } from 'react-dom/client';
  import { Button } from '@vkontakte/vkui';

  const root = createRoot(document.getElementById('root'));
  root.render(React.createElement(Button, null, 'Кнопка'));
</script>
```

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

### Install Playwright Browsers

Source: https://github.com/vkcom/vkui/blob/master/docs/TESTING.md

Installs necessary browsers for Playwright testing. This command should be run before starting Playwright tests.

```bash
yarn run playwright:install
```

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

### VKUI Hello World Example

Source: https://github.com/vkcom/vkui/blob/master/README.md

A basic 'Hello World' example demonstrating the structure of a VKUI application. It includes essential components like ConfigProvider, AdaptivityProvider, AppRoot, and a simple View with a Panel.

```jsx
import * as React from 'react';
import { createRoot } from 'react-dom/client';
import {
  AdaptivityProvider,
  ConfigProvider,
  AppRoot,
  SplitLayout,
  SplitCol,
  View,
  Panel,
  PanelHeader,
  Header,
  Group,
  SimpleCell,
  usePlatform
} from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

const Example = () => {
  const platform = usePlatform();

  return (
    <AppRoot>
      <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />}>
        <SplitCol autoSpaced>
          <View activePanel="main">
            <Panel id="main">
              <PanelHeader>VKUI</PanelHeader>
              <Group header={<Header size="s">Items</Header>}>
                <SimpleCell>Hello</SimpleCell>
                <SimpleCell>World</SimpleCell>
              </Group>
            </Panel>
          </View>
        </SplitCol>
      </SplitLayout>
    </AppRoot>
  );
};

const container = document.getElementById('root');
const root = createRoot(container); // createRoot(container!) if you use TypeScript
root.render(
  <ConfigProvider>
    <AdaptivityProvider>
      <Example />
    </AdaptivityProvider>
  </ConfigProvider>,
);

```

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

### Install VKUI with pnpm

Source: https://github.com/vkcom/vkui/blob/master/README.md

Use this command to install the VKUI library using pnpm.

```sh
pnpm add @vkontakte/vkui
```

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

### Install VKUI with yarn

Source: https://github.com/vkcom/vkui/blob/master/README.md

Use this command to install the VKUI library using yarn.

```sh
yarn add @vkontakte/vkui
```

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

### Run Project in Development Mode

Source: https://github.com/vkcom/vkui/blob/master/examples/vkui-vite-ts/README.md

Start the development server to see your application in real-time.

```bash
yarn dev
```

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

### Install VKUI with npm

Source: https://github.com/vkcom/vkui/blob/master/README.md

Use this command to install the VKUI library using npm.

```sh
npm i @vkontakte/vkui
```

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

### Install Dependencies

Source: https://github.com/vkcom/vkui/blob/master/examples/vkui-vite-ts/README.md

Install project dependencies using Yarn.

```bash
yarn install
```

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

### Basic ContentCard Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/content-card.mdx

A basic example of ContentCard with an image, text blocks, and a click handler. Use this for standard card layouts.

```jsx
<ContentCard
    onClick={() => {}}
    src="https://images.unsplash.com/photo-1603988492906-4fb0fb251cf8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1600&q=80"
    alt="Picture of brown and gray mountains under blue sky during daytime photo"
    overTitle="unsplash"
    title="brown and gray mountains under blue sky during daytime photo"
    description="Mountain changji"
    caption="Photo by Siyuan on Unsplash"
    maxHeight={100}
  />
```

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

### UsersStack with Block Start Avatars and Count

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/users-stack.mdx

Example of UsersStack with avatars positioned above the text ('block-start') and a participant counter. Recommended to use with size='m'.

```jsx
<UsersStack
  avatarsPosition="block-start"
  size="m"
  visibleCount={2}
  count={3}
  photos={[
    'https://avatars.githubusercontent.com/u/7431217?s=50',
    'https://avatars.githubusercontent.com/u/61377022?s=50',
  ]}>
  Виктория, Эльдар и ещё 3 человека пойдут на это мероприятие
</UsersStack>
```

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

### Install VKUI Docs Theme

Source: https://github.com/vkcom/vkui/blob/master/packages/vkui-docs-theme/README.md

Install the necessary packages for VKUI Docs Theme using npm, yarn, or pnpm.

```sh
# npm
npm i react react-dom next nextra @vkontakte/vkui-docs-theme
# yarn
yarn add react react-dom next nextra @vkontakte/vkui-docs-theme
# or pnpm
pnpm add react react-dom next nextra @vkontakte/vkui-docs-theme
```

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

### Basic Pagination Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/pagination.mdx

Displays a basic Pagination component with the current page and total number of pages.

```jsx
<Pagination currentPage={5} totalPages={10} />
```

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

### Demonstrating ScreenSpinner States

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/screen-spinner.mdx

Provides examples of ScreenSpinner in various states: loading, cancelable, done, error, and custom with a specific icon.

```jsx
<ScreenSpinner.Container>
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>
<ScreenSpinner.Container state="cancelable">
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>
<ScreenSpinner.Container state="done">
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>
<ScreenSpinner.Container state="error">
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>
<ScreenSpinner.Container state="custom" customIcon={<Icon56CheckCircleOutline />}>
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>
```

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

### Complex Skeleton Example in Cell and Text Block

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/skeleton.mdx

Demonstrates a complex Skeleton setup within a cell and a text block, simulating a loading state for a group of items. It shows how to use Skeleton for avatars, subtitles, and main text.

```jsx
<Group>
  <SimpleCell
    before={<Skeleton width={36} height={36} borderRadius="50%" />}
    subtitle={<Skeleton width={90} />}
  >
    <Skeleton width={120} />
  </SimpleCell>
  <Div>
    <Skeleton width="100%" />
    <Skeleton width="100%" />
    <Skeleton width="75%" />
  </Div>
</Group>
```

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

### Basic DateInput Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/date-input.mdx

A basic DateInput component for manual date entry and calendar selection.

```jsx
<DateInput />
```

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

### Import and Use Button Component

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/usage.mdx

Demonstrates how to import and use the Button component from VKUI. Ensure you have installed the VKUI library.

```jsx
import { Button } from '@vkontakte/vkui';

export default function App() {
  return (
    <Button mode="outline" size="l">
      Привет, мир!
    </Button>
  );
}
```

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

### Minimal FocusTrap Setup

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/focus-trap.mdx

Shows the most basic implementation of FocusTrap. Ensure the root element has `tabIndex={-1}` to be focusable.

```jsx
const focusTrapRef = React.useRef(null);

return (
  <FocusTrap rootRef={focusTrapRef} autoFocus restoreFocus>
    <div ref={focusTrapRef} tabIndex={-1} style={{ padding: 16 }}>
      <Flex direction="column" gap="m">
        <Input placeholder="Ввод текста" />
        <Button>Отправить</Button>
      </Flex>
    </div>
  </FocusTrap>
);
```

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

### Install VKUI MCP Server Locally

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/mcp.mdx

Install the VKUI MCP server as a development dependency in your project using npm or yarn. This allows you to fix the version used in your project.

```bash
npm install -D @vkontakte/vkui-mcp
# или
yarn add -D @vkontakte/vkui-mcp
```

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

### Basic Screen Navigation with View

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/navigation.mdx

Implement basic screen transitions within a scenario using the View component. This example demonstrates switching between two panels using buttons.

```jsx
import { useState } from 'react';
import { View, Panel, PanelHeader, Button } from '@vkontakte/vkui';

export const Router = () => {
  const [activePanel, setActivePanel] = useState('panel-1');
  return (
    <View activePanel={activePanel}>
      <Panel id="panel-1">
        <PanelHeader>Панель 1</PanelHeader>
        <Button onClick={() => setActivePanel('panel-2')}>Перейти к панели 2</Button>
      </Panel>
      <Panel id="panel-2">
        <PanelHeader>Панель 2</PanelHeader>
        <Button onClick={() => setActivePanel('panel-1')}>Перейти к панели 1</Button>
      </Panel>
    </View>
  );
};
```

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

### Basic SubnavigationBar Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/subnavigation-bar.mdx

A basic SubnavigationBar with a set of buttons for quick section switching. Use this for simple navigation within a section.

```jsx
<SubnavigationBar>
    <SubnavigationButton onClick={() => {}}>Мой размер</SubnavigationButton>
    <SubnavigationButton onClick={() => {}}>В наличии</SubnavigationButton>
    <SubnavigationButton onClick={() => {}}>Высокий рейтинг</SubnavigationButton>
    <SubnavigationButton onClick={() => {}}>Избранное</SubnavigationButton>
  </SubnavigationBar>
```

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

### Basic Navigation with Panels and Views

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/usage.mdx

Illustrates implementing basic navigation between screens using VKUI's SplitLayout, SplitCol, View, and Panel components. This setup is suitable for mobile applications.

```jsx
import { useState } from 'react';
import {
  SplitLayout,
  SplitCol,
  View,
  Panel,
  PanelHeader,
  Group,
  CellButton,
  usePlatform,
} from '@vkontakte/vkui';

const [activePanel, setActivePanel] = useState('feed-panel');
const platform = usePlatform();

return (
  <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />}>
    <SplitCol width="100%" stretchedOnMobile autoSpaced>
      <View activePanel={activePanel}>
        <Panel id="feed-panel">
          <PanelHeader>Лента</PanelHeader>
          <Placeholder
            action={
              <Button onClick={() => setActivePanel('profile-panel')}>Перейти в Профиль</Button>
            }
            stretched
          >
            <Icon56NewsfeedOutline />
          </Placeholder>
        </Panel>
        <Panel id="profile-panel">
          <PanelHeader>Профиль</PanelHeader>
          <Placeholder
            action={<Button onClick={() => setActivePanel('feed-panel')}>Вернуться в Ленту</Button>}
            stretched
          >
            <Icon56UserCircleOutline />
          </Placeholder>
        </Panel>
      </View>
    </SplitCol>
  </SplitLayout>
```

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

### Basic Accordion Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/accordion.mdx

A simple Accordion with a summary and content. Use this for basic collapsible content sections.

```jsx
import { Accordion, Div } from '@vkontakte/vkui';

<Accordion>
  <Accordion.Summary>Новый дизайн профиля</Accordion.Summary>
  <Accordion.Content>
    <Div>
      Внешний вид профиля ВКонтакте действительно обновился. К прежнему варианту вернуться уже не
      получится. В центре внимания нового дизайна — личность человека и его увлечения. Новый
      формат профиля особенно удобен для авторов контента и станет для них цифровой визиткой.
    </Div>
  </Accordion.Content>
</Accordion>
```

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

### Input Component Structure

Source: https://github.com/vkcom/vkui/blob/master/docs/CONTRIBUTING.md

Shows an example of an Input component where the `input` element is the main element, not its wrapper, for prop handling.

```jsx
import styles from './Input.module.css';

const Input = ({ mode, style, className, ...restProps }) => {
  return (
    <div
      className={classNames(className, styles.host, mode === 'default' && styles.modeDefault)}
      style={style}
    >
      <input {...restProps} />
    </div>
  );
};
```

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

### Gradient Overlay Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/gradient.mdx

Demonstrates using the Gradient component as an overlay on top of content for visual accent. The gradient is positioned absolutely to cover the entire area.

```jsx
<Gradient
    mode="overlay"
    to="top"
    style={{ position: 'absolute', top: 0, bottom: 0, left: 0, right: 0 }}
  />
  <Placeholder
    icon={<Avatar size={56} />}
    title="Алексей Мазелюк"
    action={<Button size="m">Редактировать</Button>}
  >
    Учащийся
  </Placeholder>
```

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

### Configure Next.js Scripts

Source: https://github.com/vkcom/vkui/blob/master/packages/vkui-docs-theme/README.md

Add scripts to your package.json for running Next.js development, build, and start commands.

```json
"scripts": {
  "dev": "next",
  "build": "next build",
  "start": "next start"
}
```

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

### Basic WriteBar with Attach Icon

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/write-bar.mdx

A simple WriteBar example with an attachment icon in the 'before' slot. Use this for a straightforward message input with a single leading action.

```jsx
<WriteBar before={<WriteBarIcon mode="attach" />} placeholder="Введите сообщение..." />
```

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

### Live Debugging with Playwright

Source: https://github.com/vkcom/vkui/blob/master/docs/TESTING.md

Starts Playwright DevTools and the specified browser for live debugging. Configure the desired project and test file in the `.env` file before running.

```bash
yarn test:e2e:ci --debug
```

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

### Banner with Avatar, Title, Subtitle, and Button

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/banner.mdx

A basic example of a Banner displaying an avatar, title, subtitle, and a primary action button.

```jsx
<Banner
    before={<Avatar size={48} initials="ЕХ" />}
    title="Новое уведомление"
    subtitle="У вас 5 новых сообщений"
    actions={<Button mode="primary">Просмотреть</Button>}
  />
```

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

### FormItem with Label, Input, and Bottom Hint

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/form-item.mdx

This example demonstrates a complete FormItem structure including a label, input, and a hint message in the `bottom` prop. The `bottomId` should be linked to an accessible element if needed.

```jsx
const id = React.useId()
const bottomId = React.useId()

return (
  <FormItem
    htmlFor={id}
    top="E-mail"
    bottom="Мы не передаём вашу почту третьим лицам"
    bottomId={bottomId}
  >
    <Input type="email" id={id} name="email" aria-labelledby={bottomId} />
  </FormItem>
);
```

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

### Custom Snackbar Without Additional Props Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/use-snackbar-manager.mdx

Demonstrates rendering a simple custom snackbar component directly via `openCustom` without passing any extra data.

```jsx
const SnackbarComponent = ({
  update,
  close,
  snackbarProps,
}: CustomSnackbar.Props) => {
  return (
    <Snackbar action="Хорошо" {...snackbarProps}>
      Сообщение отправлено
    </Snackbar>
  );
};

const [snackbarApi, snackbarHolder] = useSnackbarManager();

const showSnackbar = () => {
  snackbarApi.openCustom(SnackbarComponent);
};

return (
  <>
    <Button onClick={showSnackbar}>Показать уведомление</Button>
    {snackbarHolder}
  </>
);
```

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

### Setting Platform Theme with ConfigProvider

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/themes.mdx

Example of how to explicitly set the platform theme to 'ios' using the ConfigProvider component. This ensures components visually adapt to the iOS platform.

```jsx
import { ConfigProvider, AdaptivityProvider, AppRoot, SimpleCell } from '@vkontakte/vkui';
import '@vkontakte/vkui/dist/vkui.css';

<ConfigProvider platform="ios">
  <AdaptivityProvider>
    <AppRoot>
      <SimpleCell>Темным-темно</SimpleCell>
    </AppRoot>
  </AdaptivityProvider>
</ConfigProvider>
```

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

### WriteBar with Before, After, and InlineAfter Elements

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/write-bar.mdx

An example of WriteBar configured with elements in the 'before', 'after', and 'inlineAfter' slots. This allows for multiple actions and indicators around the input field.

```jsx
<WriteBar
  before={<WriteBarIcon mode="attach" />}
  after={
    <WriteBarIcon label="Записать голосовое сообщение">
      <Icon24VoiceOutline />
    </WriteBarIcon>
  }
  inlineAfter={
    <WriteBarIcon label="Смайлы и стикеры">
      <Icon24SmileOutline />
    </WriteBarIcon>
  }
  placeholder="Введите сообщение..."
/>
```

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

### usePagination Hook Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/pagination.mdx

Manually renders pagination elements using the usePagination hook. This provides full control over the UI and integration with custom logic.

```jsx
const items = usePagination({
  totalPages: 10,
  currentPage: 5,
});

// items → [1, 'start-ellipsis', 4, 5, 6, 'end-ellipsis', 10]

return (
  <nav>
    {items.map((item) =>
      item === 'start-ellipsis' || item === 'end-ellipsis' ? (
        <span key={item}>...</span>
      ) : (
        <button key={item}>{item}</button>
      ),
    )}
  </nav>
);
```

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

### Basic Onboarding Tooltip

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/onboarding-tooltip.mdx

Demonstrates the basic usage of OnboardingTooltip for a one-time introduction to a new feature. It wraps an element and displays a description when shown.

```jsx
import { OnboardingTooltipWrapper } from '@/components/wrappers';

<Playground Wrapper={OnboardingTooltipWrapper}>
  <OnboardingTooltip shown description="Обновлённый раздел поможет найти друзей">
    <Icon20UserCheckOutline />
  </OnboardingTooltip>
</Playground>
```

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

### Tooltip with aria-hidden and disableTriggerOnFocus

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/tooltip.mdx

Example of a Tooltip configured with `aria-hidden="true"` and `disableTriggerOnFocus`. This setup restricts activation solely to hover events, making it suitable for purely decorative elements.

```jsx
<Tooltip
  aria-hidden="true"
  disableTriggerOnFocus
  description="Какая-то информация"
  aria-label="Тултип с какой-то информацией"
>
  <Button>Якорь</Button>
</Tooltip>
```

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

### Adaptive Tabbar using useAdaptivityConditionalRender

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/epic.mdx

This example demonstrates how to conditionally render a `Tabbar` only on tablet and larger screens using the `useAdaptivityConditionalRender` hook. This is useful for adapting UI to different device sizes.

```jsx
import { useAdaptivityConditionalRender } from '@vkontakte/vkui';
import { Epic, Tabbar, TabbarItem, View, Panel, PanelHeader, Placeholder } from '@vkontakte/vkui';
import { Icon28NewsfeedOutline, Icon28UserCircleOutline } from '@vkontakte/icons';

export default function App() {
  const { viewWidth } = useAdaptivityConditionalRender();
  const [activeStory, setActiveStory] = React.useState('feed');

  return (
    <Epic
      activeStory={activeStory}
      tabbar={
        viewWidth.tabletPlus && (
          <Tabbar className={viewWidth.tabletPlus.className}>
            <TabbarItem label="Лента" selected onClick={() => setActiveStory('feed')}>
              <Icon28NewsfeedOutline />
            </TabbarItem>
            <TabbarItem label="Профиль" onClick={() => setActiveStory('profile')}>
              <Icon28UserCircleOutline />
            </TabbarItem>
          </Tabbar>
        )
      }
    >
      <View id="feed" activePanel="feed-panel">
        <Panel id="feed-panel">
          <PanelHeader>Лента</PanelHeader>
          <Placeholder stretched>
            <Icon28NewsfeedOutline />
          </Placeholder>
        </Panel>
      </View>
      <View id="profile" activePanel="profile-panel">
        <Panel id="profile-panel">
          <PanelHeader>Профиль</PanelHeader>
          <Placeholder stretched>
            <Icon28UserCircleOutline />
          </Placeholder>
        </Panel>
      </View>
    </Epic>
  );
}
```

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

### Build Project for Production

Source: https://github.com/vkcom/vkui/blob/master/examples/vkui-vite-ts/README.md

Generate a production-ready build of your application.

```bash
yarn build
```

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

### App Layout Setup

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/navigation.mdx

Set up the main application layout using SplitLayout and SplitCol for safe area compliance and proper spacing on different screen sizes. This wrapper should be placed near the application's root.

```jsx
import { SplitLayout, SplitCol, PanelHeader } from '@vkontakte/vkui';

export default function App() {
  return (
    <SplitLayout header={<PanelHeader delimiter="none" />}>
      <SplitCol stretchedOnMobile autoSpaced>
        {/* ... */}
      </SplitCol>
    </SplitLayout>
  );
};
```

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

### Header with Various Icon Slots and Controls

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/group.mdx

An advanced example of the Header component showcasing usage of `before`, `beforeTitle`, `afterTitle`, `beforeSubtitle`, `afterSubtitle` slots for icons, along with a subtitle, indicator, and a link.

```jsx
<Group
    mode="card"
    separator="hide"
    header={
      <Header
        before={<Icon28UserCircleFillBlue />}
        beforeTitle={<Icon16LockOutline />}
        afterTitle={<Icon16UnlockOutline />}
        beforeSubtitle={<Icon12Tag />}
        afterSubtitle={<Icon12Fire />}
        subtitle="SOHN — Conrad"
        subtitleComponent="h3"
        indicator={
          <Counter size="s" mode="primary" appearance="accent-red">
            3
          </Counter>
        }
        after={<Link href="#">Показать все</Link>}
      >
        Плейлисты
      </Header>
    }
  >
    <Div>
      <Text>Контент</Text>
    </Div>
  </Group>
```

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

### Using CSS Variables for Theming

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/themes.mdx

Demonstrates how to apply theme colors and backgrounds using CSS variables provided by VKUI.

```css
.SomeComponent {
  color: var(--vkui--color_text_primary);
  background: var(--vkui--color_background_content);
}
```

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

### Basic CellButton Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/cell-button.mdx

A basic example of CellButton used for an action within a list.

```jsx
<CellButton onClick={() => {}}>Добавить родственника</CellButton>
```

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

### Vertical Separator Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/separator.mdx

To use a vertical separator, ensure the parent container is a flex container. This example shows vertical separators between links.

```jsx
<Link href="#news">Новости</Link>
<Separator direction="vertical" size="xl" />
<Link href="#calls">Звонки</Link>
<Separator direction="vertical" size="xl" />
<Link href="#friends">Друзья</Link>
```

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

### Playwright Error Example

Source: https://github.com/vkcom/vkui/blob/master/docs/TESTING.md

An example error message from Playwright indicating an issue with resolving an exported component. This often suggests a cache problem.

```sh
vkui-package_vkui-1  | $ playwright test --config playwright-ct.config.ts -u
vkui-package_vkui-1  | 
vkui-package_vkui-1  | Running 10 tests using 2 workers
vkui-package_vkui-1  | 
vkui-package_vkui-1  | vite v4.2.1 building for production...
vkui-package_vkui-1  | transforming...
vkui-package_vkui-1  | Error when using sourcemap for reporting an error: Can't resolve original location of error. 
vkui-package_vkui-1  | ✓ 2616 modules transformed. 
vkui-package_vkui-1  | ✓ built in 3.67s 
vkui-package_vkui-1  | "AccordionE2EPlayground" is not exported by "src/components/Accordion/Accordion.e2e-playground.tsx", imported by "playwright/index.tsx".
```

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

### Creating Wrappers for ModalPage/ModalCard

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/modal-root.mdx

Demonstrates how to create wrapper components for ModalPage and ModalCard. Business logic should be handled within the modal or via useModalRootContext. The example shows fetching data asynchronously and conditionally enabling effects based on the active modal.

```jsx
const SomeAsyncEffect = () => {
  const [data, setData] = useState({});
  useEffect(function fetchData() {
    // Здесь логика, которая должна вызываться при показе окна
    fetch("...")
      .then((r) => r.json())
      .then(setData);
  }, []);
  return <div>{data}</div>;
};

const ModalPageWrapper = ({ id, ...restProps }) => {
  const { activeModal } = useModalRootContext();

  useEffect(
    function enableSomeEffect() {
      if (id === activeModal) {
        // Здесь логика, которая должна вызываться при показе окна
      }
    },
    [id, activeModal]
  );

  return (
    <ModalPage id={id} {...restProps}>
      <SomeAsyncEffect />
    </ModalPage>
  );
};

const App = () => {
  return (
    <ModalRoot activeModal="example-1">
      <ModalPageWrapper id="example-1" />
      {/* или */}
      <ModalPage id="example-2">
        <SomeAsyncEffect />
      </ModalPage>
    </ModalRoot>
  );
};

```

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

### Screenshot Test Example with expectScreenshotClippedToContent

Source: https://github.com/vkcom/vkui/blob/master/docs/TESTING.md

This example demonstrates how to use `expectScreenshotClippedToContent` for taking screenshots in Playwright tests. It shows how multiple calls within the same test generate sequentially numbered screenshots.

```typescript
test('base', ({ expectScreenshotClippedToContent }) => {
  // ...
  await expectScreenshotClippedToContent();
});

test('Example', async ({ expectScreenshotClippedToContent }) => {
  // ...
  await expectScreenshotClippedToContent(); // => мы получим скриншот с названием 'example-android-chromium-light-1-snap.png'
  await expectScreenshotClippedToContent(); // => мы получим скриншот с названием 'example-android-chromium-light-2-snap.png'
});

test.describe('Example', () => {
  test('My AWESOME case description', async ({ expectScreenshotClippedToContent }) => {
    // ...
    await expectScreenshotClippedToContent(); // => мы получим скриншот с названием 'example-android-chromium-light-my-awesome-case-description-1-snap.png'
  });
});
```

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

### Gradient Accessibility - Bad vs Good Practice

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/gradient.mdx

Illustrates incorrect and correct ways to use the Gradient component with text. The bad example places text directly inside the gradient, while the good example separates the gradient and text for better accessibility.

```jsx
// ❌ Плохо (градиент содержит текст)
<Gradient>
 <Text>Важная информация</Text>
</Gradient>

// ✅ Хорошо (текст вынесен отдельно)
<div style={{ position: 'relative' }}>
 <Gradient />
 <Text>Важная информация</Text>
</div>
```

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

### Basic ModalRoot Usage

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/modal-root.mdx

Demonstrates how to set up and use ModalRoot with ModalPage and ModalCard components. Use this to manage the visibility and transitions of different modal views.

```jsx
const [activeModal, setActiveModal] = React.useState(null);

const close = () => setActiveModal(null);

const modalRoot = (
  <ModalRoot activeModal={activeModal} onClose={close}>
    <ModalPage id="modal1" onClose={close}>
      <Placeholder
        action={
          <ButtonGroup mode="vertical" align="center">
            <Button onClick={() => setActiveModal("modal2")}>
              Открыть карточку
            </Button>
            <Button onClick={close}>
              Закрыть
            </Button>
          </ButtonGroup>
        }
      />
    </ModalPage>
    <ModalCard id="modal2" onClose={close}>
      <Placeholder
        action={
          <ButtonGroup mode="vertical" align="center">
            <Button onClick={() => setActiveModal("modal1")}>
              Вернуться назад
            </Button>
            <Button onClick={close}>
              Закрыть
            </Button>
          </ButtonGroup>
        }
      />
    </ModalCard>
  </ModalRoot>
);

return (
  <>
    {modalRoot}
    <Button onClick={() => setActiveModal("modal1")}>Открыть окно</Button>
  </>
);
```

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

### Basic CellButtonGroup Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/cell-button-group.mdx

A group of two CellButtons with a separator for related actions.

```jsx
<CellButtonGroup>
  <CellButton appearance="negative" centered onClick={() => {}}>
    Пожаловаться
  </CellButton>
  <CellButtonGroup.Separator />
  <CellButton centered onClick={() => {}}>
    Отмена
  </CellButton>
</CellButtonGroup>
```

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

### Basic DropZone with File Handling

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/drop-zone.mdx

Demonstrates a basic DropZone that handles file drops and displays the names of the uploaded files. Ensure to prevent default behavior for drag over and drop events.

```jsx
<DropZone.Grid>
  <DropZone
    onDragOver={(event) => {
      event.preventDefault();
    }}
    onDrop={(event) => {
      event.preventDefault();

      const files = event.dataTransfer.files;
      const fileNames = Array.from(files).map((file) => file.name);
      alert(`Файлы: \n${fileNames.join('\n')}`);
    }}
  >
    <Placeholder title="Быстрая отправка">Перенесите файл сюда для быстрой отправки.</Placeholder>
  </DropZone>
</DropZone.Grid>
```

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

### Disabled Switch

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/switch.mdx

An example of a disabled Switch component, preventing user interaction and indicating unavailability.

```jsx
<Switch defaultChecked disabled />
```

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

### Download Template by Cloning Repository

Source: https://github.com/vkcom/vkui/blob/master/examples/vkui-vite-ts/README.md

Clone the VKUI repository and navigate to the template directory.

```bash
git clone https://github.com/VKCOM/VKUI.git
cd VKUI/examples/vkui-vite-ts
```

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

### Demonstrate Adaptive Icon Rendering

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/adaptive-icon-renderer.mdx

Shows how AdaptiveIconRenderer automatically selects icon sizes for 'compact' and 'regular' interface densities. It uses AdaptivityProvider to simulate different densities.

```jsx
<AdaptivityProvider density="compact">
  <Text>Icon size 24</Text>
  <AdaptiveIconRenderer IconCompact={Icon24SmileOutline} IconRegular={Icon28SmileOutline} />
</AdaptivityProvider>
<AdaptivityProvider density="regular">
  <Text>Icon size 28</Text>
  <AdaptiveIconRenderer IconCompact={Icon24SmileOutline} IconRegular={Icon28SmileOutline} />
</AdaptivityProvider>
```

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

### Centered CellButton with Icon

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/cell-button.mdx

Example of a centered CellButton that includes an icon using the `centered` prop and `before` slot.

```jsx
<CellButton onClick={() => {}} centered before={<Icon24Add />}>
    Центрированная кнопка
  </CellButton>
```

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

### Avatar with Custom Gradient Style

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/avatar.mdx

Example of using custom styles for gradient backgrounds on avatars with initials.

```jsx
<Avatar gradientColor="custom" style={{ backgroundImage: 'linear-gradient(...)' }} />
```

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

### Adaptive Icons and Dynamic Actions in WriteBar

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/write-bar.mdx

This example showcases adaptive icons and dynamic behavior in WriteBar based on the input text. It uses `AdaptiveIconRenderer` to switch icons based on platform and input length, providing context-aware actions.

```jsx
const [text, setText] = React.useState('');
const platform = usePlatform();

const SmileOutlineIcon = (
  <AdaptiveIconRenderer
    IconCompact={platform === 'ios' ? Icon28SmileOutline : Icon24SmileOutline}
    IconRegular={Icon28SmileOutline}
  />
);

const VoiceOutlineIcon = (
  <AdaptiveIconRenderer
    IconCompact={platform === 'ios' ? Icon28VoiceOutline : Icon24VoiceOutline}
    IconRegular={Icon28VoiceOutline}
  />
);

const KeyboardBotsOutlineIcon = (
  <AdaptiveIconRenderer
    IconCompact={platform === 'ios' ? Icon28KeyboardBotsOutline : Icon24KeyboardBotsOutline}
    IconRegular={Icon28KeyboardBotsOutline}
  />
);

return (
  <WriteBar
    value={text}
    onChange={(e) => setText(e.target.value)}
    before={<WriteBarIcon mode="attach" />}
    inlineAfter={
      <>
        {text.length === 0 && (
          <WriteBarIcon label="Открыть меню бота">{KeyboardBotsOutlineIcon}</WriteBarIcon>
        )}
        {text.length > 0 && (
          <WriteBarIcon label="Эмоджи и стикеры">{SmileOutlineIcon}</WriteBarIcon>
        )}
      </>
    }
    after={
      <>
        {text.length === 0 && (
          <WriteBarIcon label="Эмоджи и стикеры">{SmileOutlineIcon}</WriteBarIcon>
        )}
        {text.length === 0 && (
          <WriteBarIcon label="Записать голосовое сообщение">{VoiceOutlineIcon}</WriteBarIcon>
        )}
        {text.length > 0 && <WriteBarIcon mode="send" />}
      </>
    }
    placeholder="Сообщение"
  />
);
```

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

### Assembling ScreenSpinner from Subcomponents

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/screen-spinner.mdx

Shows how to construct a ScreenSpinner using its individual subcomponents: Container, Loader, and SwapIcon.

```jsx
<ScreenSpinner.Container>
  <ScreenSpinner.Loader />
  <ScreenSpinner.SwapIcon />
</ScreenSpinner.Container>
```

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

### AI User Prompt for VKUI v8 Migration (Brief)

Source: https://github.com/vkcom/vkui/blob/master/website/content/migrations/migration-v8.mdx

A concise prompt for an AI assistant to check code for VKUI v8 migration. It instructs the AI to use migration targets and apply before/after replacements based on component and prop similarity.

```text
Проверь этот код на миграцию VKUI v8. Действуй так: вызови list_migration_targets, затем для каждого компонента из списка, который есть в моём коде, вызови get_migration_target и примени все рекомендации (замени фрагменты по полям before → after). Не пропускай компоненты: сверяй по именам и пропсам, а не по точному тексту примера.
```

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

### Centering HorizontalCellShowMore

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/horizontal-scroll.mdx

Demonstrates how to center the HorizontalCellShowMore component within its parent using the 'centered' property. By default, it is aligned to the start.

```jsx
<HorizontalCellShowMore centered />
```

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

### TabsItem with Icons

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/tabs.mdx

Demonstrates how to use the TabsItem component with icons in the 'before' and 'after' slots. Icons should match the mode requirements for size.

```jsx
<TabsItem before={<Icon24BugOutline />} after={<Icon16Dropdown />}>
    Фото
  </TabsItem>
```

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

### CellButton with Visually Hidden Text for Accessibility

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/cell-button.mdx

Example of adding visually hidden text to a CellButton for improved screen reader accessibility.

```jsx
<CellButton>
    Создать документ
    <VisuallyHidden>Нажмите Enter для активации</VisuallyHidden>
  </CellButton>
```

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

### Interactive App Navigation Example

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/navigation.mdx

Demonstrates a complex navigation structure with nested Views, Panels, and scenarios. It utilizes hooks like useAdaptivityConditionalRender and usePlatform for responsive design. This snippet is suitable for building multi-panel applications.

```tsx
const App = () => {
  const [activeScenario, setActiveScenario] = useState('main-menu-scenario');
  const goBack = () => setActiveScenario('main-menu-scenario');

  return (
    <Root activeView={activeScenario}>
      <View id="main-menu-scenario" activePanel="main-menu-panel">
        <Panel id="main-menu-panel">
          <PanelHeader>{label}</PanelHeader>
          <Group>
            <Cell
              before={<Icon24NotificationOutline />}
              onClick={() => setActiveScenario('notification-scenario')}
            >
              Уведомления
            </Cell>
            <Cell
              before={<Icon24InfoCircleOutline />}
              onClick={() => setActiveScenario('about-scenario')}
            >
              О приложении
            </Cell>
            <Footer Component="div">2 раздела</Footer>
          </Group>
        </Panel>
      </View>
      <SettingsScenario id="notification-scenario" goBack={goBack} />
      <AboutScenario id="about-scenario" goBack={goBack} />
    </Root>
  );
};

const { viewWidth } = useAdaptivityConditionalRender();
const [activeTab, setActiveTab] = useState('profile');
const platform = usePlatform();

return (
  <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />} center>
    {viewWidth.tabletPlus && (
      <SplitCol className={viewWidth.tabletPlus.className} width={280} maxWidth={280} fixed>
        <Panel>
          {platform !== 'vkcom' && <PanelHeader />}
          <Group>
            {tabConfig.map(({ id, label, Icon, Indicator }) => (
              <Cell
                key={id}
                before={<Icon />}
                indicator={Indicator ? <Indicator /> : null}
                activated={activeTab === id}
                onClick={() => setActiveTab(id)}
              >
                {label}
              </Cell>
            ))}
          </Group>
        </Panel>
      </SplitCol>
    )}
    <SplitCol maxWidth="560px" stretchedOnMobile autoSpaced>
      <Epic
        activeStory={activeTab}
        tabbar={
          viewWidth.tabletMinus && (
            <Tabbar className={viewWidth.tabletMinus.className}>
              {tabConfig.map(({ id, label, Icon, Indicator }) => (
                <TabbarItem
                  key={id}
                  label={label}
                  selected={activeTab === id}
                  indicator={Indicator ? <Indicator /> : null}
                  onClick={() => setActiveTab(id)}
                >
                  <Icon />
                </TabbarItem>
              ))}
            </Tabbar>
          )
        }
      >
        {tabConfig.map(({ id, label, PlaceholderIcon }) => {
          switch (id) {
            case 'more':
              return <MoreTab key={id} id={id} label={label} />;
            default:
              return (
                <View key={id} id={id} activePanel={`${id}-panel`}>
                  <Panel id={`${id}-panel`}>
                    <PanelHeader>{label}</PanelHeader>
                    <Group>
                      <Placeholder icon={PlaceholderIcon ? <PlaceholderIcon /> : null} />
                    </Group>
                  </Panel>
                </View>
              );
          }
        })}
      </Epic>
    </SplitCol>
  </SplitLayout>
);

```

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

### Next.js Configuration for VKUI

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/install.mdx

Configure Next.js to transpile VKUI and transform imports for CSS Modules. This setup is specific to Next.js projects.

```javascript
module.exports = {
  // ...

  // Включаем транспиляцию
  transpilePackages: ['@vkontakte/vkui'],

  // Трансформируем импорты
  modularizeImports: {
    '@vkontakte/vkui': {
      transform: '@vkontakte/vkui/dist/cssm',
      skipDefaultConversion: true,
    },
  },
};
```

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

### Custom userEvent Setup for Jest

Source: https://github.com/vkcom/vkui/blob/master/website/content/blog/testing-vkui-apps.mdx

This helper configures `userEvent` for compatibility with the Jest testing environment, specifically addressing timer advancements.

```jsx
import userEventLib from '@testing-library/user-event';
/**
 * Переконфигурируем работу userEvent под jest
 *
 * https://github.com/testing-library/user-event/issues/833
 */
export const userEvent = userEventLib.setup({ advanceTimers: jest.advanceTimersByTime });
```

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

### Clickable MiniInfoCell with Chevron for Settings

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/mini-info-cell.mdx

An example of a MiniInfoCell with a chevron, specifically for clickable rows like profile settings, indicating an interactive element.

```jsx
<MiniInfoCell chevron onClick={() => {}} before={<Icon20GearOutline />}>
  Настройки профиля
</MiniInfoCell>
```

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

### Disabled FormField

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/form-field.mdx

Example of a FormField in a disabled state, preventing user interaction and providing visual feedback. The 'disabled' prop controls this state.

```jsx
<FormField disabled>
    <UnstyledTextField
      as="input"
      name="location"
      placeholder="Введите локацию"
      style={{ padding: 8 }}
    />
  </FormField>
```

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

### Basic Paragraph Usage

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/paragraph.mdx

Demonstrates the basic usage of the Paragraph component for displaying main text content, suitable for long descriptions and multi-line content.

```jsx
<Paragraph>
  Основной текст абзаца. Используйте этот компонент для длинных описаний и многострочного контента.
</Paragraph>
```

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

### DateRangeInput with Validation Statuses

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/date-range-input.mdx

Examples of DateRangeInput demonstrating 'error' and 'valid' status for visual validation feedback. These statuses are applied directly to the input.

```jsx
<Flex direction="column" gap="m">
  <DateRangeInput
    status="error"
    defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]}
  />
  <DateRangeInput
    status="valid"
    defaultValue={[new Date(2024, 2, 1), new Date(2024, 2, 10)]}
  />
</Flex>
```

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

### Creating Multiple Views with Panels

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/navigation.mdx

Demonstrates how to create distinct scenarios using the View and Panel components. Use this to manage different sets of panels within a single story.

```jsx
import { useState } from 'react';
import { View, Panel, PanelHeader, Button } from '@vkontakte/vkui';

export const FirstScenario = () => {
  const [activePanel, setActivePanel] = useState('first-panel-1');
  return (
    <View activePanel={activePanel}>
      <Panel id="first-panel-1">
        <PanelHeader>Панель 1</PanelHeader>
        <Button onClick={() => setActivePanel('first-panel-2')}>Перейти к панели 2</Button>
      </Panel>
      <Panel id="first-panel-2">
        <PanelHeader>Панель 2</PanelHeader>
        <Button onClick={() => setActivePanel('first-panel-1')}>Перейти к панели 1</Button>
      </Panel>
    </View>
  );
};

export const SecondScenario = () => {
  const [activePanel, setActivePanel] = useState('second-panel-1');
  return (
    <View activePanel={activePanel}>
      <Panel id="second-panel-1">
        <PanelHeader>Панель 1</PanelHeader>
        <Button onClick={() => setActivePanel('second-panel-2')}>Перейти к панели 2</Button>
      </Panel>
      <Panel id="second-panel-2">
        <PanelHeader>Панель 2</PanelHeader>
        <Button onClick={() => setActivePanel('second-panel-1')}>Перейти к панели 1</Button>
      </Panel>
    </View>
  );
};
```

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

### Configure Themes with ColorSchemeProvider and Styles

Source: https://github.com/vkcom/vkui/blob/master/website/content/overview/themes.mdx

Demonstrates setting system, dark, and light themes for SimpleCell components. It shows how to apply a specific background color using inline styles when overriding themes for child components.

```jsx
<Group header={<Header>Настройка тем</Header>}>
  <SimpleCell before={<Icon20PalleteOutline />}>Системная тема</SimpleCell>
  <ColorSchemeProvider value="dark">
    <SimpleCell
      before={<Icon20MoonOutline />}
      style={{ backgroundColor: 'var(--vkui--color_background_content)' }}
    >
      Тёмная тема
    </SimpleCell>
  </ColorSchemeProvider>
  <ColorSchemeProvider value="light">
    <SimpleCell
      before={<Icon20SunOutline />}
      style={{ backgroundColor: 'var(--vkui--color_background_content)' }}
    >
      Светлая тема
    </SimpleCell>
  </ColorSchemeProvider>
</Group>
```

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

### Banner with Image in Before Section and Dismiss Button

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/banner.mdx

An example of a Banner using an Image component in the 'before' section and a 'dismiss' button in the 'after' section.

```jsx
<Banner
    before={
      <Image
        size={96}
        src="https://sun9-63.userapi.com/yOEQYPHrNHjZEoanbqPb65HPl5iojmiLgLzfGA/W3geVMMt8TI.jpg"
      />
    }
    title="Баста в Ледовом"
    subtitle="Большой концерт"
    after="dismiss"
    actions={<Button>Подробнее</Button>}
  />
```

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

### Get Current Content Direction with useDirection

Source: https://github.com/vkcom/vkui/blob/master/website/content/components/direction-provider.mdx

Use the `useDirection` hook to retrieve the current content direction value within your React components.

```jsx
const direction = useDirection();
```