Витрина компонентов
Все компоненты VKUI на одной странице. Кликните по карточке, чтобы перейти к подробной странице.
Раскладка
Загружается...
BoxУниверсальный компонент для создания раскладок с поддержкой отступов, размеров, позиционирования и flex-свойств.
Загружается...
ButtonGroupКомпонент, который позволяет группировать кнопки и управлять их расположением и выравниванием.
Загружается...
CardGridКомпонент-контейнер для создания адаптивных сеток из Card.
Загружается...
CardScrollКомпонент для создания горизонтально прокручиваемых списков Card.
Загружается...
CellButtonGroupКомпонент для группировки CellButton с разделителями.
Загружается...
DivКомпонент с установленными отступами, которые отличаются в зависимости от платформы.
Загружается...
FlexКомпонент для позиционирования элементов, построенный на базе flex layout.
Загружается...
FooterПодвал группы, передаётся в конце children компонента Group.
Загружается...
FormLayoutGroupКомпонент, помогающий сгруппировать несколько полей формы FormItem, расположив их по вертикали или по горизонтали.
Загружается...
GroupКомпонент для визуальной группировки связанных элементов интерфейса.
Загружается...
HeaderЗаголовок группы, передаётся в свойство header компонента Group.
Загружается...
ListСпециализированный контейнер для работы с перетаскиваемыми и интерактивными Cell.
Загружается...
RadioGroupКомпонент для группировки переключателей Radio с возможностью задания горизонтального или вертикального расположения.
Загружается...
SeparatorКомпонент для визуального разделения контента.
Загружается...
SimpleGridКомпонент для позиционирования элементов, построенный на базе grid layout.
Загружается...
SpacingКомпонент для создания вертикальных отступов между элементами интерфейса.
Загружается...
SplitLayoutКонтейнер для реализации интерфейса многоколоночной структурой.
Формы и поля ввода
Загружается...
CheckboxКомпонент, который позволяет пользователю выбрать один или несколько вариантов из списка опций.
Загружается...
ChipsInputКомпонент для ввода и отображения множества значений.
Загружается...
ChipsSelectКомпонент для выбора множества значений из выпадающего списка.
Загружается...
CustomSelectКомпонент для выбора значения из выпадающего списка.
Загружается...
DropZoneКомпонент, который позволяет пользователям загружать файлы, перетаскивая их в специальную область на странице.
Загружается...
FileКомпонент для загрузки файлов.
Загружается...
FormFieldКомпонент для создания полей ввода с возможностью добавления иконок и статусов.
Загружается...
FormItemКомпонент для создания элементов форм с поддержкой заголовка, подсказки и статуса валидации.
Загружается...
FormStatusКомпонент для отображения статуса формы или результата действия.
Загружается...
InputКомпонент для ввода текстовой информации.
Загружается...
NativeSelectКомпонент для создания выпадающего списка на основе нативного HTML-элемента select.
Загружается...
RadioКомпонент для выбора одного значения из списка опций.
Загружается...
SegmentedControlКомпонент, который позволяет пользователю выбрать одно значение из набора опций.
Загружается...
SelectАдаптивный компонент для выбора одного значения из списка опций.
Загружается...
SelectMimicryКомпонент, который визуально имитирует компонент выбора из списка.
Загружается...
SliderКомпонент, который позволяет пользователю выбрать значение из заданного диапазона,
Загружается...
SwitchПереключатель, позволяющий пользователям выбрать между парой противоположных состояний, например, включено/выключено.
Загружается...
TextareaКомпонент для ввода многострочного текста.
Загружается...
WriteBarКомпонент для создания поля ввода сообщений с поддержкой иконок действий.
Работа с датами
Загружается...
CalendarКомпонент для выбора даты и времени, поддерживает различные режимы работы, настройку ограничений по датам и локализацию.
Загружается...
CalendarRangeКомпонент для выбора диапазона дат, позволяет пользователю выбрать начальную и конечную даты в календаре.
Загружается...
DateInputКомпонент для поля даты и времени.
Загружается...
DateRangeInputКомпонент для поля выбора диапазона дат,
Кнопки
Загружается...
ButtonКомпонент, который даёт пользователю возможность выполнить какое‑то действие или перейти на другую страницу.
Загружается...
CellРасширенная версия SimpleCell с поддержкой удаления, перетаскивания и выбора элементов.
Загружается...
CellButtonКомпонент для создания кнопок в виде строк.
Загружается...
IconButtonКомпонент представляет собой обертку-кнопку для интерактивной иконки.
Загружается...
SimpleCellУпрощённый вариант ячейки для отображения базовой информации с минимальным набором элементов.
Загружается...
ToolButtonКнопки, которые используются для вызова инструмента, вставки вложений или для форматирования.
Обратная связь
Загружается...
AlertКомпонент окна оповещения, для отображения важных сообщений и подтверждения действий пользователя.
Загружается...
PanelSpinnerИндикатор загрузки внутри Panel с автоматическими отступами и центрированием.
Загружается...
ProgressКомпонент для визуализации прогресса выполнения задачи.
Загружается...
PullToRefreshКомпонент для обновления контента жестом "потянуть вниз".
Загружается...
ScreenSpinnerКомпонент-обертка над Spinner.
Загружается...
SkeletonКомпонент для отображения анимированных заглушек во время загрузки контента.
Загружается...
SnackbarКомпонент для показа кратких сообщений и уведомлений.
Загружается...
SpinnerКомпонент для отображения индикатора загрузки.
Модальные окна
Загружается...
ActionSheetКомпонент для отображения списка действий в виде всплывающего меню.
Загружается...
ActionSheetItemЭлемент списка действий для использования внутри ActionSheet.
Загружается...
ModalCardКомпонент реализующий модальную карточку.
Загружается...
ModalCardBaseБазовый компонент для создания модальных карточек с гибким содержимым.
Загружается...
ModalDismissButtonКнопка для закрытия модальных окон на широком экране.
Загружается...
ModalOutsideButtonКомпонент для отрисовки кнопок в правом верхнем углу в compact-версии ModalPage и ModalCard.
Загружается...
ModalPageКомпонент реализующий модальное окно.
Загружается...
ModalPageHeaderШапка для модальных страниц.
Загружается...
PopoverКомпонент, предназначенный для отображения части пользовательского интерфейса во всплывающем окне.
Загружается...
PopperНизкоуровневый компонент для отрисовки выпадающего блока.
Загружается...
TooltipКомпонент всплывающей подсказки.
Отображение данных
Загружается...
AccordionКомпонент для создания раскрывающихся/сворачивающихся блоков контента.
Загружается...
AvatarКомпонент для отображения аватара пользователя — фотографии, инициалов или графики. Наследует все свойства HTML-элемента `<img>`.
Загружается...
BadgeИндикатор для обозначения уведомления или другой важной информации, относящейся к пункту навигации.
Загружается...
BannerКомпонент для отображения важных уведомлений и промо-блоков с возможностью взаимодействия.
Загружается...
CardКомпонент для создания визуально выделенных контейнеров с содержимым.
Загружается...
ChipКомпонент, который представляет собой элемент, содержащий текстовую информацию, с возможностью удаления.
Загружается...
ContentBadgeКомпонент для выделения статусов, категорий и счётчиков рядом с элементами интерфейса.
Загружается...
ContentCardКомпонент для создания интерактивных карточек с изображением и текстовым содержимым.
Загружается...
CounterКомпонент для отображения числовых индикаторов в ячейках, кнопках и других интерфейсных элементах.
Загружается...
GalleryКомпонент для создания адаптивного слайдера изображений с поддержкой жестов и автоматической прокрутки.
Загружается...
GridAvatarКомпонент для отображения нескольких аватаров в виде сетки. Поддерживает от 1 до 4 элементов.
Загружается...
HorizontalCellКомпонент для отображения карточек в горизонтальной прокрутке.
Загружается...
HorizontalScrollКомпонент для показа большого количества элементов с горизонтальной прокруткой.
Загружается...
ImageКомпонент для отображения изображений с поддержкой адаптивных размеров, скруглений и позиционированных элементов.
Загружается...
ImageBaseБазовый компонент по работе с изображениями с добавлением возможности накладывать различные элементы поверх изображения.
Загружается...
InfoRowКомпонент для отображения статичной информации в виде пар "заголовок-значение".
Загружается...
MiniInfoCellКомпонент для отображения компактной информации или быстрых действий.
Загружается...
PlaceholderКомпонент для отображения заглушек при отсутствии контента или ошибках.
Загружается...
RichCellРасширенный компонент ячейки для отображения комплексной информации.
Загружается...
UsersStackКомпонент для отображения группы аватаров пользователей с возможностью добавления сопроводительного текста.
Типографика
Загружается...
CaptionКомпонент для отображения мелких подписей — аннотаций к изображениям, временных меток, вспомогательных аннотаций и другого вторичного текста минимального размера.
Загружается...
DisplayTitleКомпонент для отображения крупных заголовков. Используется для акцентных надписей на экране — обложек, вводных экранов и других сценариев, где требуется максимально крупный текст.
Загружается...
EllipsisTextКомпонент ограничивает текстовый контент, скрывая его за многоточием.
Загружается...
FootnoteКомпонент для отображения подписей и вспомогательного текста — подсказок, пояснений к форме, мелких аннотаций под основным контентом.
Загружается...
HeadlineКомпонент для отображения подзаголовков и акцентного текста внутри секций интерфейса.
Загружается...
LinkКомпонент для создания интерактивных текстовых ссылок или кнопок-ссылок.
Загружается...
MarkКомпонент для визуального выделения фрагментов текста.
Загружается...
ParagraphКомпонент для отображения основного текста. В отличие от Text предназначен для более длинных текстовых блоков — абзацев и описаний.
Загружается...
SubheadКомпонент для отображения подзаголовков второго уровня. Используется для разделения контента внутри секций, а также как акцентные подписи меньшего размера, чем Headline
Загружается...
TextКомпонент для отображения основного наборного текста интерфейса. Используется для большинства текстовых элементов - описаний, подписей ячеек, контента карточек и т. д.
Загружается...
TitleКомпонент для отображения заголовков страниц и крупных секций интерфейса.
Утилиты
Загружается...
AdaptiveIconRendererКомпонент для автоматического рендера иконок в зависимости от размера интерфейса.
Загружается...
AspectRatioКомпонент позволяет поддерживать заданное соотношение сторон для вложенного контента.
Загружается...
CustomScrollViewКомпонент, который унифицирует браузерную полосу прокрутки на всех платформах.
Загружается...
FloatingArrowИконка-стрелка для всплывающих окон.
Загружается...
GradientКомпонент для создания градиентных подложек.
Загружается...
OnboardingTooltipКомпонент для отрисовки подсказки, когда пользователю хочется представить новый функционал.
Загружается...
PopoutWrapperКомпонент-обёртка для создания всплывающих элементов.
Загружается...
ScrollArrowКомпонент стрелки для навигации в компонентах горизонтальных прокруток и галереях.
Загружается...
SearchКомпонент для реализации поисковых интерфейсов.
Загружается...
SelectionControlКомпонент, который представляет собой базовую обертку для переключателей (checkbox, radio, switch).
Загружается...
TappableБазовый компонент для создания интерактивных элементов, который автоматически адаптирует семантику и поведение под контекст.
Загружается...
TouchКомпонент для удобной работы с pointer-событиями.
Загружается...
UnstyledTextFieldКомпонент сбрасывает user-agent stylesheets таких полей ввода, как <input> и <textarea>.
Загружается...
VisuallyHiddenКомпонент-обертка, который позволяет скрыть контент визуально, но оставить его доступным для ассистивных технологий.