To help you get started, we've collected the most common ways that @vkontakte/vkui is being used within popular public projects.

VKCOM / create-vk-mini-app / src / panels / Persik.js View on Github

import React from 'react';
import PropTypes from 'prop-types';
import { platform, IOS } from '@vkontakte/vkui';
import Panel from '@vkontakte/vkui/dist/components/Panel/Panel';
import PanelHeader from '@vkontakte/vkui/dist/components/PanelHeader/PanelHeader';
import HeaderButton from '@vkontakte/vkui/dist/components/HeaderButton/HeaderButton';
import Icon28ChevronBack from '@vkontakte/icons/dist/28/chevron_back';
import Icon24Back from '@vkontakte/icons/dist/24/back';

import persik from '../img/persik.png';
import './Persik.css';

const osName = platform();

const Persik = props => (
	
		
				{osName === IOS ?  : }
			}
		>
			Persik
		
		<img alt="Persik The Cat" src="{persik}">
	
);

Persik.propTypes = {
	id: PropTypes.string.isRequired,

View more ways to use @vkontakte/vkui

VKUI — это библиотека адаптивных React-компонентов
для создания веб-приложений.
Библиотека основана на дизайн-системе VK и реализует её интерфейсы для различных платформ.
Релизы: https://github.com/VKCOM/VKUI/releases.
Гайд по миграции на версию 6.

Установка

npm:

npm i @vkontakte/vkui

yarn:

yarn add @vkontakte/vkui

pnpm:

pnpm add @vkontakte/vkui

> Обратите внимание: мы поддерживаем react и react-dom версии ^18.2.0

Hello World

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

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

  return (
    
      }>
        
          
        
      
    
  );
};

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

Браузеры

С подробным списком можно ознакомиться в файле .browserslistrc

Тестирование

Мы работаем над качеством библиотеки и подвозим тесты. yarn test запускает юниты, типы и линтит. Также мы поддерживаем скриншотные тесты (e2e) и проверяем базовую доступность (a11y) компонентов — смотрите наш гайд по тестированию.

Документация

В документации вы сможете найти информацию об использовании компонентов и утилит.

Сообщить о проблеме

Напишите нам issue, если нашли баг или у вас есть предложения по улучшению библиотеки. Если вы хотите задать вопрос или обсудить библиотеку, воспользуйтесь дискуссиями.

Contributing

Мы очень радуемся, когда пользователи библиотеки работают над её улучшением. Для того, чтобы оставить след в истории:

1. Для начала ознакомьтесь с нашим манифестом 📝
2. Затем посмотрите требования к разработке 🔧
3. А теперь смело вносите изменения и создавайте pull request ❤️