---
title: Релиз VKUI v7
date: 2024/12/24
description: Версия VKUI v7 вышла из беты и теперь доступна для широкого использования.
tags: release
image: /blog/v7-release.png
---

import { PostHeader } from '@vkontakte/vkui-docs-theme';

<PostHeader frontMatter={metadata} />

VKUI v7 вышел из беты и стал полностью стабильным. Поддержка v6 прекращена — рекомендуем обновиться, чтобы использовать новые возможности и вовремя получать исправления.

## ⚙️ Сборка

- библиотека теперь поставляется только в `ESM`-формате, `CommonJS`-сборка удалена. `ESM` получил достаточно широкую поддержку, поэтому от устаревшего формата мы отказались.

- поднята целевая версия `ECMAScript` для компиляции до `es2017`, а также минимальные версии поддерживаемых браузеров:

  ```
  ChromeAndroid >= 63
  iOS >= 12
  Chrome >= 63
  Firefox >= 55
  Edge >= 79
  Opera >= 50
  Safari >= 12
  Samsung >= 8.2
  ```

  Это позволит использовать новое `API` без полифиллов.

- изменились названия `CSS`-классов — теперь они формируются на основе `CSS Modules`. В будущем мы хотим отказаться от статичных классов, поэтому исключите их использование в своём коде.

## 🧩 Компоненты

У многих компонентов изменилось публичное `API`. Мы улучшаем опыт разработчиков при работе с дизайном и в этом релизе сократили расхождения в названиях параметров между `React` и `Figma`. Также избавились от `deprecated`-свойств и унифицировали `API` разных компонентов.

### Модальные окна

В новой версии мы переработали подход к модальным окнам и исправили большое количество багов.

- `ModalPage`/`ModalCard` можно определять в любом месте приложения, без оборачивания в `ModalRoot`
- `ModalRoot` нужен только для последовательно открывающихся модальных окон; можно создавать динамические модальные окна

### SplitLayout

Компонент больше не обязателен при наличии в приложении всплывающих окон. Свойства `popout` и `modal` отмечены как `@deprecated` и будут удалены в следующем релизе.

### DatePicker

Компонент удалён в пользу `Input`, `Select` и `DateInput`. Подобрать замену поможет [обсуждение](https://github.com/VKCOM/VKUI/discussions/7070).

### Типографика

По умолчанию для всех типографических элементов отключены акцентные начертания. Чтобы вернуть прежнее поведение, используйте `useAccentWeight={true}`.

## 🌗 Светлая/тёмная тема

Раньше для светлой и тёмной темы использовалось название `Appearance`, которое совпадало с названиями параметров некоторых компонентов (например, `Button`) и могло путать. Поэтому мы перешли на `ColorScheme` — так это свойство называется в CSS.

Из-за этого изменились названия типов, хуков и провайдеров для работы со светлой и тёмной темами.

## 🚀 Хочу обновиться

Начните с [инструкции по миграции](/migrations/migration-v7). Большинство изменений не придётся делать вручную — есть автоматизации, о которых рассказано в инструкции.

Если возникнут сложности, задайте вопрос в [Дискуссиях](https://github.com/VKCOM/VKUI/discussions) на GitHub или в [публичном чате](https://vk.cc/c1CHgf) в VK Messenger.