diff --git a/docs/en/learn/additional-features/react-component.mdx b/docs/en/learn/additional-features/react-component.mdx
new file mode 100644
index 00000000..7f725a90
--- /dev/null
+++ b/docs/en/learn/additional-features/react-component.mdx
@@ -0,0 +1,64 @@
+# React component
+
+<Info>
+  If you don't use TypeScript, use the .jsx extension instead of .tsx and get rid of the component typing.
+</Info>
+
+Create a react component named `VanillaCalendar.tsx` and copy the below code into this file.
+
+```js
+import { HTMLAttributes, useEffect, useRef, useState } from "react";
+import VC, { Options } from "@uvarov.frontend/vanilla-calendar";
+import "@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css";
+import "@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css";
+import "@uvarov.frontend/vanilla-calendar/build/themes/light.min.css";
+
+interface VanillaCalendarProps extends HTMLAttributes<HTMLDivElement> {
+  config?: Options,
+}
+
+function VanillaCalendar({ config, ...attributes }: VanillaCalendarProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [calendar, setCalendar] = useState<VC<HTMLDivElement, Options> | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) return
+    setCalendar(new VC(ref.current, config));
+  }, [ref, config])
+
+  useEffect(() => {
+    if (!calendar) return;
+    calendar.init();
+  }, [calendar]);
+
+  return (
+    <div {...attributes} ref={ref}></div>
+  )
+}
+
+export default VanillaCalendar
+```
+
+Then import the created component into the react component where you plan to display the calendar.
+
+```js
+import VanillaCalendar from "./VanillaCalendar";
+```
+
+Use the created component.
+
+```js
+// ...
+<VanillaCalendar />
+// ...
+```
+
+The `VanillaCalendar` component can be passed any HTML attributes that the `<div>` tag supports, as well as `config` to configure the calendar.
+
+```js
+// ...
+<VanillaCalendar config={{
+    type: 'multiple',
+  }} className="thisIsMyClass" />
+// ...
+```
diff --git a/docs/ru/learn/additional-features/react-component.mdx b/docs/ru/learn/additional-features/react-component.mdx
new file mode 100644
index 00000000..22b0d425
--- /dev/null
+++ b/docs/ru/learn/additional-features/react-component.mdx
@@ -0,0 +1,64 @@
+# React компонент
+
+<Info>
+  Если вы не используете TypeScript, используйте расширение .jsx вместо .tsx и избавьтесь от типизации компонента.
+</Info>
+
+Создайте react компонент с именем `VanillaCalendar.tsx` и скопируйте приведенный ниже код в этот файл.
+
+```js
+import { HTMLAttributes, useEffect, useRef, useState } from "react";
+import VC, { Options } from "@uvarov.frontend/vanilla-calendar";
+import "@uvarov.frontend/vanilla-calendar/build/vanilla-calendar.min.css";
+import "@uvarov.frontend/vanilla-calendar/build/themes/dark.min.css";
+import "@uvarov.frontend/vanilla-calendar/build/themes/light.min.css";
+
+interface VanillaCalendarProps extends HTMLAttributes<HTMLDivElement> {
+  config?: Options,
+}
+
+function VanillaCalendar({ config, ...attributes }: VanillaCalendarProps) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [calendar, setCalendar] = useState<VC<HTMLDivElement, Options> | null>(null);
+
+  useEffect(() => {
+    if (!ref.current) return
+    setCalendar(new VC(ref.current, config));
+  }, [ref, config])
+
+  useEffect(() => {
+    if (!calendar) return;
+    calendar.init();
+  }, [calendar]);
+
+  return (
+    <div {...attributes} ref={ref}></div>
+  )
+}
+
+export default VanillaCalendar
+```
+
+Затем импортируйте созданный компонент в компонент react, где вы планируете отображать календарь.
+
+```js
+import VanillaCalendar from "./VanillaCalendar";
+```
+
+Используйте созданый компонент.
+
+```js
+// ...
+<VanillaCalendar />
+// ...
+```
+
+В компонент `VanillaCalendar` можно передать любые атрибуты HTML, которые поддерживает тег `<div>`, а также `config` для настройки календаря.
+
+```js
+// ...
+<VanillaCalendar config={{
+    type: 'multiple',
+  }} className="thisIsMyClass" />
+// ...
+```