diff --git a/src/components/Alert/Alert.jsx b/src/components/Alert/Alert.jsx
index 34bf8623c..fd74236dd 100644
--- a/src/components/Alert/Alert.jsx
+++ b/src/components/Alert/Alert.jsx
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
+import { TranslationsContext } from '../../providers/translations';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
@@ -17,7 +15,7 @@ export const Alert = ({
   onClose,
   ...restProps
 }) => {
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   return (
     <div
diff --git a/src/components/Alert/README.md b/src/components/Alert/README.md
index 7d5e5f2ba..7b5e2dfa9 100644
--- a/src/components/Alert/README.md
+++ b/src/components/Alert/README.md
@@ -132,6 +132,7 @@ Dark alert variant.
 ```docoff-react-preview
 <Alert color="dark">
   <strong>Dark alert:</strong> Stands out on light backgrounds.
+  {' '}
   <TextLink href="/" label="This is a link" />
 </Alert>
 ```
diff --git a/src/components/Badge/Badge.jsx b/src/components/Badge/Badge.jsx
index 653938fff..aa887a5ad 100644
--- a/src/components/Badge/Badge.jsx
+++ b/src/components/Badge/Badge.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
diff --git a/src/components/Button/Button.jsx b/src/components/Button/Button.jsx
index c934f13e1..320563181 100644
--- a/src/components/Button/Button.jsx
+++ b/src/components/Button/Button.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
diff --git a/src/components/ButtonGroup/ButtonGroup.jsx b/src/components/ButtonGroup/ButtonGroup.jsx
index e894fb92a..450a42ddd 100644
--- a/src/components/ButtonGroup/ButtonGroup.jsx
+++ b/src/components/ButtonGroup/ButtonGroup.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React, {
   useMemo,
 } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootPriorityClassName } from '../_helpers/getRootPriorityClassName';
diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx
index 8616ee555..69045a962 100644
--- a/src/components/Card/Card.jsx
+++ b/src/components/Card/Card.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootColorClassName } from '../_helpers/getRootColorClassName';
diff --git a/src/components/Card/CardBody.jsx b/src/components/Card/CardBody.jsx
index 729ab157c..9037f1eca 100644
--- a/src/components/Card/CardBody.jsx
+++ b/src/components/Card/CardBody.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './Card.module.scss';
 
diff --git a/src/components/Card/CardFooter.jsx b/src/components/Card/CardFooter.jsx
index 5da62a79b..953c8141c 100644
--- a/src/components/Card/CardFooter.jsx
+++ b/src/components/Card/CardFooter.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
 import { transferProps } from '../../utils/transferProps';
+import { withGlobalProps } from '../../providers/globalProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Card.module.scss';
 
diff --git a/src/components/CheckboxField/CheckboxField.jsx b/src/components/CheckboxField/CheckboxField.jsx
index e3eed3794..2c35432d5 100644
--- a/src/components/CheckboxField/CheckboxField.jsx
+++ b/src/components/CheckboxField/CheckboxField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
diff --git a/src/components/FileInputField/FileInputField.jsx b/src/components/FileInputField/FileInputField.jsx
index 0b7ee6a6e..113139c6a 100644
--- a/src/components/FileInputField/FileInputField.jsx
+++ b/src/components/FileInputField/FileInputField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
diff --git a/src/components/FormLayout/FormLayout.jsx b/src/components/FormLayout/FormLayout.jsx
index f4ec3b607..2b385c5d1 100644
--- a/src/components/FormLayout/FormLayout.jsx
+++ b/src/components/FormLayout/FormLayout.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useMemo } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/FormLayout/FormLayoutCustomField.jsx b/src/components/FormLayout/FormLayoutCustomField.jsx
index 56ed69774..933d8210c 100644
--- a/src/components/FormLayout/FormLayoutCustomField.jsx
+++ b/src/components/FormLayout/FormLayoutCustomField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
diff --git a/src/components/Grid/Grid.jsx b/src/components/Grid/Grid.jsx
index 8acae0fad..3dd7b4902 100644
--- a/src/components/Grid/Grid.jsx
+++ b/src/components/Grid/Grid.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
diff --git a/src/components/Grid/GridSpan.jsx b/src/components/Grid/GridSpan.jsx
index 5630a7588..a4f9ad9f8 100644
--- a/src/components/Grid/GridSpan.jsx
+++ b/src/components/Grid/GridSpan.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { generateResponsiveCustomProperties } from './_helpers/generateResponsiveCustomProperties';
diff --git a/src/components/InputGroup/InputGroup.jsx b/src/components/InputGroup/InputGroup.jsx
index 57e89f675..dcb230bec 100644
--- a/src/components/InputGroup/InputGroup.jsx
+++ b/src/components/InputGroup/InputGroup.jsx
@@ -3,8 +3,7 @@ import React, {
   useContext,
   useMemo,
 } from 'react';
-import { Text } from '../Text';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
@@ -12,6 +11,7 @@ import { getRootValidationStateClassName } from '../_helpers/getRootValidationSt
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import { resolveContextOrProp } from '../_helpers/resolveContextOrProp';
 import { FormLayoutContext } from '../FormLayout';
+import { Text } from '../Text';
 import { InputGroupContext } from './InputGroupContext';
 import styles from './InputGroup.module.scss';
 
diff --git a/src/components/Modal/Modal.jsx b/src/components/Modal/Modal.jsx
index d24b0f15a..fd95d7a1a 100644
--- a/src/components/Modal/Modal.jsx
+++ b/src/components/Modal/Modal.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useRef } from 'react';
 import { createPortal } from 'react-dom';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getPositionClassName } from './_helpers/getPositionClassName';
diff --git a/src/components/Modal/ModalBody.jsx b/src/components/Modal/ModalBody.jsx
index d81822b9a..0f54c497d 100644
--- a/src/components/Modal/ModalBody.jsx
+++ b/src/components/Modal/ModalBody.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/Modal/ModalCloseButton.jsx b/src/components/Modal/ModalCloseButton.jsx
index 2144269f0..eeecccf64 100644
--- a/src/components/Modal/ModalCloseButton.jsx
+++ b/src/components/Modal/ModalCloseButton.jsx
@@ -1,9 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
+import { TranslationsContext } from '../../providers/translations';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './ModalCloseButton.module.scss';
 
@@ -13,7 +11,7 @@ export const ModalCloseButton = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   return (
     <button
diff --git a/src/components/Modal/ModalContent.jsx b/src/components/Modal/ModalContent.jsx
index 2eca62dbd..5374987ab 100644
--- a/src/components/Modal/ModalContent.jsx
+++ b/src/components/Modal/ModalContent.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './ModalContent.module.scss';
diff --git a/src/components/Modal/ModalFooter.jsx b/src/components/Modal/ModalFooter.jsx
index 25bf025be..a4be180a4 100644
--- a/src/components/Modal/ModalFooter.jsx
+++ b/src/components/Modal/ModalFooter.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
diff --git a/src/components/Modal/ModalHeader.jsx b/src/components/Modal/ModalHeader.jsx
index 87f20f7de..6cf307aa9 100644
--- a/src/components/Modal/ModalHeader.jsx
+++ b/src/components/Modal/ModalHeader.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getJustifyClassName } from './_helpers/getJustifyClassName';
diff --git a/src/components/Modal/ModalTitle.jsx b/src/components/Modal/ModalTitle.jsx
index 1aa9270dc..bd814062c 100644
--- a/src/components/Modal/ModalTitle.jsx
+++ b/src/components/Modal/ModalTitle.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './ModalTitle.module.scss';
 
diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md
index afe68af82..7ee9efa2f 100644
--- a/src/components/Modal/README.md
+++ b/src/components/Modal/README.md
@@ -30,7 +30,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -72,7 +72,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -126,7 +126,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -247,7 +247,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -281,7 +281,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -374,7 +374,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -415,7 +415,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -517,7 +517,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -538,7 +538,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -605,7 +605,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -622,7 +622,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -665,7 +665,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -690,7 +690,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -734,7 +734,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -754,7 +754,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -807,7 +807,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
@@ -936,7 +936,7 @@ React.createElement(() => {
     React UI docs. You may not need it in your application.
   */}
   return (
-    <RUIProvider globalProps={{
+    <GlobalPropsProvider globalProps={{
       Modal: { preventScrollUnderneath: window.document.documentElement }
     }}>
       <Button
@@ -999,7 +999,7 @@ React.createElement(() => {
           </Modal>
         )}
       </div>
-    </RUIProvider>
+    </GlobalPropsProvider>
   );
 });
 ```
diff --git a/src/components/Paper/Paper.jsx b/src/components/Paper/Paper.jsx
index 299625188..4780bd119 100644
--- a/src/components/Paper/Paper.jsx
+++ b/src/components/Paper/Paper.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import styles from './Paper.module.scss';
diff --git a/src/components/Popover/Popover.jsx b/src/components/Popover/Popover.jsx
index f0f0acfd3..4e9289ab2 100644
--- a/src/components/Popover/Popover.jsx
+++ b/src/components/Popover/Popover.jsx
@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { createPortal } from 'react-dom';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import getRootSideClassName from './_helpers/getRootSideClassName';
diff --git a/src/components/Popover/PopoverWrapper.jsx b/src/components/Popover/PopoverWrapper.jsx
index 13e18015e..0c1c6e7b4 100644
--- a/src/components/Popover/PopoverWrapper.jsx
+++ b/src/components/Popover/PopoverWrapper.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './PopoverWrapper.module.scss';
 
diff --git a/src/components/Radio/Radio.jsx b/src/components/Radio/Radio.jsx
index 56c57c6b1..be5248d6a 100644
--- a/src/components/Radio/Radio.jsx
+++ b/src/components/Radio/Radio.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
diff --git a/src/components/ScrollView/ScrollView.jsx b/src/components/ScrollView/ScrollView.jsx
index 471b8e452..87a73411c 100644
--- a/src/components/ScrollView/ScrollView.jsx
+++ b/src/components/ScrollView/ScrollView.jsx
@@ -6,10 +6,8 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import {
-  RUIContext,
-  withGlobalProps,
-} from '../../provider';
+import { TranslationsContext } from '../../providers/translations';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getElementsPositionDifference } from './_helpers/getElementsPositionDifference';
@@ -48,7 +46,7 @@ export const ScrollView = React.forwardRef((props, ref) => {
     ...restProps
   } = props;
 
-  const { translations } = useContext(RUIContext);
+  const translations = useContext(TranslationsContext);
 
   const [isAutoScrollInProgress, setIsAutoScrollInProgress] = useState(false);
   const [isScrolledAtStart, setIsScrolledAtStart] = useState(false);
diff --git a/src/components/SelectField/SelectField.jsx b/src/components/SelectField/SelectField.jsx
index 13eb61082..613b0efff 100644
--- a/src/components/SelectField/SelectField.jsx
+++ b/src/components/SelectField/SelectField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
diff --git a/src/components/Table/Table.jsx b/src/components/Table/Table.jsx
index 775895698..cb2e386ee 100644
--- a/src/components/Table/Table.jsx
+++ b/src/components/Table/Table.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import { TableHeaderCell } from './_components/TableHeaderCell';
 import { TableBodyCell } from './_components/TableBodyCell';
diff --git a/src/components/Tabs/Tabs.jsx b/src/components/Tabs/Tabs.jsx
index ecc5a694e..5d5b8ceb1 100644
--- a/src/components/Tabs/Tabs.jsx
+++ b/src/components/Tabs/Tabs.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './Tabs.module.scss';
 
diff --git a/src/components/Tabs/TabsItem.jsx b/src/components/Tabs/TabsItem.jsx
index a48fe0c4f..74ae2a56b 100644
--- a/src/components/Tabs/TabsItem.jsx
+++ b/src/components/Tabs/TabsItem.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import styles from './TabsItem.module.scss';
diff --git a/src/components/Text/Text.jsx b/src/components/Text/Text.jsx
index 64cdedecf..0800f04c2 100644
--- a/src/components/Text/Text.jsx
+++ b/src/components/Text/Text.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/TextArea/TextArea.jsx b/src/components/TextArea/TextArea.jsx
index 4c0fc2255..4d52943bb 100644
--- a/src/components/TextArea/TextArea.jsx
+++ b/src/components/TextArea/TextArea.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
diff --git a/src/components/TextField/TextField.jsx b/src/components/TextField/TextField.jsx
index 8584d64ab..9464ab59f 100644
--- a/src/components/TextField/TextField.jsx
+++ b/src/components/TextField/TextField.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootSizeClassName } from '../_helpers/getRootSizeClassName';
diff --git a/src/components/TextLink/TextLink.jsx b/src/components/TextLink/TextLink.jsx
index 111f7c062..b4ae9e50d 100644
--- a/src/components/TextLink/TextLink.jsx
+++ b/src/components/TextLink/TextLink.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { transferProps } from '../../utils/transferProps';
 import styles from './TextLink.module.scss';
 
diff --git a/src/components/Toggle/Toggle.jsx b/src/components/Toggle/Toggle.jsx
index 068b4c064..77d1fd0dd 100644
--- a/src/components/Toggle/Toggle.jsx
+++ b/src/components/Toggle/Toggle.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React, { useContext } from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { getRootValidationStateClassName } from '../_helpers/getRootValidationStateClassName';
diff --git a/src/components/Toolbar/Toolbar.jsx b/src/components/Toolbar/Toolbar.jsx
index 8bcef9df7..59ddc121d 100644
--- a/src/components/Toolbar/Toolbar.jsx
+++ b/src/components/Toolbar/Toolbar.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/Toolbar/ToolbarGroup.jsx b/src/components/Toolbar/ToolbarGroup.jsx
index 794e626bf..8c4fd6252 100644
--- a/src/components/Toolbar/ToolbarGroup.jsx
+++ b/src/components/Toolbar/ToolbarGroup.jsx
@@ -1,6 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
diff --git a/src/components/Toolbar/ToolbarItem.jsx b/src/components/Toolbar/ToolbarItem.jsx
index da8bc453a..31a7b77e0 100644
--- a/src/components/Toolbar/ToolbarItem.jsx
+++ b/src/components/Toolbar/ToolbarItem.jsx
@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { classNames } from '../../utils/classNames';
 import { transferProps } from '../../utils/transferProps';
-import { withGlobalProps } from '../../provider';
+import { withGlobalProps } from '../../providers/globalProps';
 import { isChildrenEmpty } from '../_helpers/isChildrenEmpty';
 import styles from './Toolbar.module.scss';
 
diff --git a/src/docs/customize/global-props.md b/src/docs/customize/global-props.md
index 71f14731a..1566c7468 100644
--- a/src/docs/customize/global-props.md
+++ b/src/docs/customize/global-props.md
@@ -3,133 +3,86 @@
 Sometimes it can be useful to share some configuration props between
 multiple instances of components of the same or different kind.
 
-This can be achieved by wrapping application or its part with `RUIProvider`
+This can be achieved by wrapping application or its part with `GlobalPropsProvider`
 and passing in the common props through `globalProps` prop. With or without
-using `RUIProvider` the component can be configured by passing in the props
+using `GlobalPropsProvider` the component can be configured by passing in the props
 directly. The props passed in directly always take precedence over props
-coming from `RUIProvider`.
+coming from `GlobalPropsProvider`.
 
 ## Basic Usage
 
-To define global props, you need to import `RUIProvider` first:
+To define global props, you need to import `GlobalPropsProvider` first:
 
 ```js
-import { RUIProvider } from '@react-ui-org/react-ui';
+import { GlobalPropsProvider } from '@react-ui-org/react-ui';
 ```
 
-Then wrap application or its part with `RUIProvider` with defined `globalProps`
+Then wrap application or its part with `GlobalPropsProvider` with defined `globalProps`
 attribute holding an object. Keys are names of the components, and their
 values are objects with arbitrary props you want to pass to the specified
 components.
 
-Keys conform to actual names of components:
-
-```jsx
-<RUIProvider globalProps={{
-  Button: { priority: 'filled' },
-  TextField: { variant: 'filled' },
-  SelectField: { variant: 'filled' },
-}}>
-  //...
-</RUIProvider>
-```
-
-See working example:
+Keys conform to actual names of components.
 
 ```docoff-react-preview
-React.createElement(() => {
-  const [variant, setVariant] = React.useState('filled');
-  return (
-    <RUIProvider
-      globalProps={{
-        Button: { priority: variant },
-        TextField: { variant },
-        SelectField: { variant },
-      }}
-    >
-      <Toolbar align="bottom">
-        <ToolbarItem>
-          <SelectField
-            id="variant"
-            label="Select variant of Select Field"
-            onChange={(e) => setVariant(e.target.value)}
-            options={[
-              {
-                label: 'filled',
-                value: 'filled',
-              },
-              {
-                label: 'outline',
-                value: 'outline',
-              },
-            ]}
-            value={variant}
-          />
-        </ToolbarItem>
-        <ToolbarItem>
-          <TextField
-            id="my-text-field"
-            label="Text Field"
-          />
-        </ToolbarItem>
-        <ToolbarItem>
-          <Button
-            id="my-button"
-            label="Button"
-          />
-        </ToolbarItem>
-      </Toolbar>
-    </RUIProvider>
-  );
-});
+<>
+  <Badge label="1" />
+
+  <GlobalPropsProvider
+    globalProps={{
+      Badge: { priority: 'outline' },
+    }}
+  >
+    <Badge label="2" />
+    <Badge
+      label="3"
+      priority="filled"
+    />
+  </GlobalPropsProvider>
+</>
 ```
 
 ## Nesting
 
-Global props can be nested. This is useful e.g. when you want to configure
+`GlobalPropsProvider`s can be nested. This is useful e.g. when you want to configure
 props across whole application and then override some of them in a specific
 part of the application.
 
-When nested `RUIProvider` is used, the props are merged deeply together. This
-means that you can extend specific object with new props or override existing
-ones. If you need to remove some prop, you can set it to `undefined`.
+When a nested `GlobalPropsProvider` is used, the props are merged deeply together.
+This means that you only need to set the value that changes and the rest is inherited.
+If you need to remove some prop, you can set it to `undefined`.
 
 ```docoff-react-preview
-React.createElement(() => {
-  const [variant, setVariant] = React.useState('filled');
-  return (
-    <RUIProvider globalProps={{
-      Grid: {
-        columns: {
-          xs: '1fr',
-          md: '1fr 1fr',
-        },
-        justifyItems: 'center',
-        rows: {
-          xs: '50px',
-          md: '100px',
-        },
+<GlobalPropsProvider globalProps={{
+  Grid: {
+    columns: {
+      xs: '1fr',
+      md: '1fr 1fr',
+    },
+    justifyItems: 'center',
+    rows: {
+      xs: '50px',
+      md: '100px',
+    },
+  },
+}}>
+  <GlobalPropsProvider globalProps={{
+    Grid: {
+      columns: {
+        sm: '1fr 1fr 1fr',
       },
-    }}>
-      <RUIProvider globalProps={{
-        Grid: {
-          columns: {
-            sm: '1fr 1fr 1fr',
-          },
-          justifyItems: 'undefined',
-          rows: undefined,
-        },
-      }}>
-        <Grid>
-          <docoff-placeholder bordered>Grid item</docoff-placeholder>
-          <docoff-placeholder bordered>Grid item</docoff-placeholder>
-          <docoff-placeholder bordered>Grid item</docoff-placeholder>
-          <docoff-placeholder bordered>Grid item</docoff-placeholder>
-          <docoff-placeholder bordered>Grid item</docoff-placeholder>
-          <docoff-placeholder bordered>Grid item</docoff-placeholder>
-        </Grid>
-      </RUIProvider>
-    </RUIProvider>
-  );
-});
+      justifyItems: 'undefined',
+      rows: undefined,
+    },
+  }}>
+    <Grid>
+      <docoff-placeholder bordered>Grid item</docoff-placeholder>
+      <docoff-placeholder bordered>Grid item</docoff-placeholder>
+      <docoff-placeholder bordered>Grid item</docoff-placeholder>
+      <docoff-placeholder bordered>Grid item</docoff-placeholder>
+      <docoff-placeholder bordered>Grid item</docoff-placeholder>
+      <docoff-placeholder bordered>Grid item</docoff-placeholder>
+    </Grid>
+  </GlobalPropsProvider>
+</GlobalPropsProvider>
 ```
diff --git a/src/docs/customize/translations.md b/src/docs/customize/translations.md
index 6b701ac29..d87a7e7b8 100644
--- a/src/docs/customize/translations.md
+++ b/src/docs/customize/translations.md
@@ -3,31 +3,53 @@
 Some components may contain texts which improve components' accessibility.
 All texts are in English by default and can be translated to other languages.
 
-Structure of translations can be found in the file `src/translations/en.json`.
+Structure of translations can be found in the file [src/translations/en.json].
 
-To use custom translations, you need to import `RUIProvider` first:
+To use custom translations, you need to import `TranslationsProvider` first:
 
 ```js
-import { RUIProvider } from '@react-ui-org/react-ui';
+import { TranslationsProvider } from '@react-ui-org/react-ui';
 ```
 
-Then wrap application (or its part) with `RUIProvider` with `translations` prop object.
-
-```jsx
-<RUIProvider translations={{
-  Alert: {
-    close: 'Close',
-  },
-  ModalCloseButton: {
-    close: 'Close',
-  },
-  ScrollView: {
-    next: 'Next',
-    previous: 'Previous',
-  },
+Then wrap application (or its part) with `TranslationsProvider` with
+the `translations` prop object.
+
+```docoff-react-preview
+<TranslationsProvider translations={{
+  Alert: { close: 'Close now!' }
 }}>
-  <Modal>
-    // ...
-  </Modal>
-</RUIProvider>
+  <Alert onClose={() => alert('You closed me!')}>
+    Hi, I'm a closable Alert.
+  </Alert>
+</TranslationsProvider>
 ```
+
+## Nesting
+
+The `TranslationsProvider`s can be nested. This is useful e.g. when you want to
+configure translations across whole application and then override some of them
+in a specific part of the application.
+
+When a nested `TranslationsProvider` is used, the props are merged deeply together.
+This means that you can extend specific object with new props or override existing
+ones.
+
+```docoff-react-preview
+<TranslationsProvider translations={{
+  Alert: { close: 'Close now!' }
+}}>
+  <Alert onClose={() => alert('You closed me!')}>
+    Hi, I'm a closable Alert.
+  </Alert>
+
+  <TranslationsProvider translations={{
+    Alert: { close: 'Close immediately!' }
+  }}>
+    <Alert onClose={() => alert('You closed me!')}>
+      Hi, I'm another Alert and I'm also closable.
+    </Alert>
+  </TranslationsProvider>
+</TranslationsProvider>
+```
+
+[src/translations/en.json]: https://github.com/react-ui-org/react-ui/blob/master/src/translations/en.js
diff --git a/src/index.js b/src/index.js
index 4526abc10..8436ff781 100644
--- a/src/index.js
+++ b/src/index.js
@@ -57,8 +57,9 @@ export {
   ToolbarItem,
 } from './components/Toolbar';
 
-// Provider
-export { RUIProvider } from './provider';
+// Providers
+export { GlobalPropsProvider } from './providers/globalProps';
+export { TranslationsProvider } from './providers/translations';
 
 // Utils
 export { classNames } from './utils/classNames';
diff --git a/src/provider/RUIContext.jsx b/src/provider/RUIContext.jsx
deleted file mode 100644
index a9bac060e..000000000
--- a/src/provider/RUIContext.jsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import defaultTranslations from '../translations/en';
-
-const RUIContext = React.createContext({
-  globalProps: {},
-  translations: defaultTranslations,
-});
-
-export default RUIContext;
diff --git a/src/provider/RUIProvider.jsx b/src/provider/RUIProvider.jsx
deleted file mode 100644
index e6067cc4d..000000000
--- a/src/provider/RUIProvider.jsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import PropTypes from 'prop-types';
-import React, {
-  useContext,
-  useMemo,
-} from 'react';
-import defaultTranslations from '../translations/en';
-import { mergeDeep } from '../utils/mergeDeep';
-import RUIContext from './RUIContext';
-
-const RUIProvider = ({
-  children,
-  globalProps,
-  translations,
-}) => {
-  const context = useContext(RUIContext);
-  const childProps = useMemo(() => ({
-    globalProps: mergeDeep(context?.globalProps || {}, globalProps),
-    translations: mergeDeep(context?.translations || {}, translations),
-  }), [context, globalProps, translations]);
-
-  return (
-    <RUIContext.Provider
-      value={childProps}
-    >
-      {children}
-    </RUIContext.Provider>
-  );
-};
-
-RUIProvider.defaultProps = {
-  children: null,
-  globalProps: null,
-  translations: defaultTranslations,
-};
-
-RUIProvider.propTypes = {
-  children: PropTypes.node,
-  globalProps: PropTypes.shape({}),
-  translations: PropTypes.shape({}),
-};
-
-export default RUIProvider;
diff --git a/src/provider/index.js b/src/provider/index.js
deleted file mode 100644
index 85410c5ef..000000000
--- a/src/provider/index.js
+++ /dev/null
@@ -1,3 +0,0 @@
-export { default as RUIProvider } from './RUIProvider';
-export { default as RUIContext } from './RUIContext';
-export { default as withGlobalProps } from './withGlobalProps';
diff --git a/src/providers/globalProps/GlobalPropsContext.jsx b/src/providers/globalProps/GlobalPropsContext.jsx
new file mode 100644
index 000000000..3ed61e3dc
--- /dev/null
+++ b/src/providers/globalProps/GlobalPropsContext.jsx
@@ -0,0 +1,5 @@
+import React from 'react';
+
+const GlobalPropsContext = React.createContext({});
+
+export default GlobalPropsContext;
diff --git a/src/providers/globalProps/GlobalPropsProvider.jsx b/src/providers/globalProps/GlobalPropsProvider.jsx
new file mode 100644
index 000000000..9e9a35902
--- /dev/null
+++ b/src/providers/globalProps/GlobalPropsProvider.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React, {
+  useContext,
+} from 'react';
+import { mergeDeep } from '../../utils/mergeDeep';
+import GlobalPropsContext from './GlobalPropsContext';
+
+const GlobalPropsProvider = ({
+  children,
+  globalProps,
+}) => {
+  const contextGlobalProps = useContext(GlobalPropsContext);
+
+  return (
+    <GlobalPropsContext.Provider
+      value={mergeDeep(contextGlobalProps, globalProps)}
+    >
+      {children}
+    </GlobalPropsContext.Provider>
+  );
+};
+
+GlobalPropsProvider.defaultProps = {
+  children: null,
+  globalProps: {},
+};
+
+GlobalPropsProvider.propTypes = {
+  children: PropTypes.node,
+  globalProps: PropTypes.shape({}),
+};
+
+export default GlobalPropsProvider;
diff --git a/src/provider/__tests__/RUIProvider.test.jsx b/src/providers/globalProps/__tests__/GlobalPropsProvider.test.jsx
similarity index 70%
rename from src/provider/__tests__/RUIProvider.test.jsx
rename to src/providers/globalProps/__tests__/GlobalPropsProvider.test.jsx
index 04b64ca9a..7ce47bae9 100644
--- a/src/provider/__tests__/RUIProvider.test.jsx
+++ b/src/providers/globalProps/__tests__/GlobalPropsProvider.test.jsx
@@ -3,44 +3,28 @@ import {
   render,
   within,
 } from '@testing-library/react';
-import { Alert } from '../../components/Alert';
-import { Badge } from '../../components/Badge';
-import { Grid } from '../../components/Grid';
-import RUIProvider from '../RUIProvider';
+import { Badge } from '../../../components/Badge';
+import { Grid } from '../../../components/Grid';
+import GlobalPropsProvider from '../GlobalPropsProvider';
 
 describe('rendering', () => {
-  it.each([
-    [
-      {
-        children: <Badge />,
-        globalProps: {
-          Badge: { label: 'label' },
-        },
-      },
-      (rootElement) => expect(within(rootElement).getByText('label')),
-    ],
-    [
-      {
-        children: <Alert onClose={() => {}}>alert text</Alert>,
-        translations: {
-          Alert: { close: 'Zavřít' },
-        },
-      },
-      (rootElement) => expect(within(rootElement).getByTitle('Zavřít')),
-    ],
-  ])('renders with props: "%s"', (testedProps, assert) => {
+  it('renders with global props', () => {
     const dom = render((
-      <RUIProvider
-        {...testedProps}
-      />
+      <GlobalPropsProvider
+        globalProps={{
+          Badge: { label: 'label' },
+        }}
+      >
+        <Badge />
+      </GlobalPropsProvider>
     ));
 
-    assert(dom.container.firstChild);
+    expect(within(dom.container.firstChild).getByText('label'));
   });
 
-  it('renders with nested providers', () => {
+  it('renders with nested providers and object typed props', () => {
     const dom = render((
-      <RUIProvider
+      <GlobalPropsProvider
         globalProps={{
           Grid: {
             alignContent: {
@@ -56,7 +40,7 @@ describe('rendering', () => {
           },
         }}
       >
-        <RUIProvider
+        <GlobalPropsProvider
           globalProps={{
             Grid: {
               alignContent: undefined,
@@ -71,7 +55,7 @@ describe('rendering', () => {
             },
           }}
         >
-          <RUIProvider
+          <GlobalPropsProvider
             globalProps={{
               Grid: {
                 autoFlow: {
@@ -86,9 +70,9 @@ describe('rendering', () => {
                 Content text
               </div>
             </Grid>
-          </RUIProvider>
-        </RUIProvider>
-      </RUIProvider>
+          </GlobalPropsProvider>
+        </GlobalPropsProvider>
+      </GlobalPropsProvider>
     ));
 
     // Assert alignContent
diff --git a/src/providers/globalProps/index.js b/src/providers/globalProps/index.js
new file mode 100644
index 000000000..45d1f8b19
--- /dev/null
+++ b/src/providers/globalProps/index.js
@@ -0,0 +1,3 @@
+export { default as GlobalPropsContext } from './GlobalPropsContext';
+export { default as GlobalPropsProvider } from './GlobalPropsProvider';
+export { default as withGlobalProps } from './withGlobalProps';
diff --git a/src/provider/withGlobalProps.jsx b/src/providers/globalProps/withGlobalProps.jsx
similarity index 58%
rename from src/provider/withGlobalProps.jsx
rename to src/providers/globalProps/withGlobalProps.jsx
index 9b4f2745c..f4e993b3e 100644
--- a/src/provider/withGlobalProps.jsx
+++ b/src/providers/globalProps/withGlobalProps.jsx
@@ -1,26 +1,24 @@
 import PropTypes from 'prop-types';
-import React from 'react';
-import RUIContext from './RUIContext';
+import React, {
+  useContext,
+} from 'react';
+import GlobalPropsContext from './GlobalPropsContext';
 
 export default (Component, componentName) => {
   const WithGlobalPropsComponent = ({
     forwardedRef,
     ...rest
-  }) => (
-    <RUIContext.Consumer>
-      {({ globalProps }) => {
-        const contextGlobalProps = globalProps ? globalProps[componentName] : null;
+  }) => {
+    const contextGlobalProps = useContext(GlobalPropsContext);
 
-        return (
-          <Component
-            {...contextGlobalProps}
-            {...rest}
-            ref={forwardedRef}
-          />
-        );
-      }}
-    </RUIContext.Consumer>
-  );
+    return (
+      <Component
+        {...contextGlobalProps[componentName] || {}}
+        {...rest}
+        ref={forwardedRef}
+      />
+    );
+  };
 
   WithGlobalPropsComponent.defaultProps = {
     forwardedRef: undefined,
@@ -29,6 +27,8 @@ export default (Component, componentName) => {
   WithGlobalPropsComponent.propTypes = {
     forwardedRef: PropTypes.oneOfType([
       PropTypes.func,
+
+      // The props can be of any type and here we need to support them all
       // eslint-disable-next-line react/forbid-prop-types
       PropTypes.shape({ current: PropTypes.any }),
     ]),
diff --git a/src/providers/translations/TranslationsContext.jsx b/src/providers/translations/TranslationsContext.jsx
new file mode 100644
index 000000000..1a2c17748
--- /dev/null
+++ b/src/providers/translations/TranslationsContext.jsx
@@ -0,0 +1,6 @@
+import React from 'react';
+import defaultTranslations from '../../translations/en';
+
+const RUIContext = React.createContext(defaultTranslations);
+
+export default RUIContext;
diff --git a/src/providers/translations/TranslationsProvider.jsx b/src/providers/translations/TranslationsProvider.jsx
new file mode 100644
index 000000000..3a0217e62
--- /dev/null
+++ b/src/providers/translations/TranslationsProvider.jsx
@@ -0,0 +1,33 @@
+import PropTypes from 'prop-types';
+import React, {
+  useContext,
+} from 'react';
+import { mergeDeep } from '../../utils/mergeDeep';
+import TranslationsContext from './TranslationsContext';
+
+const TranslationsProvider = ({
+  children,
+  translations,
+}) => {
+  const contextTranslations = useContext(TranslationsContext);
+
+  return (
+    <TranslationsContext.Provider
+      value={mergeDeep(contextTranslations, translations)}
+    >
+      {children}
+    </TranslationsContext.Provider>
+  );
+};
+
+TranslationsProvider.defaultProps = {
+  children: null,
+  translations: {},
+};
+
+TranslationsProvider.propTypes = {
+  children: PropTypes.node,
+  translations: PropTypes.shape({}),
+};
+
+export default TranslationsProvider;
diff --git a/src/providers/translations/__tests__/TranslationsProvider.test.jsx b/src/providers/translations/__tests__/TranslationsProvider.test.jsx
new file mode 100644
index 000000000..2fba2bc37
--- /dev/null
+++ b/src/providers/translations/__tests__/TranslationsProvider.test.jsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import {
+  render,
+  within,
+} from '@testing-library/react';
+import { Alert } from '../../../components/Alert';
+import { ScrollView } from '../../../components/ScrollView';
+import TranslationsProvider from '../TranslationsProvider';
+
+describe('rendering', () => {
+  it('renders with translations', () => {
+    const dom = render((
+      <TranslationsProvider
+        translations={{
+          Alert: { close: 'Zavřít' },
+        }}
+      >
+        <Alert onClose={() => {}}>alert text</Alert>
+      </TranslationsProvider>
+
+    ));
+
+    expect(within(dom.container.firstChild).getByTitle('Zavřít'));
+  });
+
+  it('renders with nested translations', () => {
+    const dom = render((
+      <TranslationsProvider
+        translations={{
+          ScrollView: {
+            next: 'Další',
+            previous: 'Předchozí',
+          },
+        }}
+      >
+        <TranslationsProvider
+          translations={{
+            ScrollView: { next: 'Siguiente' },
+          }}
+        >
+          <ScrollView arrows>some scrolable text</ScrollView>
+        </TranslationsProvider>
+      </TranslationsProvider>
+
+    ));
+
+    expect(within(dom.container.firstChild).getByTitle('Předchozí'));
+    expect(within(dom.container.firstChild).getByTitle('Siguiente'));
+  });
+});
diff --git a/src/providers/translations/index.js b/src/providers/translations/index.js
new file mode 100644
index 000000000..5dfc3925b
--- /dev/null
+++ b/src/providers/translations/index.js
@@ -0,0 +1,2 @@
+export { default as TranslationsContext } from './TranslationsContext';
+export { default as TranslationsProvider } from './TranslationsProvider';