diff --git a/packages/vkui-docs-theme/index.ts b/packages/vkui-docs-theme/index.ts
index 52c46650194..933afae8660 100644
--- a/packages/vkui-docs-theme/index.ts
+++ b/packages/vkui-docs-theme/index.ts
@@ -1,2 +1,7 @@
 import Layout from './src/index';
+import type { PartialDocsThemeConfig as DocsThemeConfig } from './src/types';
+
+export { useFetch } from './src/hooks/useFetch';
+export { StorybookIcon, GithubIcon, FigmaIcon } from './src/icons';
+export { type DocsThemeConfig };
 export default Layout;
diff --git a/packages/vkui-docs-theme/src/components/Anchor.tsx b/packages/vkui-docs-theme/src/components/Anchor.tsx
new file mode 100644
index 00000000000..77581dac34c
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Anchor.tsx
@@ -0,0 +1,28 @@
+import * as React from 'react';
+import { type LinkProps, Link as VKUILink } from '@vkontakte/vkui';
+import NextLink from 'next/link';
+
+const EXTERNAL_HREF_REGEX = /https?:\/\//;
+
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>((props, ref) => (
+  <VKUILink {...props} getRootRef={ref} />
+));
+Link.displayName = 'VKUILinkWithRef';
+
+export function Anchor({ href = '', children, ...props }: LinkProps) {
+  const newWindow = EXTERNAL_HREF_REGEX.test(href);
+
+  if (newWindow) {
+    return (
+      <Link href={href} target="_blank" rel="noreferrer" {...props}>
+        {children}
+      </Link>
+    );
+  }
+
+  return (
+    <NextLink href={href} {...props} passHref legacyBehavior>
+      <Link>{children}</Link>
+    </NextLink>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.module.css b/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.module.css
new file mode 100644
index 00000000000..2f919d9ad4e
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.module.css
@@ -0,0 +1,25 @@
+.root {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+.root > .item:not(:last-child),
+.root > .icon {
+  margin-inline-end: 4px;
+}
+
+.item {
+  color: var(--vkui--color_text_secondary);
+
+  --vkui--color_text_link: var(--vkui--color_text_secondary);
+}
+
+.icon {
+  color: var(--vkui--color_icon_secondary);
+}
+
+.activeItem {
+  color: var(--vkui--color_text_primary);
+}
diff --git a/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.tsx b/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.tsx
new file mode 100644
index 00000000000..6fc07ae3eda
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Breadcrumbs/Breadcrumbs.tsx
@@ -0,0 +1,26 @@
+import { Fragment } from 'react';
+import { Icon12ChevronOutline } from '@vkontakte/icons';
+import { classNames, Footnote } from '@vkontakte/vkui';
+import type { Item } from 'nextra/normalize-pages';
+import { Anchor } from '../Anchor';
+import styles from './Breadcrumbs.module.css';
+
+export function Breadcrumbs({ activePath }: { activePath: Item[] }) {
+  return (
+    <div className={styles.root}>
+      {activePath.map((item, index) => {
+        const isLink = !item.children || item.withIndexPage;
+        const isActive = index === activePath.length - 1;
+
+        return (
+          <Fragment key={`${item.route}-${item.name}`}>
+            {index > 0 && <Icon12ChevronOutline aria-hidden className={classNames(styles.icon)} />}
+            <Footnote className={classNames(styles.item, isActive && styles.activeItem)}>
+              {isLink && !isActive ? <Anchor href={item.route}>{item.title}</Anchor> : item.title}
+            </Footnote>
+          </Fragment>
+        );
+      })}
+    </div>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/ColorSchemeSwitch.tsx b/packages/vkui-docs-theme/src/components/ColorSchemeSwitch.tsx
new file mode 100644
index 00000000000..982a167c7c4
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/ColorSchemeSwitch.tsx
@@ -0,0 +1,33 @@
+import { Icon20MoonOutline, Icon20SunOutline } from '@vkontakte/icons';
+import { AdaptivityProvider, SegmentedControl, Skeleton } from '@vkontakte/vkui';
+import { useMounted } from 'nextra/hooks';
+import { useColorScheme } from '../contexts';
+
+const options = [
+  { 'value': 'light', 'label': <Icon20SunOutline />, 'aria-label': 'Переключить на светлую тему' },
+  { 'value': 'dark', 'label': <Icon20MoonOutline />, 'aria-label': 'Переключить на тёмную тему' },
+];
+
+const SWITCH_WIDTH = 94;
+
+export function ColorSchemeSwitch() {
+  const { setColorScheme, resolvedColorScheme } = useColorScheme();
+  const mounted = useMounted();
+
+  if (!mounted) {
+    return <Skeleton width={SWITCH_WIDTH} height={36} />;
+  }
+
+  return (
+    <AdaptivityProvider sizeY="compact">
+      <SegmentedControl
+        size="l"
+        style={{ width: SWITCH_WIDTH }}
+        value={resolvedColorScheme}
+        // @ts-expect-error: TS2322 VKUI fix types?
+        onChange={setColorScheme}
+        options={options}
+      />
+    </AdaptivityProvider>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/Head.tsx b/packages/vkui-docs-theme/src/components/Head.tsx
new file mode 100644
index 00000000000..c2ec36f0709
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Head.tsx
@@ -0,0 +1,29 @@
+import NextHead from 'next/head';
+import { useMounted } from 'nextra/hooks';
+import { useColorScheme, useThemeConfig } from '../contexts';
+
+export function Head() {
+  const themeConfig = useThemeConfig();
+  const { resolvedColorScheme } = useColorScheme();
+  const mounted = useMounted();
+
+  const head = typeof themeConfig.head === 'function' ? themeConfig.head({}) : themeConfig.head;
+
+  return (
+    <NextHead>
+      {mounted ? (
+        <meta name="theme-color" content={resolvedColorScheme === 'dark' ? '#111' : '#fff'} />
+      ) : (
+        <>
+          <meta name="theme-color" content="#fff" media="(prefers-color-scheme: light)" />
+          <meta name="theme-color" content="#111" media="(prefers-color-scheme: dark)" />
+        </>
+      )}
+      <meta
+        name="viewport"
+        content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+      />
+      {head}
+    </NextHead>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.module.css b/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.module.css
new file mode 100644
index 00000000000..5a140d8f969
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.module.css
@@ -0,0 +1,38 @@
+.root {
+  display: flex;
+  align-items: center;
+  padding-block-start: var(--vkui--spacing_size_4xl);
+  border-block-start: 1px solid var(--vkui_docs--color_stroke_separator_secondary);
+  margin-block-start: 56px;
+}
+
+.navLinkItem {
+  display: flex;
+  flex-direction: column;
+  color: var(--vkui--color_text_subhead);
+  align-items: flex-end;
+  padding-block: var(--vkui--spacing_size_m);
+  padding-inline: var(--vkui--spacing_size_xl);
+  text-decoration: none;
+}
+
+.navLink {
+  margin-block-start: var(--vkui--spacing_size_s);
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  color: var(--vkui--color_text_primary);
+}
+
+.navLinkItemNext {
+  margin-inline-start: auto;
+  align-items: flex-start;
+}
+
+.navLinkPrevIcon {
+  margin-inline-end: var(--vkui--spacing_size_m);
+}
+
+.navLinkNextIcon {
+  margin-inline-start: var(--vkui--spacing_size_m);
+}
diff --git a/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.tsx b/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.tsx
new file mode 100644
index 00000000000..2212cbc7358
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/NavLinks/NavLinks.tsx
@@ -0,0 +1,69 @@
+import * as React from 'react';
+import { Icon16ChevronLeft, Icon16ChevronOutline } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import { Footnote, Headline, Tappable } from '@vkontakte/vkui';
+import NextLink from 'next/link';
+import type { Item } from 'nextra/normalize-pages';
+import { useThemeConfig } from '../../contexts';
+import styles from './NavLinks.module.css';
+
+interface NavLinkProps {
+  currentIndex: number;
+  flatDirectories: Item[];
+}
+
+interface NavLinkItemProps {
+  route: string;
+  children: React.ReactNode;
+  className?: string;
+  type?: 'prev' | 'next';
+}
+
+function NavLinkItem({ type = 'prev', route, children, className }: NavLinkItemProps) {
+  return (
+    <Tappable
+      Component={NextLink}
+      href={route}
+      className={classNames(styles.navLinkItem, className)}
+    >
+      <Footnote>{type === 'next' ? 'Следующая' : 'Предыдущая'}</Footnote>
+      <div className={classNames(styles.navLink)}>{children}</div>
+    </Tappable>
+  );
+}
+
+export function NavLinks({ flatDirectories, currentIndex }: NavLinkProps) {
+  const themeConfig = useThemeConfig();
+  const nav = themeConfig.navigation;
+  const navigation = typeof nav === 'boolean' ? { prev: nav, next: nav } : nav;
+  let prev = navigation.prev && flatDirectories[currentIndex - 1];
+  let next = navigation.next && flatDirectories[currentIndex + 1];
+
+  if (prev && !prev.isUnderCurrentDocsTree) {
+    prev = false;
+  }
+  if (next && !next.isUnderCurrentDocsTree) {
+    next = false;
+  }
+
+  if (!prev && !next) {
+    return null;
+  }
+
+  return (
+    <div className={styles.root}>
+      {prev && (
+        <NavLinkItem route={prev.route}>
+          <Icon16ChevronLeft className={styles.navLinkPrevIcon} aria-hidden />
+          <Headline>{prev.title}</Headline>
+        </NavLinkItem>
+      )}
+      {next && (
+        <NavLinkItem route={next.route} className={styles.navLinkItemNext} type="next">
+          <Headline>{next.title}</Headline>
+          <Icon16ChevronOutline className={styles.navLinkNextIcon} aria-hidden />
+        </NavLinkItem>
+      )}
+    </div>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/Navbar/Navbar.module.css b/packages/vkui-docs-theme/src/components/Navbar/Navbar.module.css
new file mode 100644
index 00000000000..fecdac703c9
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Navbar/Navbar.module.css
@@ -0,0 +1,102 @@
+.root {
+  position: sticky;
+  inset-block-start: 0;
+  z-index: 20;
+  inline-size: 100%;
+  background-color: transparent;
+  color: var(--vkui--color_text_primary);
+  border-block-end: var(--vkui--size_border--regular) solid
+    var(--vkui_docs--color_stroke_separator_secondary);
+  box-shadow: 0 8px 30px 0 rgba(0, 0, 0, 0.04);
+}
+
+.navbar {
+  display: flex;
+  margin-inline: auto;
+  align-items: center;
+  block-size: var(--vkui_docs--navbar-height);
+  max-inline-size: var(--vkui_docs--max-width);
+  justify-content: space-between;
+  padding-block: var(--vkui--spacing_size_xl);
+  padding-inline: var(--vkui--spacing_size_2xl);
+  background-color: var(--vkui--color_background_content);
+}
+
+@media (--viewWidth-desktopPlus) {
+  .navbar {
+    padding-inline: 40px;
+    padding-block: var(--vkui--spacing_size_4xl);
+  }
+}
+
+.extraContent {
+  display: none;
+}
+
+@media (--viewWidth-desktopPlus) {
+  .extraContent {
+    display: flex;
+    align-items: center;
+  }
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+.extraContent > *:not(:first-child) {
+  margin-inline-start: var(--vkui--spacing_size_m);
+}
+
+.navbarLink {
+  color: var(--vkui--color_text_primary);
+  padding-block: 8px;
+  padding-inline: 16px;
+  text-decoration: none;
+}
+
+.navbarLink:not(:last-child) {
+  margin-inline-end: var(--vkui--spacing_size_m);
+}
+
+.navbarLinkActive {
+  background-color: var(--vkui--color_field_background);
+}
+
+.links {
+  display: none;
+}
+
+@media (--viewWidth-desktopPlus) {
+  .links {
+    display: flex;
+    block-size: 36px;
+    align-items: stretch;
+  }
+}
+
+.separator.separator {
+  color: var(--vkui_docs--color_stroke_separator_secondary);
+  margin-inline-end: var(--vkui--spacing_size_m);
+}
+
+.logoLink {
+  color: var(--vkui--color_text_primary);
+}
+
+@media (--viewWidth-desktopPlus) {
+  .menuButton {
+    display: none;
+  }
+}
+
+.menuIcon {
+  box-sizing: initial;
+}
+
+.search {
+  inline-size: 200px;
+}
+
+@media (--viewWidth-smallTabletMinus) {
+  .search {
+    display: none;
+  }
+}
diff --git a/packages/vkui-docs-theme/src/components/Navbar/Navbar.tsx b/packages/vkui-docs-theme/src/components/Navbar/Navbar.tsx
new file mode 100644
index 00000000000..1caf51d7b2c
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,129 @@
+import * as React from 'react';
+import { Icon24MenuOutline } from '@vkontakte/icons';
+import { classNames } from '@vkontakte/vkjs';
+import {
+  ButtonGroup,
+  Flex,
+  Headline,
+  IconButton,
+  Tappable,
+  type TappableProps,
+  Separator as VKUISeparator,
+} from '@vkontakte/vkui';
+import NextLink from 'next/link';
+import { useFSRoute } from 'nextra/hooks';
+import type { PageItem } from 'nextra/normalize-pages';
+import { useMenu, useThemeConfig } from '../../contexts';
+import { renderComponent } from '../../helpers/render';
+import { type DocsThemeConfig } from '../../types';
+import { ColorSchemeSwitch } from '../ColorSchemeSwitch';
+import { ProjectButton } from '../ProjectButton';
+import styles from './Navbar.module.css';
+
+export type NavbarProps = {
+  items: PageItem[];
+};
+
+export function Navbar({ items }: NavbarProps): React.ReactElement {
+  const themeConfig = useThemeConfig();
+  const activeRoute = useFSRoute();
+  const { setMenu } = useMenu();
+
+  return (
+    <div className={styles.root}>
+      <nav className={styles.navbar}>
+        <Flex align="center" gap="2xl">
+          {themeConfig.logoLink ? (
+            <Logo logo={themeConfig.logo} logoLink={themeConfig.logoLink} />
+          ) : (
+            renderComponent(themeConfig.logo)
+          )}
+          {renderComponent(themeConfig.search.component, {
+            className: styles.search,
+          })}
+        </Flex>
+        <div className={classNames(styles.links)}>
+          {items.map((page, index) => {
+            if (page.display === 'hidden') {
+              return null;
+            }
+
+            let href = page.href || page.route || '#';
+
+            if (page.children) {
+              href = (page.withIndexPage ? page.route : page.firstChildRoute) || href;
+            }
+
+            const isActive =
+              (page.route === activeRoute || activeRoute.startsWith(page.route + '/')) &&
+              !page.newWindow;
+
+            return (
+              <React.Fragment key={href}>
+                {index === items.length - 1 && <Separator />}
+                <NavBarLink
+                  title={page.title}
+                  newWindow={page.newWindow}
+                  href={href}
+                  activated={isActive || undefined}
+                />
+                {index === 0 && <Separator />}
+              </React.Fragment>
+            );
+          })}
+        </div>
+        <Flex align="center" gap="m">
+          <div className={styles.extraContent}>
+            <ButtonGroup gap="s">
+              {renderComponent(themeConfig.navbar.extraButtons)}
+              {themeConfig.project.link ? (
+                <ProjectButton icon={themeConfig.project.icon} link={themeConfig.project.link} />
+              ) : null}
+            </ButtonGroup>
+            {renderComponent(themeConfig.navbar.versions)}
+          </div>
+          <ColorSchemeSwitch />
+          <IconButton className={styles.menuButton} onClick={() => setMenu(true)} label="Меню">
+            <Icon24MenuOutline className={styles.menuIcon} />
+          </IconButton>
+        </Flex>
+      </nav>
+    </div>
+  );
+}
+
+function NavBarLink({
+  title,
+  newWindow,
+  ...restProps
+}: TappableProps & { title: PageItem['title']; newWindow?: boolean }) {
+  return (
+    <Tappable
+      Component={NextLink}
+      className={styles.navbarLink}
+      activeClassName={styles.navbarLinkActive}
+      {...(newWindow ? { target: '_blank', rel: 'noreferrer' } : undefined)}
+      {...restProps}
+    >
+      <Headline level="2">{title}</Headline>
+    </Tappable>
+  );
+}
+
+function Logo({ logo, logoLink }: Pick<DocsThemeConfig, 'logo' | 'logoLink'>) {
+  return (
+    <Tappable
+      Component={NextLink}
+      hoverMode="opacity"
+      activeMode="opacity"
+      href={typeof logoLink === 'string' ? logoLink : '/'}
+      className={styles.logoLink}
+    >
+      {renderComponent(logo)}
+    </Tappable>
+  );
+}
+
+function Separator() {
+  return <VKUISeparator size="m" direction="vertical" className={styles.separator} aria-hidden />;
+}
diff --git a/packages/vkui-docs-theme/src/components/ProjectButton.tsx b/packages/vkui-docs-theme/src/components/ProjectButton.tsx
new file mode 100644
index 00000000000..0d837ac5585
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/ProjectButton.tsx
@@ -0,0 +1,16 @@
+import { Button } from '@vkontakte/vkui';
+import { type DocsThemeConfig } from '../types';
+
+export function ProjectButton({ icon, link }: Pick<DocsThemeConfig, 'project'>['project']) {
+  return (
+    <Button
+      before={icon}
+      href={link}
+      appearance="neutral"
+      mode="secondary"
+      rel="noreferrer"
+      target="_blank"
+      size="l"
+    />
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/Sidebar/Accordion/Accordion.tsx b/packages/vkui-docs-theme/src/components/Sidebar/Accordion/Accordion.tsx
new file mode 100644
index 00000000000..c8ccad23343
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Sidebar/Accordion/Accordion.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Icon20ChevronUp, Icon20Dropdown } from '@vkontakte/icons';
+import {
+  AccordionContext,
+  Flex,
+  Paragraph,
+  Tappable,
+  type TappableProps,
+  Accordion as VKUIAccordion,
+  type AccordionProps as VKUIAccordionProps,
+} from '@vkontakte/vkui';
+
+export interface AccordionProps extends Omit<TappableProps, 'onChange'> {
+  expanded: VKUIAccordionProps['expanded'];
+  onChange?: VKUIAccordionProps['onChange'];
+  children?: React.ReactNode;
+  icon?: React.ReactNode;
+  className?: string;
+  title: string;
+}
+
+function AccordionSummary({
+  title,
+  className,
+  icon: Icon,
+  ...restProps
+}: Pick<AccordionProps, 'title' | 'className' | 'icon'>) {
+  const { expanded, labelId, contentId, onChange } = React.useContext(AccordionContext);
+
+  return (
+    <Tappable
+      className={className}
+      id={labelId}
+      aria-expanded={expanded}
+      aria-controls={contentId}
+      activeMode="opacity"
+      hoverMode="opacity"
+      onClick={() => onChange(!expanded)}
+      {...restProps}
+    >
+      <Flex align="center">
+        {Icon}
+        <Paragraph>{title}</Paragraph>
+      </Flex>
+      {expanded ? <Icon20ChevronUp /> : <Icon20Dropdown />}
+    </Tappable>
+  );
+}
+
+export function Accordion({ expanded = false, children, onChange, ...restProps }: AccordionProps) {
+  return (
+    <VKUIAccordion expanded={expanded} onChange={onChange}>
+      <AccordionSummary {...restProps} />
+      <VKUIAccordion.Content>{children}</VKUIAccordion.Content>
+    </VKUIAccordion>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/Sidebar/Menu/Menu.module.css b/packages/vkui-docs-theme/src/components/Sidebar/Menu/Menu.module.css
new file mode 100644
index 00000000000..6dc914b585a
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Sidebar/Menu/Menu.module.css
@@ -0,0 +1,71 @@
+.root {
+  --vkui_docs--menu-item-icon-size: 36px;
+}
+
+.menuItem {
+  block-size: 44px;
+  display: flex;
+  align-items: center;
+  color: var(--vkui--color_text_secondary);
+  text-decoration: none;
+}
+
+@media (--viewWidth-desktopPlus) {
+  .menuItem {
+    margin-inline: var(--vkui--spacing_size_xl);
+  }
+}
+
+.listItem:not(:first-of-type) {
+  margin-block-start: var(--vkui--spacing_size_xs);
+}
+
+@media (--viewWidth-desktopPlus) {
+  .listItem:not(:first-of-type) {
+    margin-block-start: var(--vkui--spacing_size_m);
+  }
+}
+
+.nestedMenu .listItem {
+  margin-block-start: 0;
+}
+
+.activeMenuItem {
+  color: var(--vkui--color_text_primary);
+}
+
+.menuIcon {
+  margin-inline-end: var(--vkui--spacing_size_xl);
+  color: var(--vkui--color_icon_secondary);
+  background-color: var(--vkui--color_background_tertiary);
+  padding: 8px;
+  border-radius: 8px;
+  block-size: var(--vkui_docs--menu-item-icon-size);
+  inline-size: var(--vkui_docs--menu-item-icon-size);
+}
+
+.activeMenuIcon {
+  color: var(--vkui--color_icon_primary);
+}
+
+.accordion {
+  justify-content: space-between;
+}
+
+.nestedMenu {
+  margin-inline-start: var(--vkui--spacing_size_xl);
+  position: relative;
+}
+
+.menuItemWithIcon {
+  margin-inline-start: calc(var(--vkui_docs--menu-item-icon-size) + var(--vkui--spacing_size_xl));
+}
+
+.currentMenu .nestedMenu .nestedMenu::before {
+  content: '';
+  position: absolute;
+  display: block;
+  inline-size: 1px;
+  inset-block: var(--vkui--size_base_padding_vertical--regular);
+  background-color: var(--vkui_docs--color_stroke_separator_secondary);
+}
diff --git a/packages/vkui-docs-theme/src/components/Sidebar/Menu/Menu.tsx b/packages/vkui-docs-theme/src/components/Sidebar/Menu/Menu.tsx
new file mode 100644
index 00000000000..f45bfd8a397
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Sidebar/Menu/Menu.tsx
@@ -0,0 +1,156 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Paragraph, Tappable } from '@vkontakte/vkui';
+import NextLink from 'next/link';
+import { useFSRoute } from 'nextra/hooks';
+import type { Item, PageItem } from 'nextra/normalize-pages';
+import { Accordion, type AccordionProps } from '../Accordion/Accordion';
+import styles from './Menu.module.css';
+
+const TreeState: Record<string, boolean> = Object.create(null);
+
+interface MenuProps {
+  directories: PageItem[] | Item[];
+  className?: string;
+  metaData?: Record<string, React.FC>;
+  onlyCurrentDocs?: boolean;
+}
+
+type FolderProps = {
+  item: PageItem | Item;
+  icon?: React.FC;
+};
+
+function MenuItemIcon({ active, Component }: { active?: boolean; Component: React.FC }) {
+  return (
+    <div className={classNames(styles.menuIcon, active && styles.activeMenuIcon)}>
+      <Component />
+    </div>
+  );
+}
+
+function Folder({ item, icon }: FolderProps) {
+  const routeOriginal = useFSRoute();
+  const [route] = routeOriginal.split('#');
+  const active = route === item.route;
+  const activeRouteInside = active || route.startsWith(item.route + '/');
+
+  const { theme } = item as Item;
+
+  const open =
+    TreeState[item.route] === undefined
+      ? active || activeRouteInside || (!theme ? false : theme.collapsed)
+      : TreeState[item.route];
+
+  const rerender = React.useState({})[1];
+
+  React.useEffect(() => {
+    const updateTreeState = () => {
+      if (activeRouteInside) {
+        TreeState[item.route] = true;
+      }
+    };
+    updateTreeState();
+  }, [activeRouteInside, item.route]);
+
+  const isLink = 'withIndexPage' in item && item.withIndexPage;
+
+  let props: AccordionProps = {
+    title: item.title,
+    className: classNames(
+      styles.menuItem,
+      styles.accordion,
+      activeRouteInside && styles.activeMenuItem,
+    ),
+    icon: icon && <MenuItemIcon active={activeRouteInside} Component={icon} />,
+    expanded: open,
+    onChange: () => {
+      if (isLink) {
+        if (active) {
+          // eslint-disable-next-line react-compiler/react-compiler
+          TreeState[item.route] = !open;
+        } else {
+          TreeState[item.route] = true;
+        }
+        rerender({});
+        return;
+      }
+      if (active) {
+        return;
+      }
+      TreeState[item.route] = !open;
+      rerender({});
+    },
+  };
+
+  if (isLink) {
+    props.Component = NextLink;
+    props.focusVisibleMode = 'outside';
+    props.href = (item as PageItem).href || item.route;
+  }
+
+  return (
+    <li className={styles.listItem}>
+      <Accordion {...props}>
+        {Array.isArray(item.children) ? (
+          <Menu
+            className={classNames(styles.nestedMenu, icon && styles.menuItemWithIcon)}
+            directories={item.children}
+          />
+        ) : null}
+      </Accordion>
+    </li>
+  );
+}
+
+function File({ item, icon }: { item: PageItem | Item; icon?: React.FC }): React.ReactElement {
+  const route = useFSRoute();
+  const active = Boolean(item.route && route === item.route);
+
+  return (
+    <li className={styles.listItem}>
+      <Tappable
+        href={(item as PageItem).href || item.route}
+        className={classNames(styles.menuItem, active && styles.activeMenuItem)}
+        activeMode="opacity"
+        hoverMode="opacity"
+        Component={NextLink}
+        focusVisibleMode="outside"
+        {...((item as PageItem).newWindow ? { target: '_blank', rel: 'noreferrer' } : undefined)}
+      >
+        {icon && <MenuItemIcon active={active} Component={icon} />}
+        <Paragraph>{item.title}</Paragraph>
+      </Tappable>
+    </li>
+  );
+}
+
+export function Menu({
+  directories,
+  className,
+  metaData = {},
+  onlyCurrentDocs = false,
+}: MenuProps): React.ReactElement {
+  return (
+    <ul className={classNames(styles.root, onlyCurrentDocs && styles.currentMenu, className)}>
+      {directories.map((item) => {
+        if (onlyCurrentDocs && !item.isUnderCurrentDocsTree) {
+          return null;
+        }
+
+        const Component =
+          item.type === 'menu' || (item.children && (item.children.length || !item.withIndexPage))
+            ? Folder
+            : File;
+
+        return (
+          <Component
+            key={item.name}
+            item={item}
+            icon={onlyCurrentDocs ? metaData[item.name] : undefined}
+          />
+        );
+      })}
+    </ul>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/Sidebar/MobileSidebar/MobileSidebar.module.css b/packages/vkui-docs-theme/src/components/Sidebar/MobileSidebar/MobileSidebar.module.css
new file mode 100644
index 00000000000..1f8e205842e
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Sidebar/MobileSidebar/MobileSidebar.module.css
@@ -0,0 +1,141 @@
+.root {
+  display: flex;
+  flex-direction: column;
+  position: fixed;
+  inset-block-start: 0;
+  inset-block-end: 0;
+  inline-size: 380px;
+  inset-inline-end: 0;
+  background-color: var(--vkui_docs--color_background_content);
+  /* TODO: move to the common file with all the sizes? */
+  z-index: 30;
+  will-change: transform;
+  border-radius: var(--vkui--size_border_radius--regular);
+}
+
+@media (--viewWidth-smallTabletMinus) {
+  .root {
+    inline-size: 320px;
+  }
+}
+
+.backdrop {
+  position: fixed;
+  inset: 0;
+  /* TODO move to the common file with all the sizes? */
+  z-index: 29;
+  background-color: var(--vkui--color_overlay_primary);
+  will-change: opacity;
+  opacity: 0;
+  transition: opacity 0.8s;
+}
+
+.backdropShow {
+  animation: animation-sidebar-fade-in var(--vkui--animation_duration_l) ease both;
+}
+
+.backdropHide {
+  animation: animation-sidebar-fade-out var(--vkui--animation_duration_l) ease both;
+}
+
+.rootShow {
+  animation: animation-sidebar-translate-in var(--vkui--animation_duration_l) ease both;
+}
+
+.rootHide {
+  animation: animation-sidebar-translate-out var(--vkui--animation_duration_l) ease both;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .rootShow {
+    animation-name: animation-sidebar-fade-in;
+  }
+
+  .rootHide {
+    animation-name: animation-sidebar-fade-out;
+  }
+}
+@media (--viewWidth-smallTabletPlus) {
+  .mobileHidden {
+    display: none;
+  }
+}
+
+.inner {
+  padding-block: var(--vkui--spacing_size_2xl);
+  padding-inline: var(--vkui--spacing_size_2xl);
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex-grow: 1;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+
+@media (--viewWidth-smallTabletMinus) {
+  .inner {
+    padding-block-start: 4px;
+  }
+}
+
+/*
+  Animations
+ */
+
+@keyframes animation-sidebar-translate-in {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+@keyframes animation-sidebar-translate-out {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes animation-sidebar-fade-in {
+  from {
+    opacity: 0;
+  }
+
+  to {
+    opacity: 1;
+  }
+}
+@keyframes animation-sidebar-fade-out {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+.extra {
+  position: sticky;
+  inset-block-end: 0;
+  display: flex;
+  padding-block: var(--vkui--spacing_size_2xl);
+  padding-inline: var(--vkui--spacing_size_2xl);
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+.extra > *:not(:last-child) {
+  margin-inline-end: var(--vkui--spacing_size_xl);
+}
+
+.extra > :first-child {
+  flex: 1 1 auto;
+}
+
+.search {
+  padding-block-start: var(--vkui--spacing_size_2xl);
+  padding-inline: var(--vkui--spacing_size_2xl);
+}
diff --git a/packages/vkui-docs-theme/src/components/Sidebar/MobileSidebar/MobileSidebar.tsx b/packages/vkui-docs-theme/src/components/Sidebar/MobileSidebar/MobileSidebar.tsx
new file mode 100644
index 00000000000..00aa518ddb9
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Sidebar/MobileSidebar/MobileSidebar.tsx
@@ -0,0 +1,89 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import {
+  AdaptivityProvider,
+  ButtonGroup,
+  Separator,
+  SizeType,
+  Spacing,
+  useAdaptivityWithJSMediaQueries,
+  unstable_useCSSKeyframesAnimationController as useCSSKeyframesAnimationController,
+  useScrollLock,
+  ViewWidth,
+} from '@vkontakte/vkui';
+import { useRouter } from 'next/router';
+import type { Item } from 'nextra/normalize-pages';
+import { useMenu, useThemeConfig } from '../../../contexts';
+import { renderComponent } from '../../../helpers/render';
+import { ProjectButton } from '../../ProjectButton';
+import { Menu } from '../Menu/Menu';
+import styles from './MobileSidebar.module.css';
+
+interface MobileSideBarProps {
+  flatDirectories: Item[];
+  fullDirectories: Item[];
+}
+
+export function MobileSidebar({ flatDirectories, fullDirectories }: MobileSideBarProps) {
+  const themeConfig = useThemeConfig();
+  const { menu, setMenu } = useMenu();
+  const router = useRouter();
+  const [animationState, animationHandlers] = useCSSKeyframesAnimationController(
+    menu ? 'enter' : 'exit',
+    undefined,
+    true,
+  );
+  const visible = animationState !== 'exited';
+  const { viewWidth } = useAdaptivityWithJSMediaQueries();
+
+  React.useEffect(() => {
+    setMenu(false);
+  }, [router.asPath, setMenu]);
+
+  useScrollLock(menu);
+
+  React.useEffect(() => {
+    if (viewWidth === ViewWidth.DESKTOP) {
+      setMenu(false);
+    }
+  }, [viewWidth]);
+
+  if (!visible) {
+    return null;
+  }
+
+  return (
+    <>
+      <div
+        className={classNames(styles.backdrop, menu ? styles.backdropShow : styles.backdropHide)}
+        onClick={() => setMenu(false)}
+      />
+      <aside
+        className={classNames(styles.root, menu ? styles.rootShow : styles.rootHide)}
+        {...animationHandlers}
+      >
+        <div className={classNames(styles.mobileHidden, styles.search)}>
+          {renderComponent(themeConfig.search.component, {
+            directories: flatDirectories,
+          })}
+        </div>
+        <Spacing size={15} className={styles.mobileHidden} />
+        <Separator className={styles.mobileHidden} />
+        <nav className={styles.inner}>
+          <Menu directories={fullDirectories} />
+        </nav>
+        <AdaptivityProvider sizeY={SizeType.REGULAR}>
+          <div className={classNames(styles.extra)}>
+            {renderComponent(themeConfig.navbar.versions, { sizeY: 'regular' })}
+            <ButtonGroup gap="m">
+              {renderComponent(themeConfig.navbar.extraButtons)}
+              {themeConfig.project.link ? (
+                <ProjectButton icon={themeConfig.project.icon} link={themeConfig.project.link} />
+              ) : null}
+            </ButtonGroup>
+          </div>
+        </AdaptivityProvider>
+      </aside>
+    </>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/Sidebar/Sidebar.module.css b/packages/vkui-docs-theme/src/components/Sidebar/Sidebar.module.css
new file mode 100644
index 00000000000..2fe94f09397
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Sidebar/Sidebar.module.css
@@ -0,0 +1,59 @@
+.root {
+  display: flex;
+  flex-direction: column;
+}
+
+@media (--viewWidth-desktopPlus) {
+  .root {
+    position: sticky;
+    flex-shrink: 0;
+    align-self: flex-start;
+    inline-size: 310px;
+    inset-block-start: var(--vkui_docs--navbar-height);
+    border-inline-end: var(--vkui--size_border--regular) solid
+      var(--vkui_docs--color_stroke_separator_secondary);
+  }
+}
+@media (--viewWidth-tabletMinus), (--viewWidth-tablet) {
+  .root {
+    position: fixed;
+    inset-block-start: 0;
+    inset-block-end: 0;
+    inline-size: 320px;
+    inset-inline-end: 0;
+    background-color: var(--vkui_docs--color_background_content);
+    /* TODO: move to the common file with all the sizes? */
+    z-index: 30;
+    will-change: transform;
+    border-radius: var(--vkui--size_border_radius--regular);
+  }
+}
+
+.inner {
+  block-size: calc(100vh - var(--vkui_docs--navbar-height));
+  padding-block: 32px var(--vkui--spacing_size_4xl);
+  padding-inline: var(--vkui--spacing_size_3xl);
+  overflow-x: hidden;
+  overflow-y: auto;
+  flex-grow: 1;
+  scrollbar-width: thin;
+  scrollbar-gutter: stable;
+}
+
+@media (--viewWidth-tablet), (--viewWidth-smallTabletMinus) {
+  .inner {
+    padding-block: var(--vkui--spacing_size_2xl);
+    padding-inline: var(--vkui--spacing_size_2xl);
+    block-size: calc(100vh - 76px);
+  }
+}
+@media (--viewWidth-smallTabletMinus) {
+  .inner {
+    block-size: calc(100vh - 76px - 52px);
+  }
+}
+@media (--viewWidth-tabletMinus), (--viewWidth-tablet) {
+  .lessThenDesktopHidden {
+    display: none;
+  }
+}
diff --git a/packages/vkui-docs-theme/src/components/Sidebar/Sidebar.tsx b/packages/vkui-docs-theme/src/components/Sidebar/Sidebar.tsx
new file mode 100644
index 00000000000..096c4a46a6d
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/Sidebar/Sidebar.tsx
@@ -0,0 +1,42 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { Spacing } from '@vkontakte/vkui';
+import { useMounted } from 'nextra/hooks';
+import type { Item, PageItem } from 'nextra/normalize-pages';
+import { Menu } from './Menu/Menu';
+import { MobileSidebar } from './MobileSidebar/MobileSidebar';
+import styles from './Sidebar.module.css';
+
+interface SideBarProps {
+  docsDirectories: PageItem[];
+  flatDirectories: Item[];
+  fullDirectories: Item[];
+  asPopover?: boolean;
+  metaData?: Record<string, React.FC>;
+}
+
+export function Sidebar({
+  docsDirectories,
+  flatDirectories,
+  fullDirectories,
+  asPopover = false,
+  metaData,
+}: SideBarProps): React.ReactElement {
+  const mounted = useMounted();
+
+  return (
+    <>
+      {!asPopover && (
+        <div className={classNames(styles.root, styles.lessThenDesktopHidden)}>
+          <nav className={styles.inner}>
+            <Spacing size="xl" />
+            <Menu directories={docsDirectories} metaData={metaData} onlyCurrentDocs />
+          </nav>
+        </div>
+      )}
+      {mounted && (
+        <MobileSidebar flatDirectories={flatDirectories} fullDirectories={fullDirectories} />
+      )}
+    </>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/components/index.ts b/packages/vkui-docs-theme/src/components/index.ts
new file mode 100644
index 00000000000..1acf6225a8e
--- /dev/null
+++ b/packages/vkui-docs-theme/src/components/index.ts
@@ -0,0 +1,7 @@
+export { Anchor } from './Anchor';
+export { Head } from './Head';
+export { Sidebar } from './Sidebar/Sidebar';
+export { Breadcrumbs } from './Breadcrumbs/Breadcrumbs';
+export { NavLinks } from './NavLinks/NavLinks';
+export { Navbar } from './Navbar/Navbar';
+export { ColorSchemeSwitch } from './ColorSchemeSwitch';
diff --git a/packages/vkui-docs-theme/src/constants.tsx b/packages/vkui-docs-theme/src/constants.tsx
new file mode 100644
index 00000000000..e90a594f65c
--- /dev/null
+++ b/packages/vkui-docs-theme/src/constants.tsx
@@ -0,0 +1,39 @@
+import { Search as SearchVKUI } from '@vkontakte/vkui';
+import { Navbar } from './components';
+import { GithubIcon, LogoIcon } from './icons';
+import type { DocsThemeConfig } from './types';
+
+export const DEFAULT_THEME: DocsThemeConfig = {
+  direction: 'ltr',
+  logo: LogoIcon,
+  logoLink: true,
+  navbar: {
+    component: (props) => <Navbar {...props} />,
+  },
+  colorScheme: {
+    defaultColorScheme: 'system',
+    storageKey: 'vkui-docs-theme',
+  },
+  search: {
+    component: function Search(props) {
+      return <SearchVKUI {...props} noPadding />;
+    },
+    emptyResult: '',
+    loading: '',
+    error: '',
+    placeholder: '',
+  },
+  navigation: true,
+  project: {
+    link: 'https://github.com/VKCOM/VKUI',
+    icon: (
+      <GithubIcon
+        width="24"
+        height="24"
+        viewBox="0 0 20 20"
+        verticalAlign="middle"
+        color="medium"
+      />
+    ),
+  },
+};
diff --git a/packages/vkui-docs-theme/src/contexts/color-scheme/helpers.ts b/packages/vkui-docs-theme/src/contexts/color-scheme/helpers.ts
new file mode 100644
index 00000000000..4657730b4b4
--- /dev/null
+++ b/packages/vkui-docs-theme/src/contexts/color-scheme/helpers.ts
@@ -0,0 +1,42 @@
+import type { ColorSchemeExtendedType } from './types';
+
+export function getColorScheme(key: string, defaultColorScheme?: ColorSchemeExtendedType) {
+  if (typeof window === 'undefined') {
+    return undefined;
+  }
+  let colorScheme;
+  try {
+    colorScheme = localStorage.getItem(key) || undefined;
+  } catch (e) {
+    // Unsupported
+  }
+  return colorScheme || defaultColorScheme;
+}
+
+export function getSystemColorScheme(e?: MediaQueryList | MediaQueryListEvent) {
+  if (!e) {
+    e = window.matchMedia('(prefers-color-scheme: dark)');
+  }
+  const isDark = e.matches;
+  const systemColorScheme = isDark ? 'dark' : 'light';
+  return systemColorScheme;
+}
+
+const LIGHT_CLASS_NAME = 'vkui--vkBase--light';
+const DARK_CLASS_NAME = 'vkui--vkBase--dark';
+
+export function updateDOM(colorScheme?: ColorSchemeExtendedType) {
+  if (!colorScheme) {
+    return;
+  }
+
+  let resolved = colorScheme;
+
+  if (colorScheme === 'system') {
+    resolved = getSystemColorScheme();
+  }
+
+  document.documentElement.classList.remove(LIGHT_CLASS_NAME, DARK_CLASS_NAME);
+  document.documentElement.classList.add(resolved === 'dark' ? DARK_CLASS_NAME : LIGHT_CLASS_NAME);
+  document.documentElement.style.colorScheme = resolved;
+}
diff --git a/packages/vkui-docs-theme/src/contexts/color-scheme/index.tsx b/packages/vkui-docs-theme/src/contexts/color-scheme/index.tsx
new file mode 100644
index 00000000000..ab78b0f6f3a
--- /dev/null
+++ b/packages/vkui-docs-theme/src/contexts/color-scheme/index.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import { noop } from '@vkontakte/vkjs';
+import type { ColorSchemeType } from '@vkontakte/vkui';
+import { getColorScheme, getSystemColorScheme, updateDOM } from './helpers';
+import { ColorSchemeScript } from './script';
+import type {
+  ColorSchemeExtendedType,
+  ColorSchemeProviderProps,
+  UseColorSchemeProps,
+} from './types';
+
+export type { ColorSchemeProviderProps, UseColorSchemeProps };
+
+const ColorSchemeContext = React.createContext<UseColorSchemeProps>({
+  setColorScheme: noop,
+});
+
+export const useColorScheme = () => React.useContext(ColorSchemeContext);
+
+export const ColorSchemeProvider = ({
+  defaultColorScheme = 'system',
+  storageKey = 'vkui-theme',
+  children,
+}: ColorSchemeProviderProps) => {
+  const [colorScheme, setColorScheme] = React.useState(
+    () => getColorScheme(storageKey, defaultColorScheme) as ColorSchemeExtendedType,
+  );
+  const [systemColorScheme, setSystemColorScheme] = React.useState(
+    () => getColorScheme(storageKey) as ColorSchemeType | undefined,
+  );
+
+  const handleColorScheme = React.useCallback(
+    (value: React.SetStateAction<ColorSchemeExtendedType>) => {
+      const newColorScheme = typeof value === 'function' ? value(colorScheme) : value;
+      setColorScheme(newColorScheme);
+
+      localStorage.setItem(storageKey, newColorScheme);
+    },
+    [colorScheme],
+  );
+
+  React.useEffect(() => {
+    const mediaQuery = window ? window.matchMedia('(prefers-color-scheme: dark)') : undefined;
+
+    if (!mediaQuery) {
+      return noop;
+    }
+
+    const handleMediaQuery = (e: MediaQueryListEvent | MediaQueryList) => {
+      const resolved = getSystemColorScheme(e);
+      setSystemColorScheme(resolved);
+
+      if (colorScheme === 'system') {
+        updateDOM('system');
+      }
+    };
+
+    mediaQuery.addEventListener?.('change', handleMediaQuery);
+    handleMediaQuery(mediaQuery);
+
+    return () => mediaQuery.removeEventListener?.('change', handleMediaQuery);
+  }, [colorScheme]);
+
+  React.useEffect(() => {
+    if (!window) {
+      return noop;
+    }
+
+    const handleStorage = (e: StorageEvent) => {
+      if (e.key !== storageKey) {
+        return;
+      }
+
+      if (!e.newValue) {
+        handleColorScheme(defaultColorScheme);
+      } else {
+        setColorScheme(e.newValue as ColorSchemeExtendedType);
+      }
+    };
+
+    window.addEventListener('storage', handleStorage);
+
+    return () => window.removeEventListener('storage', handleStorage);
+  }, [handleColorScheme, defaultColorScheme]);
+
+  React.useEffect(() => {
+    updateDOM(colorScheme);
+  }, [colorScheme]);
+
+  const providerValue = React.useMemo(
+    () => ({
+      colorScheme,
+      setColorScheme: handleColorScheme,
+      resolvedColorScheme: colorScheme === 'system' ? systemColorScheme : colorScheme,
+    }),
+    [colorScheme, handleColorScheme, systemColorScheme],
+  );
+
+  return (
+    <ColorSchemeContext.Provider value={providerValue}>
+      <ColorSchemeScript storageKey={storageKey} defaultColorScheme={defaultColorScheme} />
+      {children}
+    </ColorSchemeContext.Provider>
+  );
+};
diff --git a/packages/vkui-docs-theme/src/contexts/color-scheme/script.tsx b/packages/vkui-docs-theme/src/contexts/color-scheme/script.tsx
new file mode 100644
index 00000000000..a0169e6a19e
--- /dev/null
+++ b/packages/vkui-docs-theme/src/contexts/color-scheme/script.tsx
@@ -0,0 +1,43 @@
+import * as React from 'react';
+import type { ColorSchemeExtendedType } from './types';
+
+export const ColorSchemeScript = React.memo(
+  ({
+    storageKey,
+    defaultColorScheme,
+  }: {
+    storageKey: string;
+    defaultColorScheme: ColorSchemeExtendedType;
+  }) => {
+    const scriptArgs = JSON.stringify([storageKey, defaultColorScheme]).slice(1, -1);
+
+    return (
+      <script
+        suppressHydrationWarning
+        dangerouslySetInnerHTML={{ __html: `(${script.toString()})(${scriptArgs})` }}
+      />
+    );
+  },
+);
+ColorSchemeScript.displayName = 'ColorSchemeScript';
+
+function script(storageKey: string, defaultColorScheme: 'light' | 'dark') {
+  const LIGHT_CLASS_NAME = 'vkui--vkBase--light';
+  const DARK_CLASS_NAME = 'vkui--vkBase--dark';
+
+  try {
+    const colorScheme = localStorage.getItem(storageKey) || defaultColorScheme;
+    let resolved = colorScheme;
+    if (resolved === 'system') {
+      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+    }
+
+    document.documentElement.classList.remove(LIGHT_CLASS_NAME, DARK_CLASS_NAME);
+    const colorSchemeClassName = resolved === 'dark' ? DARK_CLASS_NAME : LIGHT_CLASS_NAME;
+    document.documentElement.classList.add(colorSchemeClassName);
+
+    document.documentElement.style.colorScheme = resolved;
+  } catch (e) {
+    //
+  }
+}
diff --git a/packages/vkui-docs-theme/src/contexts/color-scheme/types.ts b/packages/vkui-docs-theme/src/contexts/color-scheme/types.ts
new file mode 100644
index 00000000000..c73dbb61fdb
--- /dev/null
+++ b/packages/vkui-docs-theme/src/contexts/color-scheme/types.ts
@@ -0,0 +1,14 @@
+import type { ColorSchemeType } from '@vkontakte/vkui';
+
+export type ColorSchemeExtendedType = ColorSchemeType | 'system';
+
+export interface UseColorSchemeProps {
+  setColorScheme: React.Dispatch<React.SetStateAction<ColorSchemeExtendedType>>;
+  colorScheme?: ColorSchemeExtendedType;
+  resolvedColorScheme?: ColorSchemeType;
+}
+
+export interface ColorSchemeProviderProps extends React.PropsWithChildren {
+  storageKey: string;
+  defaultColorScheme?: ColorSchemeExtendedType;
+}
diff --git a/packages/vkui-docs-theme/src/contexts/config.tsx b/packages/vkui-docs-theme/src/contexts/config.tsx
new file mode 100644
index 00000000000..1bdb716cf87
--- /dev/null
+++ b/packages/vkui-docs-theme/src/contexts/config.tsx
@@ -0,0 +1,64 @@
+import * as React from 'react';
+import type { PageOpts } from 'nextra';
+import { useFSRoute } from 'nextra/hooks';
+import { normalizePages } from 'nextra/normalize-pages';
+
+type Config = Pick<PageOpts, 'title' | 'frontMatter' | 'filePath' | 'timestamp'> & {
+  hideSidebar: boolean;
+  normalizePagesResult: ReturnType<typeof normalizePages>;
+  metaData?: Record<string, React.FC>;
+};
+
+const ConfigContext = React.createContext<Config>({
+  title: '',
+  frontMatter: {},
+  filePath: '',
+  hideSidebar: false,
+  // @ts-expect-error: TS2740 No default value
+  normalizePagesResult: {},
+});
+
+export function useConfig() {
+  return React.useContext(ConfigContext);
+}
+
+export const ConfigProvider = ({
+  children,
+  value: pageOpts,
+}: {
+  children: React.ReactNode;
+  value: PageOpts;
+}): React.ReactElement => {
+  const fsPath = useFSRoute();
+
+  const normalizePagesResult = React.useMemo(
+    () => normalizePages({ list: pageOpts.pageMap, route: fsPath }),
+    [pageOpts.pageMap, fsPath],
+  );
+
+  const { activeType, activePath, activeThemeContext: themeContext } = normalizePagesResult;
+
+  // There are no more additional fields on item, so we extract meta by this mess
+  let metaData: Record<string, React.FC> = {};
+  pageOpts.pageMap.forEach((page) => {
+    if ('name' in page && page.name === activePath[0].name && 'children' in page) {
+      const data = page.children.find((value) => 'data' in value)?.data || {};
+      const metaKeys = Object.keys(data);
+      for (let key of metaKeys) {
+        // @ts-expect-error: TS2339 No icon type on item
+        metaData[key] = data[key].icon;
+      }
+    }
+  });
+
+  const extendedConfig: Config = {
+    title: pageOpts.title,
+    frontMatter: pageOpts.frontMatter,
+    filePath: pageOpts.filePath,
+    hideSidebar: !themeContext.sidebar || themeContext.layout === 'raw' || activeType === 'page',
+    normalizePagesResult,
+    metaData,
+  };
+
+  return <ConfigContext.Provider value={extendedConfig}>{children}</ConfigContext.Provider>;
+};
diff --git a/packages/vkui-docs-theme/src/contexts/index.ts b/packages/vkui-docs-theme/src/contexts/index.ts
new file mode 100644
index 00000000000..60178571ee9
--- /dev/null
+++ b/packages/vkui-docs-theme/src/contexts/index.ts
@@ -0,0 +1,4 @@
+export { useConfig, ConfigProvider } from './config';
+export { useColorScheme, ColorSchemeProvider, type ColorSchemeProviderProps } from './color-scheme';
+export { useMenu, MenuProvider } from './menu';
+export { ThemeConfigProvider, useThemeConfig } from './theme';
diff --git a/packages/vkui-docs-theme/src/contexts/menu.tsx b/packages/vkui-docs-theme/src/contexts/menu.tsx
new file mode 100644
index 00000000000..f5a33978c4a
--- /dev/null
+++ b/packages/vkui-docs-theme/src/contexts/menu.tsx
@@ -0,0 +1,22 @@
+import * as React from 'react';
+import { noop } from '@vkontakte/vkjs';
+
+interface Menu {
+  menu: boolean;
+  setMenu: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const MenuContext = React.createContext<Menu>({
+  menu: false,
+  setMenu: noop,
+});
+
+export const useMenu = () => React.useContext(MenuContext);
+
+export function MenuProvider({ children }: { children: React.ReactNode }) {
+  const [menu, setMenu] = React.useState(false);
+
+  const value = React.useMemo(() => ({ menu, setMenu }), [menu]);
+
+  return <MenuContext.Provider value={value}>{children}</MenuContext.Provider>;
+}
diff --git a/packages/vkui-docs-theme/src/contexts/theme.tsx b/packages/vkui-docs-theme/src/contexts/theme.tsx
new file mode 100644
index 00000000000..ca0e92fb75b
--- /dev/null
+++ b/packages/vkui-docs-theme/src/contexts/theme.tsx
@@ -0,0 +1,32 @@
+import * as React from 'react';
+import { DEFAULT_THEME } from '../constants';
+import type { DocsThemeConfig } from '../types';
+
+const ThemeConfigContext = React.createContext<DocsThemeConfig>(DEFAULT_THEME);
+
+export const useThemeConfig = () => React.useContext(ThemeConfigContext);
+
+export function ThemeConfigProvider({
+  value,
+  children,
+}: {
+  value?: DocsThemeConfig;
+  children: React.ReactNode;
+}) {
+  const storeRef = React.useRef<DocsThemeConfig>(undefined);
+  storeRef.current ||= {
+    ...DEFAULT_THEME,
+    ...(value &&
+      Object.fromEntries(
+        Object.entries(value).map(([key, value]) => [
+          key,
+          // @ts-expect-error: TS7053 value always there
+          value && typeof value === 'object' ? { ...DEFAULT_THEME[key], ...value } : value,
+        ]),
+      )),
+  };
+
+  return (
+    <ThemeConfigContext.Provider value={storeRef.current}>{children}</ThemeConfigContext.Provider>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/helpers/render.tsx b/packages/vkui-docs-theme/src/helpers/render.tsx
new file mode 100644
index 00000000000..71a6c7ee868
--- /dev/null
+++ b/packages/vkui-docs-theme/src/helpers/render.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+
+export function renderComponent<T>(ComponentOrNode: React.FC<T> | React.ReactNode, props?: T) {
+  if (!ComponentOrNode) {
+    return null;
+  }
+  if (typeof ComponentOrNode !== 'function') {
+    return ComponentOrNode;
+  }
+
+  // @ts-expect-error: TS2322 Type '{}' is not assignable to type 'T'
+  return <ComponentOrNode {...props} />;
+}
diff --git a/packages/vkui-docs-theme/src/hooks/useFetch.ts b/packages/vkui-docs-theme/src/hooks/useFetch.ts
new file mode 100644
index 00000000000..3fc89e6d473
--- /dev/null
+++ b/packages/vkui-docs-theme/src/hooks/useFetch.ts
@@ -0,0 +1,78 @@
+import * as React from 'react';
+
+const initialState = {
+  error: undefined,
+  data: undefined,
+};
+
+/**
+ * @see https://usehooks-ts.com/react-hook/use-fetch
+ */
+export function useFetch(url: string | null, options?: RequestInit) {
+  const cache = React.useRef<Record<string, unknown>>({});
+  const cancelRequest = React.useRef(false);
+
+  const fetchReducer = (
+    state: unknown,
+    action: { type: 'loading' | 'fetched' | 'error'; payload?: unknown },
+  ) => {
+    switch (action.type) {
+      case 'loading':
+        return { ...initialState };
+      case 'fetched':
+        return { ...initialState, data: action.payload };
+      case 'error':
+        return { ...initialState, error: action.payload };
+      default:
+        return state;
+    }
+  };
+
+  const [state, dispatch] = React.useReducer(fetchReducer, initialState);
+
+  React.useEffect(() => {
+    if (!url) {
+      return;
+    }
+
+    cancelRequest.current = false;
+
+    const fetchData = async () => {
+      dispatch({ type: 'loading' });
+
+      if (cache.current[url]) {
+        dispatch({ type: 'fetched', payload: cache.current[url] });
+        return;
+      }
+
+      try {
+        const response = await fetch(url, options);
+        if (!response.ok) {
+          throw new Error(response.statusText);
+        }
+
+        const data = await response.json();
+        cache.current[url] = data;
+        if (cancelRequest.current) {
+          return;
+        }
+
+        dispatch({ type: 'fetched', payload: data });
+      } catch (error) {
+        if (cancelRequest.current) {
+          return;
+        }
+
+        dispatch({ type: 'error', payload: error });
+      }
+    };
+
+    void fetchData();
+
+    return () => {
+      cancelRequest.current = true;
+    };
+  }, [url]);
+
+  return state;
+}
diff --git a/packages/vkui-docs-theme/src/icons/FigmaIcon.tsx b/packages/vkui-docs-theme/src/icons/FigmaIcon.tsx
new file mode 100644
index 00000000000..70232e58062
--- /dev/null
+++ b/packages/vkui-docs-theme/src/icons/FigmaIcon.tsx
@@ -0,0 +1,16 @@
+import { SvgIcon, type SvgIconProps } from './SvgIcon';
+
+export function FigmaIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon viewBox="0 0 20 20" fill="none" {...props}>
+      <path
+        fill="#E8E8E8"
+        d="M7.67 18c1.47 0 2.66-1.2 2.66-2.67v-2.66H7.67a2.67 2.67 0 0 0 0 5.33Z"
+      />
+      <path fill="#fff" d="M5 10c0-1.47 1.2-2.67 2.67-2.67h2.66v5.34H7.67A2.67 2.67 0 0 1 5 10Z" />
+      <path fill="#F6F6F6" d="M5 4.67C5 3.19 6.2 2 7.67 2h2.66v5.33H7.67A2.67 2.67 0 0 1 5 4.67Z" />
+      <path fill="#fff" d="M10.33 2H13a2.67 2.67 0 0 1 0 5.33h-2.67V2Z" />
+      <path fill="#F6F6F6" d="M15.67 10a2.67 2.67 0 1 1-5.34 0 2.67 2.67 0 0 1 5.34 0Z" />
+    </SvgIcon>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/icons/GithubIcon.tsx b/packages/vkui-docs-theme/src/icons/GithubIcon.tsx
new file mode 100644
index 00000000000..59003a67ebc
--- /dev/null
+++ b/packages/vkui-docs-theme/src/icons/GithubIcon.tsx
@@ -0,0 +1,14 @@
+import { SvgIcon, type SvgIconProps } from './SvgIcon';
+
+export function GithubIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon viewBox="0 0 20 20" fill="none" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M10 1.8a8.4 8.4 0 0 0-2.6 16.4c.4 0 .5-.2.5-.4v-1.6c-2.3.5-2.8-1-2.8-1-.4-1-1-1.2-1-1.2-.7-.5.1-.5.1-.5.9 0 1.3.8 1.3.8.8 1.3 2 1 2.5.7 0-.5.3-.9.5-1-1.9-.3-3.8-1-3.8-4.2 0-1 .3-1.7.8-2.3 0-.2-.3-1 .1-2.2 0 0 .7-.2 2.3.8a8 8 0 0 1 4.2 0c1.6-1 2.3-.8 2.3-.8a3 3 0 0 1 0 2.2c.6.6 1 1.3 1 2.3 0 3.2-2 3.9-3.9 4.1.3.3.6.8.6 1.6v2.3c0 .2.1.5.5.4a8.4 8.4 0 0 0 5.7-8c0-4.6-3.7-8.4-8.3-8.4Z"
+        clipRule="evenodd"
+      />
+    </SvgIcon>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/icons/LogoIcon.tsx b/packages/vkui-docs-theme/src/icons/LogoIcon.tsx
new file mode 100644
index 00000000000..9cbe707ae6b
--- /dev/null
+++ b/packages/vkui-docs-theme/src/icons/LogoIcon.tsx
@@ -0,0 +1,22 @@
+import { SvgIcon, type SvgIconProps } from './SvgIcon';
+
+export function LogoIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon width="65" height="36" fill="none" {...props}>
+      <g>
+        <path
+          fill="#07F"
+          d="M0 17.3C0 9 0 5 2.5 2.5 5.1 0 9.1 0 17.3 0h1.4C27 0 31 0 33.5 2.5 36 5.1 36 9.1 36 17.3v1.4c0 8.2 0 12.2-2.5 14.8C30.9 36 26.9 36 18.7 36h-1.4C9 36 5 36 2.5 33.5 0 30.9 0 26.9 0 18.7v-1.4Z"
+        />
+        <path
+          fill="#fff"
+          d="M19.2 26c-8.3 0-13-5.7-13.1-15h4c.2 6.8 3.2 9.7 5.6 10.3V11h4v6c2.3-.3 4.8-3 5.6-6h3.9c-.7 3.7-3.4 6.4-5.3 7.5 2 1 5 3.3 6.2 7.5h-4.3c-.9-2.8-3.2-5-6.2-5.3v5.3h-.4Z"
+        />
+      </g>
+      <path
+        fill="currentColor"
+        d="M53.9 25c-1.2 0-2.2-.2-3-.7a5.4 5.4 0 0 1-2.9-5V11h2.5v8.4c0 1 .3 1.8.9 2.5.6.6 1.4 1 2.5 1 1 0 1.8-.4 2.4-1 .7-.7 1-1.5 1-2.5V11h2.4v8.4c0 1-.2 2-.7 2.9-.5.8-1.2 1.5-2.1 2-.9.5-2 .7-3 .7ZM65 24.8h-2.5V11H65v13.8Z"
+      />
+    </SvgIcon>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/icons/StorybookIcon.tsx b/packages/vkui-docs-theme/src/icons/StorybookIcon.tsx
new file mode 100644
index 00000000000..ca64fbba9c4
--- /dev/null
+++ b/packages/vkui-docs-theme/src/icons/StorybookIcon.tsx
@@ -0,0 +1,14 @@
+import { SvgIcon, type SvgIconProps } from './SvgIcon';
+
+export function StorybookIcon(props: SvgIconProps) {
+  return (
+    <SvgIcon viewBox="0 0 20 20" {...props}>
+      <path
+        fill="currentColor"
+        fillRule="evenodd"
+        d="M13.6 2.2 13.5 4c0 .1.1.1.2 0l.7-.5.6.5a.1.1 0 0 0 .2-.1L15 2.1 16 2a.8.8 0 0 1 .8.8v14.4a.8.8 0 0 1-.8.8l-10.7-.5a.8.8 0 0 1-.8-.8L4 3.5c0-.4.3-.8.8-.8l8.8-.5Zm-2 5.8c0 .3 2 .2 2.3 0 0-2.2-1.1-3.3-3.2-3.3S7.4 6 7.4 7.6s1.3 2.4 2.4 3c.9.5 1.6 1 1.6 1.6 0 .5-.2.7-.7.7-.6 0-.9-.3-.9-1.4 0-.2-2.4-.3-2.5 0-.2 2.7 1.5 3.5 3.4 3.5s3.3-1 3.3-2.8c0-1.9-1.4-2.6-2.5-3.2-.8-.5-1.5-.8-1.5-1.5 0-.6.4-.7.7-.7.3 0 .9 0 .8 1.2Z"
+        clipRule="evenodd"
+      />
+    </SvgIcon>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/icons/SvgIcon.module.css b/packages/vkui-docs-theme/src/icons/SvgIcon.module.css
new file mode 100644
index 00000000000..f6ed0f12234
--- /dev/null
+++ b/packages/vkui-docs-theme/src/icons/SvgIcon.module.css
@@ -0,0 +1,15 @@
+.icon {
+  display: block;
+}
+
+.verticalAlignMiddle {
+  vertical-align: middle;
+}
+
+.colorMedium {
+  color: var(--vkui--color_icon_medium);
+}
+
+.colorPrimary {
+  color: var(--vkui--color_icon_primary);
+}
diff --git a/packages/vkui-docs-theme/src/icons/SvgIcon.tsx b/packages/vkui-docs-theme/src/icons/SvgIcon.tsx
new file mode 100644
index 00000000000..6dd8f38d9af
--- /dev/null
+++ b/packages/vkui-docs-theme/src/icons/SvgIcon.tsx
@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import styles from './SvgIcon.module.css';
+
+export interface SvgIconProps extends React.SVGProps<SVGSVGElement> {
+  verticalAlign?: 'middle';
+  color?: 'medium' | 'primary';
+}
+
+const colorClassNames = {
+  medium: styles.colorMedium,
+  primary: styles.colorPrimary,
+};
+
+export const SvgIcon = ({
+  color,
+  children,
+  width = 24,
+  height = 24,
+  verticalAlign,
+  ...restProps
+}: SvgIconProps) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox={`0 0 ${width} ${height}`}
+      aria-hidden
+      fill="none"
+      className={classNames(
+        styles.icon,
+        verticalAlign === 'middle' && styles.verticalAlignMiddle,
+        color && colorClassNames[color],
+      )}
+      {...restProps}
+    >
+      {children}
+    </svg>
+  );
+};
diff --git a/packages/vkui-docs-theme/src/icons/index.ts b/packages/vkui-docs-theme/src/icons/index.ts
new file mode 100644
index 00000000000..d4cc4bd6c29
--- /dev/null
+++ b/packages/vkui-docs-theme/src/icons/index.ts
@@ -0,0 +1,4 @@
+export { GithubIcon } from './GithubIcon';
+export { StorybookIcon } from './StorybookIcon';
+export { LogoIcon } from './LogoIcon';
+export { FigmaIcon } from './FigmaIcon';
diff --git a/packages/vkui-docs-theme/src/index.tsx b/packages/vkui-docs-theme/src/index.tsx
index dff1e8a0d8a..a0ee926eb24 100644
--- a/packages/vkui-docs-theme/src/index.tsx
+++ b/packages/vkui-docs-theme/src/index.tsx
@@ -1,10 +1,50 @@
+import * as React from 'react';
 import type { NextraThemeLayoutProps } from 'nextra';
 import { MDXProvider } from 'nextra/mdx';
+import { Head } from './components';
+import {
+  ColorSchemeProvider,
+  ConfigProvider,
+  MenuProvider,
+  ThemeConfigProvider,
+  useConfig,
+  useThemeConfig,
+} from './contexts';
+import { renderComponent } from './helpers/render';
+import { getMdxComponents } from './mdx';
+import { VKUIWrapper } from './wrappers';
 
-export default function Layout({ children }: NextraThemeLayoutProps) {
+export default function Layout({ children, themeConfig, pageOpts }: NextraThemeLayoutProps) {
   return (
-    <div>
-      <MDXProvider disableParentContext>{children}</MDXProvider>
-    </div>
+    <ThemeConfigProvider value={themeConfig}>
+      <ConfigProvider value={pageOpts}>
+        <MenuProvider>
+          <InnerLayout>{children}</InnerLayout>
+        </MenuProvider>
+      </ConfigProvider>
+    </ThemeConfigProvider>
+  );
+}
+
+function InnerLayout({ children }: { children: React.ReactNode }) {
+  const config = useConfig();
+  const themeConfig = useThemeConfig();
+
+  const { activeThemeContext: themeContext, topLevelNavbarItems } = config.normalizePagesResult;
+
+  return (
+    <ColorSchemeProvider {...themeConfig.colorScheme}>
+      <VKUIWrapper>
+        <Head />
+        {/* TODO [docs] (@BlackySoul): добавить компонент <Banner /> */}
+        {themeContext.navbar &&
+          renderComponent(themeConfig.navbar.component, {
+            items: topLevelNavbarItems,
+          })}
+        <MDXProvider disableParentContext components={getMdxComponents(themeConfig.components)}>
+          {children}
+        </MDXProvider>
+      </VKUIWrapper>
+    </ColorSchemeProvider>
   );
 }
diff --git a/packages/vkui-docs-theme/src/mdx/Callout/Callout.module.css b/packages/vkui-docs-theme/src/mdx/Callout/Callout.module.css
new file mode 100644
index 00000000000..a9d8df6b1c7
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Callout/Callout.module.css
@@ -0,0 +1,24 @@
+.root {
+  padding-block: var(--vkui--spacing_size_xl);
+  padding-inline: var(--vkui--spacing_size_xl);
+  background: var(--vkui--color_background_warning);
+  border-radius: 8px;
+  margin: 0;
+  display: flex;
+}
+
+.icon {
+  color: #edb055;
+}
+
+.content {
+  margin-inline-start: var(--vkui--spacing_size_xl);
+}
+
+.root:not(:last-child) {
+  margin-block-end: 16px;
+}
+
+.root:not(:first-child) {
+  margin-block-start: 16px;
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Callout/Callout.tsx b/packages/vkui-docs-theme/src/mdx/Callout/Callout.tsx
new file mode 100644
index 00000000000..e05e96b557b
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Callout/Callout.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+import { Icon28InfoCircleOutline } from '@vkontakte/icons';
+import styles from './Callout.module.css';
+
+interface CalloutProps {
+  children?: React.ReactNode;
+}
+
+export function Callout({ children }: CalloutProps) {
+  return (
+    <aside className={styles.root}>
+      <div className={styles.icon}>
+        <Icon28InfoCircleOutline />
+      </div>
+      <div className={styles.content}>{children}</div>
+    </aside>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Code/Code.module.css b/packages/vkui-docs-theme/src/mdx/Code/Code.module.css
new file mode 100644
index 00000000000..c4270fc968c
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Code/Code.module.css
@@ -0,0 +1,26 @@
+.root {
+  background-color: var(
+    --vkui_docs--code-background,
+    var(--vkui--color_background_secondary_alpha)
+  );
+  padding-inline: var(--vkui_docs--code-inline-padding, 4px);
+  padding-block: 0;
+  border-radius: 6px;
+  color: var(--vkui--color_text_primary);
+}
+
+/* stylelint-disable-next-line selector-max-type */
+.root span {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  background-color: var(--shiki-light-bg);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--shiki-light);
+}
+
+/* stylelint-disable-next-line selector-max-type, selector-max-universal */
+.root span:is(html[class~='vkui--vkBase--dark'] *) {
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  background-color: var(--shiki-dark-bg);
+  /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+  color: var(--shiki-dark);
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Code/Code.tsx b/packages/vkui-docs-theme/src/mdx/Code/Code.tsx
new file mode 100644
index 00000000000..832e6deddf1
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Code/Code.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { JetBrains_Mono } from 'next/font/google';
+import styles from './Code.module.css';
+
+// eslint-disable-next-line new-cap
+const jetBrainsMono = JetBrains_Mono({
+  subsets: ['cyrillic'],
+});
+
+export function Code({
+  children,
+  className,
+  noPadding = false,
+  ...props
+}: React.ComponentProps<'code'> & { noPadding?: boolean }): React.ReactElement {
+  return (
+    <code
+      className={classNames(
+        styles.root,
+        jetBrainsMono.className,
+        noPadding && styles.noPadding,
+        className,
+      )}
+      dir="ltr"
+      {...props}
+    >
+      {children}
+    </code>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/mdx/HeadingLink/HeadingLink.module.css b/packages/vkui-docs-theme/src/mdx/HeadingLink/HeadingLink.module.css
new file mode 100644
index 00000000000..99298b6abea
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/HeadingLink/HeadingLink.module.css
@@ -0,0 +1,35 @@
+.heading {
+  color: var(--vkui--color_text_primary);
+}
+
+.heading2 {
+  margin-block-start: 40px;
+  font-weight: var(--vkui--font_weight_accent2);
+  font-size: var(--vkui--font_title1--font_size--regular);
+  line-height: var(--vkui--font_title1--line_height--regular);
+}
+
+.heading3 {
+  margin-block-start: var(--vkui--spacing_size_2xl);
+  font-weight: var(--vkui--font_weight_accent3);
+  font-size: var(--vkui--font_title2--font_size--regular);
+  line-height: var(--vkui--font_title2--line_height--regular);
+}
+
+.anchor {
+  opacity: 0;
+  transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
+  text-decoration: none;
+  margin-inline-start: var(--vkui--spacing_size_m);
+  position: relative;
+}
+
+.anchor:focus,
+:hover > .anchor {
+  opacity: 1;
+}
+
+.anchor::after {
+  content: '#';
+  color: var(--vkui--color_icon_tertiary);
+}
diff --git a/packages/vkui-docs-theme/src/mdx/HeadingLink/HeadingLink.tsx b/packages/vkui-docs-theme/src/mdx/HeadingLink/HeadingLink.tsx
new file mode 100644
index 00000000000..34eb4c6ad42
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/HeadingLink/HeadingLink.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import styles from './HeadingLink.module.css';
+
+export function HeadingLink({
+  tag: Tag,
+  children,
+  id,
+  className,
+  ...props
+}: React.ComponentProps<'h2'> & {
+  tag: `h${2 | 3 | 4 | 5 | 6}`;
+}): React.ReactElement {
+  return (
+    <Tag
+      className={classNames(
+        styles.heading,
+        (Tag === 'h2' || Tag === 'h3') &&
+          {
+            h2: styles.heading2,
+            h3: styles.heading3,
+          }[Tag],
+      )}
+      {...props}
+    >
+      {children}
+      {id && (
+        <a
+          href={`#${id}`}
+          id={id}
+          className={styles.anchor}
+          aria-label="Постоянная ссылка на секцию"
+        />
+      )}
+    </Tag>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Layout/Layout.module.css b/packages/vkui-docs-theme/src/mdx/Layout/Layout.module.css
new file mode 100644
index 00000000000..fc2d614f5a4
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Layout/Layout.module.css
@@ -0,0 +1,25 @@
+.root {
+  display: flex;
+  margin-inline: auto;
+  color: var(--vkui--color_text_subhead);
+  background-color: var(--vkui--color_background_content);
+}
+
+.maxWidth {
+  max-inline-size: var(--vkui_docs--max-width);
+}
+
+.content {
+  padding-block: 36px 60px;
+  padding-inline: 40px;
+  inline-size: 100%;
+  min-inline-size: 0;
+  min-block-size: calc(100vh - var(--vkui_docs--navbar-height));
+}
+
+@media (--viewWidth-tablet), (--viewWidth-tabletMinus) {
+  .content {
+    padding-inline: var(--vkui--size_base_padding_horizontal--regular);
+    padding-block-start: 32px;
+  }
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Layout/Layout.tsx b/packages/vkui-docs-theme/src/mdx/Layout/Layout.tsx
new file mode 100644
index 00000000000..6fa4c4faf49
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Layout/Layout.tsx
@@ -0,0 +1,70 @@
+import type * as React from 'react';
+import { classNames } from '@vkontakte/vkui';
+import { Breadcrumbs, NavLinks, Sidebar } from '../../components';
+import { useConfig, useThemeConfig } from '../../contexts';
+import styles from './Layout.module.css';
+
+export function Layout({ children }: { children: React.ReactNode }) {
+  const config = useConfig();
+  const {
+    activeThemeContext: themeContext,
+    docsDirectories,
+    flatDirectories,
+    directories,
+  } = config.normalizePagesResult;
+
+  const isFullLayout = themeContext.layout === 'full';
+
+  return (
+    <div className={classNames(styles.root, !isFullLayout && styles.maxWidth)}>
+      <Sidebar
+        docsDirectories={docsDirectories}
+        flatDirectories={flatDirectories}
+        fullDirectories={directories}
+        metaData={config.metaData}
+        asPopover={config.hideSidebar}
+      />
+      {/* TODO [docs] (@BlackySoul): добавить компонент <TOC /> */}
+      {/* TODO [docs] (@BlackySoul): <SkipNavContent /> */}
+      <Main>{children}</Main>
+    </div>
+  );
+}
+
+function Main({ children }: { children: React.ReactNode }) {
+  const config = useConfig();
+  const themeConfig = useThemeConfig();
+  const {
+    activeThemeContext: themeContext,
+    activeType,
+    activeIndex,
+    flatDocsDirectories,
+    activePath,
+  } = config.normalizePagesResult;
+  if (themeContext.layout === 'raw') {
+    return <main className={styles.content}>{children}</main>;
+  }
+  const content = (
+    <>
+      {children}
+      {activeType !== 'page' && themeContext.pagination ? (
+        <NavLinks flatDirectories={flatDocsDirectories} currentIndex={activeIndex} />
+      ) : null}
+    </>
+  );
+
+  const body = themeConfig.main?.({ children: content }) || content;
+
+  if (themeContext.layout === 'full') {
+    return <main className={styles.content}>{body}</main>;
+  }
+
+  return (
+    <main className={styles.content}>
+      {activeType !== 'page' && themeContext.breadcrumb ? (
+        <Breadcrumbs activePath={activePath} />
+      ) : null}
+      {body}
+    </main>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Overview/Overview.module.css b/packages/vkui-docs-theme/src/mdx/Overview/Overview.module.css
new file mode 100644
index 00000000000..d6e9f7d3279
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Overview/Overview.module.css
@@ -0,0 +1,46 @@
+.root {
+  padding-block: 32px;
+  padding-inline: 32px;
+  border-radius: 16px;
+  background-color: var(--vkui--color_background_tertiary);
+  color: var(--vkui--color_text_primary);
+  margin-block-end: 32px;
+  margin-block-start: var(--vkui--spacing_size_3xl);
+  background-image: url('./background.png');
+  position: relative;
+  overflow: hidden;
+  border: 1px solid var(--vkui--color_separator_primary);
+  isolation: isolate;
+}
+
+.root::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  background-image: linear-gradient(
+      to right,
+      var(--vkui--color_separator_primary) 1px,
+      transparent 1px
+    ),
+    linear-gradient(to bottom, var(--vkui--color_separator_primary) 1px, transparent 1px);
+  background-size: 32px 32px;
+  mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 30%, #000 100%);
+  z-index: -1;
+}
+
+/* No classes for markdown content */
+/* stylelint-disable-next-line selector-max-type */
+.root > h1 {
+  color: var(--vkui--color_text_contrast);
+}
+
+/* stylelint-disable-next-line selector-max-type */
+.root p {
+  font-size: 16px;
+  line-height: 24px;
+}
+
+.tags {
+  /* margin-block-start: 44px; */
+  margin-block-start: 20px;
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Overview/Overview.tsx b/packages/vkui-docs-theme/src/mdx/Overview/Overview.tsx
new file mode 100644
index 00000000000..ad533902739
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Overview/Overview.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Button, ButtonGroup, ColorSchemeProvider } from '@vkontakte/vkui';
+import { FigmaIcon, GithubIcon, StorybookIcon } from '../../icons';
+import styles from './Overview.module.css';
+
+export interface OverviewProps {
+  children: React.ReactNode;
+}
+
+function OverviewTags({ children }: { children: React.ReactNode }) {
+  return (
+    <ButtonGroup gap="s" className={styles.tags}>
+      {children}
+    </ButtonGroup>
+  );
+}
+OverviewTags.displayName = 'OverviewTags';
+
+const IconsMap = {
+  github: GithubIcon,
+  figma: FigmaIcon,
+  storybook: StorybookIcon,
+};
+
+function OverviewTag({
+  children,
+  href,
+  type = 'github',
+}: {
+  children: React.ReactNode;
+  type: keyof typeof IconsMap;
+  href?: string;
+}) {
+  const Icon = IconsMap[type];
+  return (
+    <Button mode="secondary" appearance="neutral" size="m" before={<Icon />} href={href}>
+      {children}
+    </Button>
+  );
+}
+OverviewTag.displayName = 'OverviewTag';
+
+export function Overview({ children }: OverviewProps) {
+  return (
+    <ColorSchemeProvider value="dark">
+      <div className={styles.root}>{children}</div>
+    </ColorSchemeProvider>
+  );
+}
+
+Overview.displayName = 'Overview';
+
+Overview.Tag = OverviewTag;
+Overview.Tag.displayName = 'Overview.Tag';
+
+Overview.Tags = OverviewTags;
+Overview.Tags.displayName = 'Overview.Tags';
diff --git a/packages/vkui-docs-theme/src/mdx/Overview/background.png b/packages/vkui-docs-theme/src/mdx/Overview/background.png
new file mode 100644
index 00000000000..67ad06988e0
Binary files /dev/null and b/packages/vkui-docs-theme/src/mdx/Overview/background.png differ
diff --git a/packages/vkui-docs-theme/src/mdx/Pre/CopyToClipboard/CopyToClipboard.module.css b/packages/vkui-docs-theme/src/mdx/Pre/CopyToClipboard/CopyToClipboard.module.css
new file mode 100644
index 00000000000..0444224fd29
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Pre/CopyToClipboard/CopyToClipboard.module.css
@@ -0,0 +1,58 @@
+.icon {
+  box-sizing: content-box;
+}
+
+.copyIcon {
+  opacity: 1;
+}
+
+.doneIcon {
+  opacity: 0;
+  position: absolute;
+  inset-block-start: 0;
+}
+
+.copied .copyIcon {
+  animation: hide-icon 1.25s forwards;
+}
+
+.copied .doneIcon {
+  animation: show-icon 1.25s 0.15s forwards;
+}
+
+@keyframes hide-icon {
+  0% {
+    opacity: 1;
+  }
+
+  20% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  80% {
+    opacity: 0;
+    transform: scale(0.5);
+  }
+
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes show-icon {
+  0% {
+    opacity: 0;
+  }
+
+  20% {
+    opacity: 1;
+  }
+
+  60% {
+    opacity: 1;
+  }
+
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Pre/CopyToClipboard/CopyToClipboard.tsx b/packages/vkui-docs-theme/src/mdx/Pre/CopyToClipboard/CopyToClipboard.tsx
new file mode 100644
index 00000000000..81b59333cf7
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Pre/CopyToClipboard/CopyToClipboard.tsx
@@ -0,0 +1,45 @@
+import * as React from 'react';
+import { Icon24ChecksOutline, Icon24CopyOutline } from '@vkontakte/icons';
+import { classNames, copyTextToClipboard } from '@vkontakte/vkjs';
+import { IconButton } from '@vkontakte/vkui';
+import styles from './CopyToClipboard.module.css';
+
+interface CopyToClipboardProps extends React.ComponentProps<'button'> {
+  getValue: () => string;
+}
+
+export const CopyToClipboard = ({ getValue, className, ...props }: CopyToClipboardProps) => {
+  const [copied, setCopied] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!copied) {
+      return;
+    }
+    const timerId = setTimeout(() => {
+      setCopied(false);
+    }, 2000);
+
+    return () => {
+      clearTimeout(timerId);
+    };
+  }, [copied]);
+
+  const handleClick = React.useCallback<
+    NonNullable<React.ComponentProps<'button'>['onClick']>
+  >(async () => {
+    setCopied(true);
+    await copyTextToClipboard(getValue());
+  }, [getValue]);
+
+  return (
+    <IconButton
+      onClick={handleClick}
+      label="Скопировать код"
+      className={classNames(className, copied && styles.copied)}
+      {...props}
+    >
+      <Icon24CopyOutline className={classNames(styles.icon, styles.copyIcon)} />
+      <Icon24ChecksOutline className={classNames(styles.icon, styles.doneIcon)} />
+    </IconButton>
+  );
+};
diff --git a/packages/vkui-docs-theme/src/mdx/Pre/Pre.module.css b/packages/vkui-docs-theme/src/mdx/Pre/Pre.module.css
new file mode 100644
index 00000000000..c52fab958b0
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Pre/Pre.module.css
@@ -0,0 +1,34 @@
+.root {
+  position: relative;
+  margin-block: var(--vkui--spacing_size_3xl);
+  overflow: auto;
+  border: 1px solid var(--vkui_docs--color_stroke_separator_secondary);
+  border-radius: 8px;
+
+  --vkui_docs--code-background: transparent;
+  --vkui_docs--code-inline-padding: 0px;
+  --vkui_docs--code-block-padding: 0px;
+}
+
+.pre {
+  contain: paint;
+  overflow-x: auto;
+  background-color: var(--vkui_docs--color_background_content);
+  padding-block: var(--vkui--spacing_size_3xl);
+  padding-inline: var(--vkui--spacing_size_4xl);
+  font-size: 14px;
+  -webkit-font-smoothing: auto;
+}
+
+.buttons {
+  position: absolute;
+  inset-inline-end: var(--vkui--spacing_size_m);
+  inset-block-start: var(--vkui--spacing_size_m);
+  display: flex;
+  color: var(--vkui--color_icon_tertiary);
+}
+
+/* stylelint-disable-next-line selector-max-universal */
+.buttons > *:not(:last-child) {
+  margin-inline-end: var(--vkui--spacing_size_xs);
+}
diff --git a/packages/vkui-docs-theme/src/mdx/Pre/Pre.tsx b/packages/vkui-docs-theme/src/mdx/Pre/Pre.tsx
new file mode 100644
index 00000000000..c9e576aa445
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/Pre/Pre.tsx
@@ -0,0 +1,37 @@
+import * as React from 'react';
+import { classNames } from '@vkontakte/vkjs';
+import { CopyToClipboard } from './CopyToClipboard/CopyToClipboard';
+import styles from './Pre.module.css';
+
+interface PreProps extends React.ComponentProps<'pre'> {
+  'data-filename'?: string;
+  'data-copy'?: '';
+  'icon'?: React.FC<React.ComponentProps<'svg'>>;
+}
+
+export function Pre({
+  children,
+  className,
+  'data-filename': filename,
+  'data-copy': copy,
+  'icon': Icon,
+  ...props
+}: PreProps) {
+  const preRef = React.useRef<HTMLPreElement | null>(null);
+
+  return (
+    <div className={styles.root}>
+      {filename && <div>{filename}</div>}
+      <pre className={classNames(styles.pre, className)} ref={preRef} {...props}>
+        {children}
+      </pre>
+      {copy === '' && (
+        <div className={classNames(styles.buttons)}>
+          <CopyToClipboard
+            getValue={() => preRef.current?.querySelector('code')?.textContent || ''}
+          />
+        </div>
+      )}
+    </div>
+  );
+}
diff --git a/packages/vkui-docs-theme/src/mdx/index.module.css b/packages/vkui-docs-theme/src/mdx/index.module.css
new file mode 100644
index 00000000000..cfb3e5d0841
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/index.module.css
@@ -0,0 +1,39 @@
+.paragraph {
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  font-weight: var(--vkui--font_weight_base3);
+  font-family: var(--vkui--font_family_base);
+}
+
+.paragraph:not(:first-child) {
+  margin-block-start: var(--vkui--spacing_size_xl);
+}
+
+.ul {
+  list-style-type: disc;
+  padding-block: var(--vkui--spacing_size_2xl) 0;
+  padding-inline: var(--vkui--spacing_size_3xl) 0;
+}
+
+.li:not(:first-child) {
+  margin-block-start: var(--vkui--spacing_size_xl);
+}
+
+.h1 {
+  font-size: 40px;
+  line-height: 46px;
+  font-weight: var(--vkui--font_weight_accent1);
+  font-family: var(--vkui--font_family_accent);
+}
+
+.strong {
+  color: var(--vkui--color_text_primary);
+}
+
+.hr {
+  margin-block: 40px;
+  background-color: var(--vkui_docs--color_stroke_separator_secondary);
+  color: var(--vkui_docs--color_stroke_separator_secondary);
+  border-width: 0;
+  block-size: 1px;
+}
diff --git a/packages/vkui-docs-theme/src/mdx/index.tsx b/packages/vkui-docs-theme/src/mdx/index.tsx
new file mode 100644
index 00000000000..e0eed77e89a
--- /dev/null
+++ b/packages/vkui-docs-theme/src/mdx/index.tsx
@@ -0,0 +1,39 @@
+import type { MDXComponents } from 'nextra/mdx';
+import { Anchor } from '../components';
+import { type DocsThemeConfig } from '../types';
+import { Callout } from './Callout/Callout';
+import { Code } from './Code/Code';
+import { HeadingLink } from './HeadingLink/HeadingLink';
+import { Layout } from './Layout/Layout';
+import { Overview } from './Overview/Overview';
+import { Pre } from './Pre/Pre';
+import styles from './index.module.css';
+
+const DEFAULT_COMPONENTS: MDXComponents = {
+  h1: (props) => <h1 className={styles.h1} {...props} />,
+  h2: (props) => <HeadingLink tag="h2" {...props} />,
+  h3: (props) => <HeadingLink tag="h3" {...props} />,
+  h4: (props) => <HeadingLink tag="h4" {...props} />,
+  h5: (props) => <HeadingLink tag="h5" {...props} />,
+  h6: (props) => <HeadingLink tag="h6" {...props} />,
+  ul: (props) => <ul className={styles.ul} {...props} />,
+  ol: (props) => <ol {...props} />,
+  li: (props) => <li className={styles.li} {...props} />,
+  blockquote: (props) => <blockquote {...props} />,
+  hr: (props) => <hr className={styles.hr} {...props} />,
+  a: Anchor,
+  p: (props) => <p className={styles.paragraph} {...props} />,
+  pre: Pre,
+  code: Code,
+  strong: (props) => <strong className={styles.strong} {...props} />,
+  wrapper: Layout,
+  Overview,
+  Callout,
+};
+
+export const getMdxComponents = (components: DocsThemeConfig['components']): MDXComponents => {
+  return {
+    ...DEFAULT_COMPONENTS,
+    ...components,
+  };
+};
diff --git a/packages/vkui-docs-theme/src/types.ts b/packages/vkui-docs-theme/src/types.ts
new file mode 100644
index 00000000000..5d957699336
--- /dev/null
+++ b/packages/vkui-docs-theme/src/types.ts
@@ -0,0 +1,84 @@
+import type React from 'react';
+import type { NavbarProps } from './components/Navbar/Navbar';
+import type { ColorSchemeProviderProps } from './contexts';
+
+export interface DocsThemeConfig {
+  /**
+   * Баннер сверху
+   */
+  banner?: {
+    dismissible: boolean;
+    key: string;
+    content?: React.ReactNode;
+  };
+  /**
+   * Кастомные MDX-компоненты, которыми можно заменить дефолтные
+   */
+  components?: object;
+  /**
+   * Направление письма сайта
+   */
+  direction?: 'ltr' | 'rtl';
+  /**
+   * Кастомизация <head>-элемента
+   */
+  head?: React.ReactNode | React.FC;
+  /**
+   * Лого документации
+   */
+  logo: React.ReactNode | React.FC;
+  /**
+   * Ссылка для лого документации
+   *
+   * `true` - для перехода на главную
+   */
+  logoLink: boolean | string;
+  /**
+   * Компонент-обертка для main-контента
+   */
+  main?: React.FC<{ children: React.ReactNode }>;
+  /**
+   * Навигационное меню
+   */
+  navbar: {
+    extraButtons?: React.ReactNode | React.FC;
+    component: null | React.ReactNode | React.FC<NavbarProps>;
+    versions?: React.ReactNode | React.FC;
+  };
+  /**
+   * Показывать ссылки на следующую/предыдущую страницы
+   */
+  navigation: boolean | { next: boolean; prev: boolean };
+  /**
+   * Управление цветовой схемой сайта
+   */
+  colorScheme: ColorSchemeProviderProps;
+  /**
+   * Поиск сайта
+   */
+  search: {
+    component: null | React.ReactNode | React.FC;
+    emptyResult: React.ReactNode;
+    error: React.ReactNode;
+    loading: React.ReactNode;
+    placeholder: React.ReactNode;
+  };
+  /**
+   * Описание репозитория сайта
+   */
+  project: {
+    icon: React.ReactNode;
+    link?: `https://${string}`;
+  };
+}
+
+// eslint-disable-next-line @typescript-eslint/ban-types
+type DeepPartial<T> = T extends Function
+  ? T
+  : T extends object
+    ? {
+        [P in keyof T]?: DeepPartial<T[P]>;
+      }
+    : T;
+
+export type PartialDocsThemeConfig = DeepPartial<DocsThemeConfig>;
diff --git a/packages/vkui-docs-theme/src/wrappers/index.ts b/packages/vkui-docs-theme/src/wrappers/index.ts
new file mode 100644
index 00000000000..f95471eb62b
--- /dev/null
+++ b/packages/vkui-docs-theme/src/wrappers/index.ts
@@ -0,0 +1 @@
+export { VKUIWrapper } from './vkui';
diff --git a/packages/vkui-docs-theme/src/wrappers/vkui/index.module.css b/packages/vkui-docs-theme/src/wrappers/vkui/index.module.css
new file mode 100644
index 00000000000..7d3143a764d
--- /dev/null
+++ b/packages/vkui-docs-theme/src/wrappers/vkui/index.module.css
@@ -0,0 +1,10 @@
+.root {
+  -webkit-tap-highlight-color: transparent;
+  text-size-adjust: 100%;
+  font-family: var(--vkui--font_family_base);
+  color: var(--vkui--color_text_primary);
+  color-scheme: var(--vkui--colors_scheme);
+  block-size: unset;
+  inline-size: 100%;
+  background-color: var(--vkui--color_background_content);
+}
diff --git a/packages/vkui-docs-theme/src/wrappers/vkui/index.tsx b/packages/vkui-docs-theme/src/wrappers/vkui/index.tsx
new file mode 100644
index 00000000000..96362810f79
--- /dev/null
+++ b/packages/vkui-docs-theme/src/wrappers/vkui/index.tsx
@@ -0,0 +1,20 @@
+import { AdaptivityProvider, AppRoot, ConfigProvider } from '@vkontakte/vkui';
+import { useMounted } from 'nextra/hooks';
+import { useColorScheme } from '../../contexts';
+import styles from './index.module.css';
+
+export function VKUIWrapper({ children }: { children: React.ReactNode }) {
+  const { resolvedColorScheme } = useColorScheme();
+  const mounted = useMounted();
+  const colorScheme = mounted ? (resolvedColorScheme as 'light' | 'dark') : undefined;
+
+  return (
+    <ConfigProvider colorScheme={colorScheme} platform="android">
+      <AdaptivityProvider>
+        <AppRoot mode="partial">
+          <div className={styles.root}>{children}</div>
+        </AppRoot>
+      </AdaptivityProvider>
+    </ConfigProvider>
+  );
+}
diff --git a/packages/vkui-docs-theme/styles.css b/packages/vkui-docs-theme/styles.css
index 65b2c20563d..b2827776042 100644
--- a/packages/vkui-docs-theme/styles.css
+++ b/packages/vkui-docs-theme/styles.css
@@ -5,3 +5,16 @@
   (prefers-color-scheme: dark);
 @import '@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css';
 @import '@vkontakte/vkui-tokens/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css';
+
+/* VKUI styles */
+@import '../vkui/src/styles/constants.css';
+@import '../vkui/src/styles/common.css';
+@import '../vkui/src/styles/dynamicTokens.css';
+@import '../vkui/src/styles/adaptivity.module.css';
+
+/* Docs styles */
+@import './styles/constants.css';
+@import './styles//colors.css';
+
+/* Global styles */
+@import './styles/global.css';
diff --git a/packages/vkui-docs-theme/styles/colors.css b/packages/vkui-docs-theme/styles/colors.css
new file mode 100644
index 00000000000..4535d426dab
--- /dev/null
+++ b/packages/vkui-docs-theme/styles/colors.css
@@ -0,0 +1,31 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
+@media (prefers-color-scheme: light) {
+  :root {
+    --vkui_docs--color_background_content: #fafafa;
+    --vkui_docs--color_background_icon: #fff;
+    --vkui_docs--color_stroke_separator_secondary: #ebebeb;
+    --vkui_docs--color_background_playground: #f7f7f7;
+  }
+}
+@media (prefers-color-scheme: dark) {
+  :root {
+    --vkui_docs--color_background_content: #161617;
+    --vkui_docs--color_background_icon: #1f1f1f;
+    --vkui_docs--color_stroke_separator_secondary: #272728;
+    --vkui_docs--color_background_playground: #0e0e0f;
+  }
+}
+
+.vkui--vkBase--light {
+  --vkui_docs--color_background_content: #fafafa;
+  --vkui_docs--color_background_icon: #fff;
+  --vkui_docs--color_stroke_separator_secondary: #ebebeb;
+  --vkui_docs--color_background_playground: #f7f7f7;
+}
+
+.vkui--vkBase--dark {
+  --vkui_docs--color_background_content: #161617;
+  --vkui_docs--color_background_icon: #1f1f1f;
+  --vkui_docs--color_stroke_separator_secondary: #272728;
+  --vkui_docs--color_background_playground: #0e0e0f;
+}
diff --git a/packages/vkui-docs-theme/styles/constants.css b/packages/vkui-docs-theme/styles/constants.css
new file mode 100644
index 00000000000..d072ad6949d
--- /dev/null
+++ b/packages/vkui-docs-theme/styles/constants.css
@@ -0,0 +1,11 @@
+/* stylelint-disable declaration-property-value-disallowed-list */
+:root {
+  --vkui_docs--navbar-height: 60px;
+  --vkui_docs--max-width: 1440px;
+}
+
+@media (--viewWidth-desktopPlus) {
+  :root {
+    --vkui_docs--navbar-height: 84px;
+  }
+}
diff --git a/packages/vkui-docs-theme/styles/global.css b/packages/vkui-docs-theme/styles/global.css
new file mode 100644
index 00000000000..2f58a3b9d05
--- /dev/null
+++ b/packages/vkui-docs-theme/styles/global.css
@@ -0,0 +1,30 @@
+/* stylelint-disable selector-max-type, selector-max-universal */
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  -webkit-tap-highlight-color: transparent;
+}
+
+ol,
+ul,
+menu {
+  list-style: none;
+}
+
+html {
+  scroll-padding-block-start: var(--vkui_docs--navbar-height);
+}
+
+body {
+  background-color: var(--vkui--color_background_content);
+  font-size: var(--vkui--font_paragraph--font_size--regular);
+  line-height: var(--vkui--font_paragraph--line_height--regular);
+  font-weight: var(--vkui--font_weight_base3);
+  font-family: var(--vkui--font_family_base);
+}
diff --git a/stylelint.config.mjs b/stylelint.config.mjs
index b45c3e98cb2..86ecf057251 100644
--- a/stylelint.config.mjs
+++ b/stylelint.config.mjs
@@ -61,6 +61,8 @@ const config = {
             import.meta.dirname,
             'node_modules/@vkontakte/vkui-tokens/themes/vkBase/cssVars/declarations/index.css',
           ),
+          path.join(import.meta.dirname, 'packages/vkui-docs-theme/styles/constants.css'),
+          path.join(import.meta.dirname, 'packages/vkui-docs-theme/styles/colors.css'),
         ],
       },
     ],
@@ -82,6 +84,25 @@ const config = {
     'property-disallowed-list': null,
     'csstools/use-logical': 'always',
   },
+  overrides: [
+    {
+      files: [
+        `${path.join(import.meta.dirname, 'website')}/**/*.css`,
+        `${path.join(import.meta.dirname, 'packages/vkui-docs-theme')}/**/*.css`,
+      ],
+      rules: {
+        'csstools/media-use-custom-media': [
+          'known',
+          {
+            importFrom: path.join(
+              import.meta.dirname,
+              'packages/vkui/src/styles/customMedias.generated.css',
+            ),
+          },
+        ],
+      },
+    },
+  ],
 };
 
 export default config;
diff --git a/website/pages/_meta.tsx b/website/pages/_meta.tsx
new file mode 100644
index 00000000000..96a7b91a4fd
--- /dev/null
+++ b/website/pages/_meta.tsx
@@ -0,0 +1,29 @@
+export default {
+  index: {
+    type: 'page',
+    title: 'Главная',
+    theme: {
+      layout: 'raw',
+    },
+  },
+  components: {
+    type: 'page',
+    title: 'Компоненты',
+  },
+  icons: {
+    type: 'page',
+    title: 'Иконки',
+    href: 'https://vkcom.github.io/icons/',
+    newWindow: true,
+  },
+  tokens: {
+    type: 'page',
+    title: 'Токены',
+    href: 'https://vkcom.github.io/vkui-tokens/',
+    newWindow: true,
+  },
+  overview: {
+    type: 'page',
+    title: 'О системе',
+  },
+};
diff --git a/website/pages/components/index.mdx b/website/pages/components/index.mdx
new file mode 100644
index 00000000000..cbfee353373
--- /dev/null
+++ b/website/pages/components/index.mdx
@@ -0,0 +1 @@
+# UNDER CONSTRUCTION
diff --git a/website/pages/overview/_meta.tsx b/website/pages/overview/_meta.tsx
new file mode 100644
index 00000000000..929c942194c
--- /dev/null
+++ b/website/pages/overview/_meta.tsx
@@ -0,0 +1,45 @@
+import {
+  Icon20AddSquareOutline,
+  Icon20BrushOutline,
+  Icon20ComputerSmartphoneOutline,
+  Icon20LogoVkOutline,
+  Icon20PlaneOutline,
+  Icon20Rectangle2HorizontalOutline,
+  Icon20SparkleOutline,
+  Icon20Square4PlusOutline,
+} from '@vkontakte/icons';
+
+export default {
+  'about': {
+    title: 'О VKUI',
+    icon: Icon20LogoVkOutline,
+  },
+  'quick-start': {
+    title: 'Быстрый старт',
+    icon: Icon20PlaneOutline,
+  },
+  'setup-modes': {
+    title: 'Режимы подключения',
+    icon: Icon20AddSquareOutline,
+  },
+  'adaptivity': {
+    title: 'Адаптивность',
+    icon: Icon20ComputerSmartphoneOutline,
+  },
+  'platforms-and-themes': {
+    title: 'Платформы и темы',
+    icon: Icon20BrushOutline,
+  },
+  'structure': {
+    title: 'Структура экранов',
+    icon: Icon20Rectangle2HorizontalOutline,
+  },
+  'integrations': {
+    title: 'Интеграции',
+    icon: Icon20Square4PlusOutline,
+  },
+  'advanced': {
+    title: 'Advanced',
+    icon: Icon20SparkleOutline,
+  },
+};
diff --git a/website/pages/overview/about.mdx b/website/pages/overview/about.mdx
new file mode 100644
index 00000000000..778d60daacc
--- /dev/null
+++ b/website/pages/overview/about.mdx
@@ -0,0 +1,41 @@
+<Overview>
+# О VKUI
+
+Библиотека адаптивных React-компонентов, предназначенных для разработки веб-приложений.
+Основана на [дизайн-системе ВКонтакте](https://www.figma.com/@vk) и реализует её интерфейсы для различных платформ.
+Начните работу над вашим проектом уже сейчас, ознакомившись с руководством по [быстрому старту](/overview/quick-start).
+
+</Overview>
+
+## Преимущества VKUI
+
+- **Адаптивность** — библиотека подстраивается под различные размеры экранов, обеспечивая удобный интерфейс на смартфонах, планшетах и компьютерах.
+
+- **Мультиплатформенность** — интерфейсы VKUI практически идентичны дизайну других платформ, в которые они могут быть интегрированы. Благодаря способности "мимикрировать", библиотека может адаптироваться под iOS и Android клиенты, сохраняя стиль дизайна, характерный для [vk.com](https://vk.com) и [m.vk.com](https://m.vk.com).
+
+- **Разные цветовые схемы** — использование различных цветовых схем, включая темную тему, является одним из ключевых аспектов обеспечения доступности.
+
+---
+
+## Об этой документации
+
+### Основа
+
+В этом разделе представлены концептуальные особенности библиотеки. [Режимы подключения](/overview/modes) позволяют узнать о возможностях использования
+библиотеки в различных сценариях: автономном, "приложение внутри приложения" и частичном использовании компонентов.
+[Структура экранов](/overview/structure) раскрывает принципы навигации в приложении, созданном на основе VKUI.
+
+### Компоненты
+
+В данном разделе представлены свойства и методы каждого компонента.
+Практически на каждой странице этого раздела приведен живой пример с возможностью редактирования кода.
+
+## Сообщить о проблеме
+
+Если вы столкнулись с какой‑либо ошибкой в нашей библиотеке или у вас есть предложения по её улучшению, пожалуйста, создайте [issue](https://github.com/VKCOM/VKUI/issues/new/choose).
+А если у вас возникли вопросы или вы хотите обсудить особенности библиотеки более подробно, присоединяйтесь к обсуждению в ["Дискуссиях"](https://github.com/VKCOM/VKUI/discussions/categories/q-a). Мы стремимся сделать нашу библиотеку ещё лучше, всегда готовы выслушать вас и учесть ваши замечания.
+
+## Contributing
+
+Мы очень радуемся, когда пользователи библиотеки работают над её улучшением. Для того, чтобы оставить след в
+истории, сделайте форк проекта, внесите изменения и отправьте нам [pull request](https://github.com/VKCOM/VKUI/pulls).
diff --git a/website/pages/overview/adaptivity.mdx b/website/pages/overview/adaptivity.mdx
new file mode 100644
index 00000000000..7412f172c92
--- /dev/null
+++ b/website/pages/overview/adaptivity.mdx
@@ -0,0 +1,172 @@
+<Overview>
+# Адаптивность
+
+Одно из ключевых преимуществ VKUI - адаптивность.
+Библиотека предоставляет шаблоны для различных устройств,
+а также позволяет большинству компонентов адаптировать под разные размеры.
+Отображение кнопок, элементов форм и других компонентов зависит от наличия мыши, высоты и ширины экрана.
+В этой статье мы покажем, как сделать отзывчивый интерфейс.
+
+</Overview>
+
+## Шаг 1
+
+Для начала оберните ваше приложение в [`AdaptivityProvider`](#/AdaptivityProvider).
+
+```jsx static
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import { ConfigProvider, AdaptivityProvider, AppRoot } from '@vkontakte/vkui';
+import '@vkontakte/vkui/dist/vkui.css';
+
+function App() {
+  return (
+    <ConfigProvider>
+      <AdaptivityProvider>
+        <AppRoot>...</AppRoot>
+      </AdaptivityProvider>
+    </ConfigProvider>
+  );
+}
+
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(<App />);
+```
+
+## Шаг 2
+
+Добавьте [`SplitLayout`](#/SplitLayout) и хотя бы один [`SplitCol`](#/SplitCol).
+
+- **SplitLayout** — компонент-обертка для отрисовки макета с
+  одной или несколькими колонками.
+- **SplitCol** — компонент для отрисовки колонки.
+
+```jsx static
+// ...
+
+function App() {
+  return (
+    <ConfigProvider>
+      <AdaptivityProvider>
+        <AppRoot>
+          <SplitLayout>
+            <SplitCol width={280}>
+              <SideCol />
+            </SplitCol>
+            <SplitCol>
+              <MainScreens />
+            </SplitCol>
+          </SplitLayout>
+        </AppRoot>
+      </AdaptivityProvider>
+    </ConfigProvider>
+  );
+}
+
+const MainScreens = () => {
+  return (
+    <View activePanel="profile">
+      <Panel id="profile">Profile</Panel>
+    </View>
+  );
+};
+
+const SideCol = () => {
+  return <Panel id="nav">Navigation</Panel>;
+};
+```
+
+## Шаг 3
+
+Почти готово. Теперь необходимо уведомить приложение о том, что левая колонка нужна только на больших экранах.
+Для этого мы должны использовать хук useAdaptivityConditionalRender в наших компонентах.
+Ниже будет представлен пример использования этого хука, а затем будет дано объяснение его работы.
+
+```jsx static
+function App() {
+  const platform = usePlatform();
+  const isVKCOM = platform === 'vkcom';
+  const { viewWidth } = useAdaptivityConditionalRender();
+
+  // ...
+
+  <SplitLayout header={!isVKCOM && <PanelHeader delimiter="none" />}>
+    {viewWidth.tabletPlus && (
+      <SplitCol width={280} className={viewWidth.tabletPlus.className}>
+        <Panel id="nav">Navigation</Panel>
+      </SplitCol>
+    )}
+    <SplitCol autoSpaced>
+      <View activePanel="profile">
+        <Panel id="profile">Profile</Panel>
+      </View>
+    </SplitCol>
+  </SplitLayout>;
+  // ...
+}
+```
+
+`useAdaptivityConditionalRender` возвращает параметры адаптивности (см. **Технические детали**), каждый из которых имеет
+дополнительную мета-информацию. В зависимости от того, что мы передали в `AdaptivityProvider`, значение у каждого отдельного параметра адаптивности
+может быть двух типов:
+
+- `false` – мы строго задали какой-то из параметров адаптивности в `AdaptivityProvider`.
+
+- `{ className: string }` – CSS селектор, который на основе CSS Media Query будет переключать видимость вашего
+  элемента. В данном случае в `AdaptivityProvider` не передавали соответствующий параметр адаптивности.
+
+## Требования для адаптивности
+
+- Свойство `SplitLayout.header` нужно для создания сквозной шапки, когда интерфейс состоит из нескольких колонок (или одной центрированной)
+- Анимация перехода между панелями должна быть отключена при размерах `ViewWidth.TABLET` и более (`SplitCol.animate`)
+- Если интерфейс состоит из нескольких колонок, то у центральных колонок должны быть отступы (в трёх-колоночном режиме это одна центральная колонка) (`SplitCol.autoSpaced`)
+
+## Адаптивность через JS
+
+Если вы:
+
+- **не поддерживаете SSR** или
+- **у вас есть компонент, который не показывается при первом рендере**, то вы можете смело использовать хук `useAdaptivityWithJSMediaQueries()`.
+
+Мы используем этот хук для _всплывающих окон_. Как раз из-за того, что они удовлетворяют условию показа только после
+первого рендера.
+
+```jsx static
+// ❌ bad for SSR
+const App = () => {
+  return (
+    <ModalRoot activeModal="main">
+      <ModalPage id="main">Hello World!</ModalPage>
+    </ModalRoot>
+  );
+};
+
+// ✅ good for SSR
+const App = () => {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  return mounted ? (
+    <ModalRoot activeModal="main">
+      <ModalPage id="main">Hello World!</ModalPage>
+    </ModalRoot>
+  ) : null;
+};
+```
+
+В нашем примере внутри `<ModalRoot />` и `<ModalPage />` используется `useAdaptivityWithJSMediaQueries()` для
+переключения компонентов на мобильный или десктопный виды.
+
+## Технические детали
+
+Адаптивность базируется на четырёх свойствах:
+
+- `sizeX` и `sizeY` принимают значения `'regular' | 'compact'`
+- `viewWidth` — `ViewWidth.SMALL_MOBILE | ViewWidth.MOBILE | ViewWidth.SMALL_TABLET | ViewWidth.TABLET | ViewWidth.DESKTOP`
+- `viewHeight` — `ViewHeight.SMALL | ViewHeight.MEDIUM`
+
+Эти свойства задаются в `AdaptivityProvider`.
diff --git a/website/pages/overview/advanced/index.mdx b/website/pages/overview/advanced/index.mdx
new file mode 100644
index 00000000000..a22c78829e0
--- /dev/null
+++ b/website/pages/overview/advanced/index.mdx
@@ -0,0 +1 @@
+# No content
diff --git a/website/pages/overview/integrations.mdx b/website/pages/overview/integrations.mdx
new file mode 100644
index 00000000000..1a27de8de4b
--- /dev/null
+++ b/website/pages/overview/integrations.mdx
@@ -0,0 +1,218 @@
+## Конфигурация VKUI
+
+> Советуем использовать шаблон [`@vkontakte/create-vk-mini-app`](https://github.com/VKCOM/create-vk-mini-app).
+> В нем конфигурация, описанная ниже, есть по умолчанию.
+
+Для начала устанавливаем библиотеки:
+
+- [`@vkontakte/vk-bridge`](https://www.npmjs.com/package/@vkontakte/vk-bridge) **>= 2.9.0**
+- [`@vkontakte/vk-bridge-react`](https://www.npmjs.com/package/@vkontakte/vk-bridge) **>= 1.0.0**
+
+```sh
+# для примера используется пакетный менеджер yarn
+yarn add @vkontakte/vk-bridge @vkontakte/vk-bridge-react
+```
+
+Далее подписываемся на изменения из **VK Bridge**. Для этого используем готовые хуки из
+[`@vkontakte/vk-bridge-react`](https://www.npmjs.com/package/@vkontakte/vk-bridge).
+
+```tsx static
+import * as React from 'react';
+import { createRoot } from 'react-dom/client';
+import vkBridge, { parseURLSearchParamsForGetLaunchParams } from '@vkontakte/vk-bridge';
+import { useAppearance, useInsets, useAdaptivity } from '@vkontakte/vk-bridge-react';
+import { Platform, ConfigProvider, AdaptivityProvider, AppRoot } from '@vkontakte/vkui';
+import { transformVKBridgeAdaptivity } from './transformers/transformVKBridgeAdaptivity';
+import { App } from './App';
+
+// Инициализируем VK  Mini App
+vkBridge.send('VKWebAppInit');
+
+const Root = () => {
+  const vkBridgeAppearance = useAppearance() || undefined; // Вместо undefined можно задать значение по умолчанию
+  const vkBridgeInsets = useInsets() || undefined; // Вместо undefined можно задать значение по умолчанию
+  const vkBridgeAdaptivityProps = transformVKBridgeAdaptivity(useAdaptivity()); // Конвертируем значения из VK Bridge в параметры AdaptivityProvider
+  const { vk_platform } = parseURLSearchParamsForGetLaunchParams(window.location.search); // [опционально] Платформа может передаваться через URL (см. https://dev.vk.com/mini-apps/development/launch-params#vk_platform)
+
+  return (
+    <ConfigProvider
+      appearance={vkBridgeAppearance}
+      platform={vk_platform === 'desktop_web' ? 'vkcom' : undefined}
+      isWebView={vkBridge.isWebView()}
+      hasCustomPanelHeaderAfter={true} // Резервируем правую часть PanelHeader под кнопки управления VK Mini Apps. Через параметр customPanelHeaderAfterMinWidth можно регулировать ширину этой области (по умолчанию, используется 90)
+    >
+      <AdaptivityProvider {...vkBridgeAdaptivityProps}>
+        {/* Для VK Mini Apps рекомендуем использовать mode="full" (выставлен по умолчанию, для примера указан явно) */}
+        <AppRoot mode="full" safeAreaInsets={vkBridgeInsets}>
+          <App />
+        </AppRoot>
+      </AdaptivityProvider>
+    </ConfigProvider>
+  );
+};
+
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(<Root />);
+```
+
+Файл `./transformers/transformVKBridgeAdaptivity.ts`
+
+```ts static
+import {
+  type AdaptivityProps,
+  getViewWidthByViewportWidth,
+  getViewHeightByViewportHeight,
+  ViewWidth,
+} from '@vkontakte/vkui';
+import type { UseAdaptivity } from '@vkontakte/vk-bridge-react';
+
+/**
+ * Требуется конвертировать данные из VK Bridge в те, что принимает AdaptivityProvider из VKUI.
+ */
+export const transformVKBridgeAdaptivity = ({
+  type,
+  viewportWidth,
+  viewportHeight,
+}: UseAdaptivity): AdaptivityProps => {
+  switch (type) {
+    case 'adaptive':
+      return {
+        viewWidth: getViewWidthByViewportWidth(viewportWidth),
+        viewHeight: getViewHeightByViewportHeight(viewportHeight),
+      };
+    case 'force_mobile':
+    case 'force_mobile_compact':
+      return {
+        viewWidth: ViewWidth.MOBILE,
+        sizeX: 'compact',
+        sizeY: type === 'force_mobile_compact' ? 'compact' : 'regular',
+      };
+    default:
+      return {};
+  }
+};
+```
+
+## Навигация
+
+### [`PanelHeader`](#/PanelHeader)
+
+Мини-приложению доступна почти вся площадь экрана, поэтому для корректной работы навигации
+необходимо использовать компонент [`PanelHeader`](#/PanelHeader) на каждом
+экране приложения. Он должен содержать название приложения и значок **Назад** (см.
+[`PanelHeaderBack`](#/PanelHeaderBack)) на тех экранах, где тот
+требуется.
+
+> _Правый верхний угол_ [`PanelHeader`](#/PanelHeader) зарезервирован для
+> нативного бара с кнопками управления мини-приложением, поэтому не рекомендуем использовать
+> параметр `after`.
+>
+> Чтобы автоматически скрывать `after` у [`PanelHeader`](#/PanelHeader),
+> в [`ConfigProvider`](#/ConfigProvider) есть параметр
+> `hasCustomPanelHeaderAfter`.
+
+### [`View`](#/View)
+
+На стартовой странице мини-приложения вы должны включить свайпбек нативного клиента, чтобы
+пользователь смог выйти из мини-приложения. Для этого нужно вызывать определенные методы
+**VK Bridge** в зависимости от типа мини-приложения:
+
+- Если вы делаете _стандартное_ мини-приложение ВКонтакте, то при переходах отправляйте
+  [`VKWebAppSetSwipeSettings`](https://dev.vk.com/bridge/VKWebAppSetSwipeSettings) с `history: true`
+  на первой панели и `history: false` на других.
+- Если вы делаете _внутреннее_ мини-приложения ВКонтакте, то отправляйте событие
+  [`VKWebAppEnableSwipeBack`](https://dev.vk.com/bridge/VKWebAppEnableSwipeBack) при переходе на
+  первую панель и событие [`VKWebAppDisableSwipeBack`](https://dev.vk.com/bridge/VKWebAppDisableSwipeBack)
+  при переходе на любую другую.
+
+```tsx static
+import vkBridge from '@vkontakte/vk-bridge';
+
+const SomeViews = () => {
+  const [history, setHistory] = useState(['main']);
+  const activePanel = history[history.length - 1];
+  const isFirst = history.length === 1;
+
+  const go = React.useCallback((panel) => setHistory((prevHistory) => [...prevHistory, panel]), []);
+  const goBack = React.useCallback(() => setHistory((prevHistory) => prevHistory.slice(0, -1)), []);
+  const handleProfileClick = () => go('profile');
+  const handleMainClick = () => go('main');
+
+  React.useEffect(() => {
+    // Для стандартных мини-приложений делайте так:
+    vkBridge.send('VKWebAppSetSwipeSettings', { history: isFirst });
+    // Для внутренних мини-приложений делайте так:
+    vkBridge.send(isFirst ? 'VKWebAppEnableSwipeBack' : 'VKWebAppDisableSwipeBack');
+  }, [isFirst]);
+
+  return (
+    <View history={history} activePanel={activePanel} onSwipeBack={goBack}>
+      <Panel id="main">
+        <div onClick={handleProfileClick}>Main</div>
+      </Panel>
+      <Panel id="profile">
+        <div onClick={handleMainClick}>Profile</div>
+      </Panel>
+    </View>
+  );
+};
+```
+
+На устройствах с Android нажатие кнопки **Назад** вызывает в WebView событие [history.back](https://developer.mozilla.org/ru/docs/Web/API/Window/history).
+По нажатию этой кнопки официальное приложение сделает возврат на предыдущую страницу вашего
+приложения или закроет его, если вернуться невозможно. Поэтому для корректной навигации вы должны
+обрабатывать нажатие аппаратной клавиши в мини-приложении и реализовывать роутинг. Сделать это
+можно, например, при помощи библиотеки `react-router`.
+
+## Виброотклик (Taptic Engine)
+
+Для улучшения пользовательского опыта при взаимодействии с вашим мини-приложением в **VK Bridge**
+существуют события вызова вибрации на устройстве, которое их поддерживает.
+
+[@vkontakte/vk-bridge-react](https://www.npmjs.com/package/@vkontakte/vk-bridge) предоставляет
+функцию `runTapticImpactOccurred`, которая отправляет событие [VKWebAppTapticImpactOccurred](https://dev.vk.com/bridge/VKWebAppTapticImpactOccurred),
+как раз заранее проверяя, что возможность вызова вибрации доступна на устройстве.
+
+Виброотликом можно воспользоваться, например, при использовании компонента [`PullToRefresh`](#/PullToRefresh)
+на `onRefresh`.
+
+```tsx static
+import * as React from 'react';
+import { runTapticImpactOccurred } from '@vkontakte/vk-bridge-react';
+
+const Users = () => {
+  const [users, setUsers] = React.useState([
+    { id: 1, name: 'Placeholder', avatarUrl: 'https://placehold.co/100' },
+  ]);
+  const [fetching, setFetching] = React.useState(false);
+
+  const onRefresh = React.useCallback(() => {
+    setFetching(true);
+    // Вызываем виброотклик
+    runTapticImpactOccurred('light');
+  }, []);
+
+  return (
+    <View activePanel="users">
+      <Panel id="users">
+        <PanelHeader>Пользователи</PanelHeader>
+
+        <PullToRefresh onRefresh={onRefresh} isFetching={fetching}>
+          <Group>
+            <List>
+              {users.map(({ id, name, avatarUrl }, i) => {
+                return (
+                  <Cell key={i} before={<Avatar src={avatarUrl} />}>
+                    {name}
+                  </Cell>
+                );
+              })}
+            </List>
+          </Group>
+        </PullToRefresh>
+      </Panel>
+    </View>
+  );
+};
+```
diff --git a/website/pages/overview/platforms-and-themes.mdx b/website/pages/overview/platforms-and-themes.mdx
new file mode 100644
index 00000000000..0e16ee674e8
--- /dev/null
+++ b/website/pages/overview/platforms-and-themes.mdx
@@ -0,0 +1,126 @@
+<Overview>
+# Платформы и темы
+
+Одна из особенностей VKUI — это способность мимикрировать под дизайны и поведение разных платформ.
+Она позволяет создавать интерфейсы, которые неотличимы от нативных.
+
+</Overview>
+
+## Платформы
+
+На данный момент поддерживаются 2 платформы — `android` и `ios`. Также есть `vkcom`, но она, начиная
+с **VKUI v6**, считается устаревшей (см. [О vkcom](#vkcom)).
+
+Передавать платформу в `ConfigProvider` необязательно, т.к. она по умолчанию определяется
+автоматически.
+
+Для ручного определения вы можете передать в компонент [`ConfigProvider`](#/ConfigProvider) свойство
+`platform` с нужной платформой. Пример:
+
+```jsx
+<ConfigProvider platform="ios">
+  <AdaptivityProvider>
+    <AppRoot>
+      <SimpleCell>Эта ячейка будет иметь поведение и стилизацию как в iOS</SimpleCell>
+    </AppRoot>
+  </AdaptivityProvider>
+</ConfigProvider>
+```
+
+Или, если вам необходимо переопределить платформу точечно для отдельных компонентов приложения, то
+вы можете сделать это с помощью `PlatformProvider`.
+
+```jsx static
+<PlatformProvider value="ios">
+  <Snackbar action="Поделиться">Поделиться</Snackbar>
+</PlatformProvider>
+```
+
+Чтобы получить значение текущей платформы, используйте хук `usePlatform` или HOC `withPlatform`.
+Подробнее об этих инструментах можно прочитать на странице [Утилиты](#/Utils).
+
+### О `vkcom` [#vkcom]
+
+Такое название платформа имеет по историческим причинам и используется командой ВКонтакте.
+
+Нужно иметь ввиду, что она не предназначена для адаптивного интерфейса. Используйте её только в том
+случае, если ваше приложение встроено в [vk.com](https://vk.com).
+
+## Темы [#themes]
+
+Тема в библиотеке представляет из себя набор [дизайн-токенов](https://foundation.mozilla.org/en/docs/design/websites/design-tokens/)
+в виде [CSS-переменных](https://developer.mozilla.org/en-US/docs/Web/CSS/--*). Вот как это может
+выглядеть:
+
+```css static
+.SomeComponent {
+  color: var(--vkui--color_text_primary);
+  background: var(--vkui--color_background_content);
+}
+```
+
+### Режимы [#modes]
+
+Каждая тема обычно поддерживает как <i>светлый (англ. `light`)</i>, так и <i>тёмный (англ. `dark`)</i> режим.
+За его определение отвечает свойство `appearance`, и также как `platform`, по умолчанию, определяется
+автоматически за счёт CSS медиа выражения [`prefers-color-scheme`](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme).
+
+Ручное определение будет выглядеть так:
+
+```jsx static
+import { ConfigProvider, AdaptivityProvider, AppRoot, SimpleCell } from '@vkontakte/vkui';
+import '@vkontakte/vkui/dist/vkui.css';
+
+ReactDOM.render(
+  <ConfigProvider appearance="dark">
+    <AdaptivityProvider>
+      <AppRoot>
+        <SimpleCell>Темным-темно</SimpleCell>
+      </AppRoot>
+    </AdaptivityProvider>
+  </ConfigProvider>,
+  root,
+);
+```
+
+Если вы хотите переопределить режим для отдельных компонентов приложения, воспользуйтесь
+`AppearanceProvider`.
+
+```jsx static
+<AppearanceProvider value="dark">
+  <Snackbar action="Поделиться">Поделиться</Snackbar>
+</AppearanceProvider>
+```
+
+Чтобы получить значение текущего режима, используйте хук `useAppearance`. Может пригодиться для
+замены изображений на инвертированную версию в темных темах. Пример:
+
+```jsx static
+const appearance = useAppearance();
+<Div>{appearance === 'light' ? 'Out of the blue' : 'And into the black'}</Div>;
+```
+
+### [@vkontakte/vkui-tokens](https://github.com/VKCOM/vkui-tokens)
+
+**VKUI** использует пакет `@vkontakte/vkui-tokens`, который предоставляет готовые наборы **дизайн-токенов**.
+
+Каждый набор объявлен в классе формата `vkui--<themeName>--<appearance>`. На примере светлой темы
+с названием `vkBase` класс будет выглядеть так – `vkui--vkBase--light` ([ссылка на сам CSS файл](https://unpkg.com/@vkontakte/vkui-tokens@4/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css)).
+Подобный класс выставляется на контейнер приложения.
+
+В стили библиотеки, которые подключаются через `import '@vkontakte/vkui/dist/vkui.css'`, встроены 3
+темы в зависимости от платформы и режима:
+
+- `android` (используется по умолчанию)
+  - `light` – `vkBase` ([ссылка на CSS файл](https://unpkg.com/@vkontakte/vkui-tokens@4/themes/vkBase/cssVars/declarations/onlyVariablesLocal.css))
+  - `dark` – `vkBaseDark` ([ссылка на CSS файл](https://unpkg.com/@vkontakte/vkui-tokens@4/themes/vkBaseDark/cssVars/declarations/onlyVariablesLocal.css))
+- `ios`
+  - `light` – `vkIOS` ([ссылка на CSS файл](https://unpkg.com/@vkontakte/vkui-tokens@4/themes/vkIOS/cssVars/declarations/onlyVariablesLocal.css))
+  - `dark` – `vkIOSDark` ([ссылка на CSS файл](https://unpkg.com/@vkontakte/vkui-tokens@4/themes/vkIOSDark/cssVars/declarations/onlyVariablesLocal.css))
+- `vkcom` (см. О `vkcom`)
+  - `light` – `vkCom` ([ссылка на CSS файл](https://unpkg.com/@vkontakte/vkui-tokens@4/themes/vkCom/cssVars/declarations/onlyVariablesLocal.css))
+  - `dark` – `vkComDark` ([ссылка на CSS файл](https://unpkg.com/@vkontakte/vkui-tokens@4/themes/vkComDark/cssVars/declarations/onlyVariablesLocal.css))
+
+### Переопределение темы
+
+См. страницу [Кастомизация](#/Customize).
diff --git a/website/pages/overview/quick-start.mdx b/website/pages/overview/quick-start.mdx
new file mode 100644
index 00000000000..f5d17e9e615
--- /dev/null
+++ b/website/pages/overview/quick-start.mdx
@@ -0,0 +1,95 @@
+<Overview>
+# Быстрый старт
+
+Всего четыре ключевых шага для создания простого приложения.
+
+</Overview>
+
+## Шаг 1
+
+Подготовьте [SPA React приложение](https://ru.reactjs.org/docs/create-a-new-react-app.html). Вы можете использовать любые шаблоны и сборщики, в том числе и Create React App.
+Обратите внимание, что VKUI поддерживает Typescript.
+
+## Шаг 2
+
+Если вы используете [библиотеку `create-vk-mini-app`](https://www.npmjs.com/package/@vkontakte/create-vk-mini-app), отдельно подключать VKUI не нужно. Переходите сразу к шагу 3.
+Если нет, то установите необходимые пакеты. Для этого воспользуйтесь одной из команд:
+
+```sh
+# npm
+npm i --save @vkontakte/vkui
+# yarn
+yarn add @vkontakte/vkui
+# or pnpm
+pnpm add @vkontakte/vkui
+```
+
+## Шаг 3
+
+Добавьте тег viewport для корректного отображения интерфейса на безрамочных смартфонах (подробнее см. в статье ["The Notch" and CSS](https://css-tricks.com/the-notch-and-css/)).
+
+```html
+<meta
+  name="viewport"
+  content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, viewport-fit=cover"
+/>
+```
+
+## Шаг 4
+
+Соберите базовый app shell для VKUI.
+
+```js copy
+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 App = () => {
+  const platform = usePlatform();
+
+  return (
+    <AppRoot>
+      <SplitLayout header={platform !== 'vkcom' && <PanelHeader delimiter="none" />}>
+        <SplitCol autoSpaced>
+          <View activePanel="main">
+            <Panel id="main">
+              <PanelHeader>VKUI</PanelHeader>
+              <Group header={<Header mode="secondary">Items</Header>}>
+                <SimpleCell>Hello</SimpleCell>
+                <SimpleCell>World</SimpleCell>
+              </Group>
+            </Panel>
+          </View>
+        </SplitCol>
+      </SplitLayout>
+    </AppRoot>
+  );
+};
+
+const container = document.getElementById('root');
+const root = createRoot(container); // createRoot(container!) if you use TypeScript
+root.render(
+  <ConfigProvider>
+    <AdaptivityProvider>
+      <App />
+    </AdaptivityProvider>
+  </ConfigProvider>,
+);
+```
+
+## Ваше приложение готово!
+
+Теперь можно добавлять более сложные компоненты, новые экраны и настроить переходы между ними.
diff --git a/website/pages/overview/setup-modes.mdx b/website/pages/overview/setup-modes.mdx
new file mode 100644
index 00000000000..270175a3a5a
--- /dev/null
+++ b/website/pages/overview/setup-modes.mdx
@@ -0,0 +1,40 @@
+<Overview>
+# Режимы подключения
+
+Библиотека VKUI поддерживает три режима подключения.
+
+</Overview>
+
+В зависимости от выбранного режима подключения вам будут доступны или не доступны некоторые возможности VKUI.
+
+- **full** — ваше приложение полностью реализовано с помощью библиотеки VKUI и контролируется ей.
+- **embedded** — ваше приложение будет реализовано в виде блока, встроенного в основное приложение (например, Марусю или базовое приложение ВКонтакте).
+- **partial** — ваше приложение реализовано с помощью сторонних решений и использует некоторые компоненты библиотеки VKUI.
+
+Режим выставляется в компоненте [`AppRoot`](#/AppRoot) с помощью свойства `mode`. Любое приложение должно быть обёрнуто в этот компонент.
+
+## Full
+
+Данный режим позволяет VKUI полностью контролировать страницы вашего приложения.
+В этом случае root-элемент (корневой компонент) должен находиться непосредственно внутри `<body>`. VKUI добавит свои классы на html-элемент и на корневой контейнер.
+Режим `full` включен по умолчанию. Рекомендуем использовать его для standalone-проектов или при [интеграции с платформой VK Mini Apps](#/integrations-vk-mini-apps).
+
+<Callout>
+ **Важно**
+
+При работе с SSR нужно предварительно добавить классы VKUI, чтобы избежать изменений стилей после гидратации.
+
+На html элемент нужно добавить класс `.vkui`.
+На точку монтирования нужно добавить класс `.vkui__root`.
+
+</Callout>
+
+## Embedded
+
+Данный режим позволяет вам подключить VKUI не на всю страницу приложения, а только к определенному контейнеру.
+Как и с full режимом, VKUI добавит свои классы на корневой контейнер.
+
+## Partial
+
+Данный режим подходит для случаев, когда вам нужно сверстать небольшой блок, а не страницу целиком. В partial режиме не
+подразумевается использование компонентов из раздела Layout.
diff --git a/website/pages/overview/structure.mdx b/website/pages/overview/structure.mdx
new file mode 100644
index 00000000000..a126c1972fa
--- /dev/null
+++ b/website/pages/overview/structure.mdx
@@ -0,0 +1,78 @@
+## Переход между панелями
+
+`Panel` – это компонент, в который передается `children`, видимый пользователю. Компонент `View` – это набор таких панелей. Пример:
+
+```jsx static
+import { View, Panel } from '@vkontakte/vkui';
+
+<View activePanel="greetings">
+  <Panel id="greetings">
+    {* panel content *}
+  </Panel>
+  <Panel id="form">
+    {* panel content *}
+  </Panel>
+  <Panel id="finish">
+    {* panel content *}
+  </Panel>
+</View>
+```
+
+В компонент `View` передается коллекция `Panel`. Свойство `activePanel` отвечает за то, какая `Panel` должна быть показана. [Демо](#!/View).
+
+## Переход между модальными окнами
+
+В каждом приложении есть какой-то основной пользовательский сценарий. И есть ответвления: check user action, поиск пользователя и т.д.
+Чтобы как-то отделить ветки от основного сценария, существуют модальные окна. Пример:
+
+```jsx static
+import { Root, View } from '@vkontakte/vkui';
+
+<Root activeView="main">
+  <View id="main" activePanel="general">
+    <Panel id="general">
+      {* general *}
+    </Panel>
+    <Panel id="education">
+      {* education *}
+    </Panel>
+  </View>
+  <View id="users-search" activePanel="users-search">
+    <Panel id="users-search">
+      {* modal window for users search *}
+    </Panel>
+  </View>
+  <View id="check-user-actions" activePanel="check-user-actions">
+    <Panel id="check-user-actions">
+      {* modal window for check user actions *}
+    </Panel>
+  </View>
+</Root>
+```
+
+В компонент `Root` передается коллекция `View`, в каждой из которых содержится набор `Panel`. Свойство
+`activeView` отвечает за то, какая `View` должна быть показана. [Демо](#!/Root).
+
+## Еще раз :)
+
+Структура любого VKUI-приложения должна выглядеть так:
+
+```jsx static
+import { Root, View, Panel } from '@vkontakte/vkui';
+
+<Root activeView="view">
+  <View id="view" activePanel="panel">
+    <Panel id="panel" />
+  </View>
+</Root>;
+```
+
+Или так:
+
+```jsx static
+import { View, Panel } from '@vkontakte/vkui';
+
+<View id="view" activePanel="panel">
+  <Panel id="panel" />
+</View>;
+```
diff --git a/website/src/components/Versions/Versions.tsx b/website/src/components/Versions/Versions.tsx
new file mode 100644
index 00000000000..d46aa237f0e
--- /dev/null
+++ b/website/src/components/Versions/Versions.tsx
@@ -0,0 +1,29 @@
+import * as React from 'react';
+import ReactDOM from 'react-dom';
+import { Icon24ChevronDown } from '@vkontakte/icons';
+import { type AdaptivityProps, AdaptivityProvider, SelectMimicry } from '@vkontakte/vkui';
+import { useMounted } from 'nextra/hooks';
+import vkuiPgk from '../../../../packages/vkui/package.json';
+import { VersionsModal } from './VersionsModal';
+
+export function Versions({ sizeY = 'compact' }: Pick<AdaptivityProps, 'sizeY'>) {
+  const [open, setOpen] = React.useState(false);
+  const mounted = useMounted();
+
+  return (
+    <>
+      <AdaptivityProvider sizeY={sizeY}>
+        <SelectMimicry
+          style={{ width: 128 }}
+          after={<Icon24ChevronDown />}
+          onClick={() => setOpen((o) => !o)}
+          readOnly
+        >
+          v{vkuiPgk.version}
+        </SelectMimicry>
+      </AdaptivityProvider>
+      {mounted &&
+        ReactDOM.createPortal(<VersionsModal open={open} setOpen={setOpen} />, document.body)}
+    </>
+  );
+}
diff --git a/website/src/components/Versions/VersionsModal.tsx b/website/src/components/Versions/VersionsModal.tsx
new file mode 100644
index 00000000000..4cdc3ce560e
--- /dev/null
+++ b/website/src/components/Versions/VersionsModal.tsx
@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { Div, ModalPage, ModalPageHeader, PanelSpinner, SimpleCell } from '@vkontakte/vkui';
+import { useFetch } from '@vkontakte/vkui-docs-theme';
+import semverRcompare from 'semver/functions/rcompare';
+
+interface VersionsProps {
+  error?: boolean;
+  data?: string[];
+}
+
+interface PackageInfoProps {
+  versions: Record<string, unknown>;
+}
+
+const MINIMUM_VERSION = '3.12.4';
+
+function filterPrereleaseVersion(version: string) {
+  return !version.includes('-');
+}
+
+function processData(data?: PackageInfoProps) {
+  if (!data) {
+    return null;
+  }
+  const allVersions = Object.keys(data.versions);
+  const fromIndex = allVersions.indexOf(MINIMUM_VERSION);
+  return allVersions.slice(fromIndex).filter(filterPrereleaseVersion).sort(semverRcompare);
+}
+
+interface VersionsModalProps extends VersionsProps {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+}
+
+export function VersionsModal({ open, setOpen }: VersionsModalProps) {
+  const { data: dataRaw, error } = useFetch('https://registry.npmjs.org/@vkontakte/vkui', {
+    method: 'GET',
+    headers: {
+      Accept: 'application/vnd.npm.install-v1+json',
+    },
+  }) as { data?: PackageInfoProps; error: Error };
+
+  const data = React.useMemo(() => processData(dataRaw), [dataRaw]);
+
+  return (
+    <ModalPage
+      open={open}
+      aria-busy={!data}
+      aria-live="polite"
+      id="versions-modal"
+      header={<ModalPageHeader>Версии</ModalPageHeader>}
+      onClose={() => setOpen(false)}
+      height="640px"
+    >
+      {error && <Div>Произошла ошибка</Div>}
+      {data ? (
+        data.map((version) => (
+          <SimpleCell
+            key={version}
+            href={`https://vkcom.github.io/VKUI/${version}${location.hash}`}
+            target="_blank"
+          >
+            {version}
+          </SimpleCell>
+        ))
+      ) : (
+        <PanelSpinner />
+      )}
+    </ModalPage>
+  );
+}
diff --git a/website/src/components/index.ts b/website/src/components/index.ts
new file mode 100644
index 00000000000..19631fdcd95
--- /dev/null
+++ b/website/src/components/index.ts
@@ -0,0 +1 @@
+export { Versions } from './Versions/Versions';
diff --git a/website/theme.config.tsx b/website/theme.config.tsx
index f7e83e8493f..ceafb07dde5 100644
--- a/website/theme.config.tsx
+++ b/website/theme.config.tsx
@@ -1,3 +1,33 @@
-const config = {};
+import { Button } from '@vkontakte/vkui';
+import { type DocsThemeConfig, StorybookIcon } from '@vkontakte/vkui-docs-theme';
+import { Versions } from './src/components';
+
+const config: DocsThemeConfig = {
+  navbar: {
+    extraButtons: (
+      <Button
+        before={
+          <StorybookIcon
+            width="24"
+            height="24"
+            viewBox="0 0 20 20"
+            verticalAlign="middle"
+            color="medium"
+          />
+        }
+        mode="secondary"
+        appearance="neutral"
+        size="l"
+        href="https://vkcom.github.io/VKUI/playground/"
+        target="_blank"
+        rel="noreferrer"
+      />
+    ),
+    versions: Versions,
+  },
+  project: {
+    link: 'https://github.com/VKCOM/VKUI/',
+  },
+};
 
 export default config;