# VKUI is the VK design system shipped as a React component library

> VKUI is a set of adaptive React components that implement the interfaces of the VK design system, so that a web application looks like the company's own iOS and Android apps. It is published as @vkontakte/vkui, it requires React 18, and the repository is a monorepo with its own tokens, PostCSS plugins, Storybook setup, screenshot tests and a bundle size budget.

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

- Repository: https://github.com/VKCOM/VKUI
- Website: https://vkui.io
- Stars: 1,174 · Forks: 203
- Language: TypeScript
- License: MIT
- Published: 2026-10-19 · Updated: 2026-10-19 · Language: en
- Canonical page: https://hysenlabs.com/projects/vkcom-vkui

## The library is an implementation of a design system

The project description is what makes the scope clear. VKUI is a set of React components with which you can create interfaces that are outwardly indistinguishable from VK's own iOS and Android applications, and the README says the library is based on the VK design system and implements its interfaces for various platforms.

That is the whole positioning in one sentence. It is not a general purpose React component set with a house style, it is one company's design system, written in React, with the components you would need to build an application that looks like theirs.

The homepage is vkui.io, the licence is MIT with the file at the repository root, and the package on npm is @vkontakte/vkui. The release history shows active maintenance on the 8.x line, with v8.4.2 on 2026-10-13, v8.4.1 on 2026-09-24 and v8.4.0 on 2026-08-25, and the last push was on 2026-10-15.

For an outside team the question is whether you want that design language. A team whose product already has a visual identity will be fighting the library, and a team whose product should look like a VK product, or should at least look like a well made mobile application, gets a lot of design work done for free.

## Installation is a package manager line and two providers

There are three documented install routes and they are the usual ones.

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

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

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

There is one version constraint to respect, and the README puts it in a note: the library supports react and react-dom at version ^18.2.0. That is a floor rather than a preference, and it is the kind of constraint that decides whether you can adopt the library at all.

The Hello World example shows the shape of an application and the two providers you wrap it in.

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

const container = document.getElementById("root");
const root = createRoot(container);
root.render(
  <ConfigProvider>
    <AdaptivityProvider>
      <Example />
    </AdaptivityProvider>
  </ConfigProvider>,
);
```

ConfigProvider carries the theme configuration, and AdaptivityProvider is what makes the layout responsive to the platform, which is the point of a library built around a mobile design system. The stylesheet import is not optional either, since the components carry their layout through class names that the PostCSS plugins in the repository generate.

The component vocabulary follows the same logic. SplitLayout and SplitCol build the page frame, View and Panel hold content, PanelHeader and Group and Header structure it, and SimpleCell is the list row. The usePlatform hook tells the application which platform it is rendering for, and the example uses it to decide whether to render a PanelHeader at all.

## The monorepo is a design system pipeline, not just a package

The repository root is worth reading as a picture of how a design system gets shipped, because it contains much more than the components.

There are packages/, the published workspaces, and the root package.json is private and named @vkontakte/vkui-monorepo, with the workspace dependencies listed as @project-docs/website, @project-tools/eslint-plugin-vkui, @project-tools/postcss-layout-classes, @project-tools/postcss-restructure-variable, @project-tools/storybook-addon-cartesian and @project-tools/stylelint-plugin-vkui. Those names describe the pipeline. There are lint plugins for ESLint and for Stylelint that enforce the design system's rules on your code, and two PostCSS plugins, one that generates layout classes and one that restructures variables.

The tokens are a separate published package, @vkontakte/vkui-tokens, at version 4.93.0, which is how a design system exposes its colours, spacing and typography as data that other tools can consume.

The build and test tooling is modern and specific. Rspack is the bundler, Biome handles formatting and linting alongside a separate Stylelint configuration, Storybook runs the components with the a11y, designs, docs and links addons, Playwright drives the browser, and Vitest runs the unit tests with coverage. The size-limit packages, for file, webpack and webpack-css, are a bundle size budget enforced in the build, which tells you the library cares about what it costs the applications that ship it.

There are also two runnable examples, examples/vkui-nextjs-ts and examples/vkui-vite-ts, which is the fastest way to see a working setup with a real framework.

## Tests cover units, types, lint, screenshots and accessibility

The testing section is short and unusually complete. The project works on library quality and provides tests, and node --run test runs the units, the types and the linter. The README also says screenshot tests are supported as end to end tests, and that the basic accessibility of the components is checked, with a testing guide in docs/TESTING.md.

That combination is what you would want from a component library, and each part covers a different failure mode. The unit tests cover the component logic, the type tests catch a change that breaks the public API, the linter covers the design system conventions, the screenshot tests catch a visual regression that no assertion would notice, and the accessibility check catches a change that removes a role or a label.

The browser support list is kept in a .browserslistrc file, which the README links for the full list, and the repository has a .nvmrc and a yarn setup with .yarn/ and .yarnrc.yml, so the toolchain is pinned for everyone who clones it.

For a library whose purpose is to make applications look a certain way, the screenshot tests are the load bearing ones. A component can pass every unit test and still render a pixel different, and for a design system that difference is the bug.

## Contributing goes through a manifesto and a migration guide

The contribution path is documented in three steps, and the first one is a document rather than a set of instructions. Read the manifesto in docs/MANIFESTO.md, then the development requirements in docs/CONTRIBUTING.md, and then open a pull request.

The migration guide is linked from the header of the README and points at a guide for migrating to version 6, which is worth a note on its own. A component library at version 8 has been through a major redesign at least once, and the components you use in a v5 application are not the components you get in v8. The README's own hello world shows the current shape, with a root of AppRoot, a SplitLayout with a header, and a SplitCol inside, which is a fairly different structure from a page of divs.

There is a support path that is worth knowing about before you file anything. If you found a bug or have a suggestion, the README asks you to write an issue, and if you want to ask a question or discuss the library, to use the discussions board under the Q and A category.

The documentation itself lives at vkui.io, where you will find information about using the components and the utilities, and the repository also carries a website/ directory and a docs/ directory, so the published site and the source are both in the tree.

## Conclusion

VKUI fits a product team that has to look like the same application on web and on mobile, and that is willing to inherit the VK design language rather than invent one. It is the wrong choice if you need a neutral component set, because the visual language is the point rather than a side effect. Verify first that the React version in your application satisfies the ^18.2.0 floor, and read the version 6 migration guide before upgrading an existing integration, since the components have changed shape across major versions.

## FAQ

### How do I install VKUI?

With npm i @vkontakte/vkui, yarn add @vkontakte/vkui or pnpm add @vkontakte/vkui. The library supports react and react-dom at version ^18.2.0, and the stylesheet @vkontakte/vkui/dist/vkui.css has to be imported as well.

### What are the providers in the VKUI hello world example?

ConfigProvider carries the theme configuration and AdaptivityProvider makes the layout respond to the platform, and both wrap the application inside AppRoot. The usePlatform hook tells a component which platform it is rendering for.

### How do I run the VKUI tests?

node --run test runs the unit tests, the type tests and the linter. The project also supports screenshot tests as end to end tests and checks basic accessibility of the components, with the details in docs/TESTING.md.

### What does the VKUI repository contain besides the components?

It is a monorepo with packages and website directories, design tokens published separately as @vkontakte/vkui-tokens, ESLint and Stylelint plugins that enforce the design system, two PostCSS plugins for layout classes and variable restructuring, and two runnable examples using Next.js and Vite.

### Is VKUI actively released?

The 8.x line is moving, with v8.4.2 on 2026-10-13, v8.4.1 on 2026-09-24 and v8.4.0 on 2026-08-25, and the last push was on 2026-10-15. The licence is MIT and the homepage is vkui.io.

## Sources

- [License: MIT](https://github.com/VKCOM/VKUI/blob/master/LICENSE)
- [Project website](https://vkui.io)
- [README](https://github.com/VKCOM/VKUI/blob/master/README.md)
- [Releases](https://github.com/VKCOM/VKUI/releases)
- [VKCOM/VKUI on GitHub](https://github.com/VKCOM/VKUI)

---

Hysen Labs editorial analysis, written from the project's own repository and release notes. Cite the canonical page: https://hysenlabs.com/projects/vkcom-vkui