https://github.com/vkcom/vkui

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.
https://github.com/vkcom/vkui

javascript mobile-web opensource postcss reactjs typescript ui uikit vkontakte vkui

Last synced: 7 days ago
JSON representation

VKUI – это набор React-компонентов, с помощью которых можно создавать интерфейсы, внешне неотличимые от наших iOS и Android приложений.

• Host: GitHub
• URL: https://github.com/vkcom/vkui
• Owner: VKCOM
• License: mit
• Created: 2017-01-16T12:09:28.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2025-01-03T21:41:18.000Z (18 days ago)
• Last Synced: 2025-01-07T15:08:18.983Z (14 days ago)
• Topics: javascript, mobile-web, opensource, postcss, reactjs, typescript, ui, uikit, vkontakte, vkui
• Language: TypeScript
• Homepage: https://vkcom.github.io/VKUI/
• Size: 983 MB
• Stars: 1,060
• Watchers: 35
• Forks: 185
• Open Issues: 235
• Metadata Files:
  • Readme: README.md
  • Contributing: docs/CONTRIBUTING.md
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


  

    

      

      

    

  





  

  





VKUI — это библиотека адаптивных React-компонентов
 для создания веб-приложений.


Библиотека основана на дизайн-системе VK и реализует её интерфейсы для различных платформ.


Релизы: https://github.com/VKCOM/VKUI/releases.


Гайд по миграции на версию 6.



## Установка

**npm:**

```sh

npm i @vkontakte/vkui

```

**yarn:**

```sh

yarn add @vkontakte/vkui

```

**pnpm:**

```sh

pnpm add @vkontakte/vkui

```

> _Обратите внимание_: мы поддерживаем [react](https://www.npmjs.com/package/react) и [react-dom](https://www.npmjs.com/package/react-dom) версии `^18.2.0`

## Hello World

```jsx static

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 (

    

      }>

        

          

            

              VKUI

              Items}>

                Hello

                World

              

            

          

        

      

    

  );

};

const container = document.getElementById('root');

const root = createRoot(container); // createRoot(container!) if you use TypeScript

root.render(

  

    

      

    

  ,

);

```

## Браузеры

С подробным списком можно ознакомиться в файле [.browserslistrc](https://github.com/VKCOM/VKUI/blob/master/.browserslistrc)

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

Мы работаем над качеством библиотеки и подвозим тесты. `yarn test` запускает юниты, типы и линтит. Также мы поддерживаем скриншотные тесты (e2e) и проверяем базовую доступность (a11y) компонентов — смотрите наш [гайд по тестированию](https://github.com/VKCOM/VKUI/blob/master/docs/TESTING.md).

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

В [документации](https://vkcom.github.io/VKUI/) вы сможете найти информацию об использовании компонентов и утилит.

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

Напишите нам [issue](https://github.com/VKCOM/VKUI/issues/new/choose), если нашли баг или у вас есть предложения по улучшению библиотеки. Если вы хотите задать вопрос или обсудить библиотеку, воспользуйтесь [дискуссиями](https://github.com/VKCOM/VKUI/discussions/categories/q-a).

## Contributing

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

1. Для начала ознакомьтесь с нашим [манифестом](https://github.com/VKCOM/VKUI/blob/master/docs/MANIFESTO.md) 📝

2. Затем посмотрите [требования к разработке](https://github.com/VKCOM/VKUI/blob/master/docs/CONTRIBUTING.md) 🔧

3. А теперь смело вносите изменения и создавайте [pull request](https://github.com/VKCOM/VKUI/pulls) ❤️