diff --git a/packages/shared/components/color-picker/ColorPicker.stories.tsx b/packages/shared/components/color-picker/ColorPicker.stories.tsx
new file mode 100644
index 0000000000..f94f605fbc
--- /dev/null
+++ b/packages/shared/components/color-picker/ColorPicker.stories.tsx
@@ -0,0 +1,37 @@
+import React from "react";
+
+import { Meta, StoryObj } from "@storybook/react";
+
+import { ColorPicker } from "./ColorPicker";
+import { ColorPickerProps } from "./ColorPicker.types";
+
+const meta = {
+  title: "Components/ColorPicker",
+  component: ColorPicker,
+  argTypes: {
+    appliedColor: { control: "color" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Time input",
+      },
+    },
+  },
+} satisfies Meta<typeof ColorPicker>;
+type Story = StoryObj<typeof meta>;
+export default meta;
+
+const Template = ({ ...args }: ColorPickerProps) => {
+  return <ColorPicker {...args} />;
+};
+
+export const Default: Story = {
+  render: (args) => <Template {...args} />,
+  args: {
+    appliedColor: "#4781D1",
+    onClose: () => console.log("close"),
+    applyButtonLabel: "Apply",
+    cancelButtonLabel: "Cancel",
+  },
+};
diff --git a/packages/shared/components/color-picker/ColorPicker.styled.tsx b/packages/shared/components/color-picker/ColorPicker.styled.tsx
new file mode 100644
index 0000000000..419a01804a
--- /dev/null
+++ b/packages/shared/components/color-picker/ColorPicker.styled.tsx
@@ -0,0 +1,111 @@
+import styled, { css } from "styled-components";
+import { isMobileOnly } from "react-device-detect";
+
+const Wrapper = styled.div`
+  .save-button {
+    ${(props) =>
+      props.theme.interfaceDirection === "rtl"
+        ? css`
+            margin-left: 10px;
+          `
+        : css`
+            margin-right: 10px;
+          `}
+  }
+
+  .hex-color-picker .react-colorful {
+    width: auto;
+    height: 250px;
+    padding-bottom: 26px;
+  }
+
+  .react-colorful__saturation {
+    margin: 16px 0 26px 0;
+    border-radius: 3px;
+  }
+
+  .hex-color-picker .react-colorful__interactive {
+    width: 183px;
+
+    ${isMobileOnly &&
+    css`
+      width: calc(100vw - 76px);
+    `}
+  }
+
+  .hex-color-picker .react-colorful__saturation-pointer {
+    width: 14px;
+    height: 14px;
+    transform: none !important;
+  }
+
+  .hex-color-picker .react-colorful__hue {
+    border-radius: 6px;
+    height: 12px;
+  }
+
+  .hex-color-picker .react-colorful__hue-pointer {
+    width: 30px;
+    height: 30px;
+    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
+    border: 8px solid #fff;
+  }
+
+  .hex-value {
+    height: 32px;
+    outline: none;
+    padding: 6px 8px;
+    border: 1px solid ${(props) => (props.theme.isBase ? "#d0d5da" : "#474747")};
+    border-radius: 3px;
+    width: 100%;
+    box-sizing: border-box;
+    background: ${(props) => !props.theme.isBase && "#282828"};
+    color: ${(props) => !props.theme.isBase && "#5C5C5C"};
+  }
+
+  .hex-value-label {
+    line-height: 20px;
+  }
+
+  .hex-button {
+    display: flex;
+
+    .apply-button {
+      ${(props) =>
+        props.theme.interfaceDirection === "rtl"
+          ? css`
+              margin-left: 8px;
+            `
+          : css`
+              margin-right: 8px;
+            `}
+    }
+  }
+
+  .hex-color-picker {
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 16px;
+    width: 195px;
+
+    ${isMobileOnly &&
+    css`
+      width: calc(100vw - 64px);
+    `}
+  }
+
+  .hex-value-container {
+    order: 2;
+    padding-bottom: 16px;
+  }
+
+  .hex-color-picker .react-colorful {
+    order: 1;
+  }
+
+  .hex-button {
+    order: 3;
+  }
+`;
+
+export default Wrapper;
diff --git a/packages/shared/components/color-picker/ColorPicker.tsx b/packages/shared/components/color-picker/ColorPicker.tsx
index e8b2f86ddd..06d7e2d55e 100644
--- a/packages/shared/components/color-picker/ColorPicker.tsx
+++ b/packages/shared/components/color-picker/ColorPicker.tsx
@@ -1,132 +1,32 @@
-import React, { useEffect, useState } from "react";
-import { useTranslation } from "react-i18next";
-import styled, { css } from "styled-components";
-import { Button } from "@docspace/shared/components/button";
+import { useEffect, useState } from "react";
 import { HexColorPicker, HexColorInput } from "react-colorful";
-import { isMobileOnly } from "react-device-detect";
 
-const StyledComponent = styled.div`
-  .save-button {
-    ${(props) =>
-      props.theme.interfaceDirection === "rtl"
-        ? css`
-            margin-left: 10px;
-          `
-        : css`
-            margin-right: 10px;
-          `}
-  }
+import { Button } from "../button";
 
-  .hex-color-picker .react-colorful {
-    width: auto;
-    height: 250px;
-    padding-bottom: 26px;
-  }
+import Wrapper from "./ColorPicker.styled";
+import { ColorPickerProps } from "./ColorPicker.types";
+import { ButtonSize } from "../button/Button.enums";
 
-  .react-colorful__saturation {
-    margin: 16px 0 26px 0;
-    border-radius: 3px;
-  }
-
-  .hex-color-picker .react-colorful__interactive {
-    width: 183px;
-
-    ${isMobileOnly &&
-    css`
-      width: calc(100vw - 76px);
-    `}
-  }
-
-  .hex-color-picker .react-colorful__saturation-pointer {
-    width: 14px;
-    height: 14px;
-    transform: none !important;
-  }
-
-  .hex-color-picker .react-colorful__hue {
-    border-radius: 6px;
-    height: 12px;
-  }
-
-  .hex-color-picker .react-colorful__hue-pointer {
-    width: 30px;
-    height: 30px;
-    box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.25);
-    border: 8px solid #fff;
-  }
-
-  .hex-value {
-    height: 32px;
-    outline: none;
-    padding: 6px 8px;
-    border: 1px solid ${(props) => (props.theme.isBase ? "#d0d5da" : "#474747")};
-    border-radius: 3px;
-    width: 100%;
-    box-sizing: border-box;
-    background: ${(props) => !props.theme.isBase && "#282828"};
-    color: ${(props) => !props.theme.isBase && "#5C5C5C"};
-  }
-
-  .hex-value-label {
-    line-height: 20px;
-  }
-
-  .hex-button {
-    display: flex;
-
-    .apply-button {
-      ${(props) =>
-        props.theme.interfaceDirection === "rtl"
-          ? css`
-              margin-left: 8px;
-            `
-          : css`
-              margin-right: 8px;
-            `}
-    }
-  }
-
-  .hex-color-picker {
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 16px;
-    width: 195px;
-
-    ${isMobileOnly &&
-    css`
-      width: calc(100vw - 64px);
-    `}
-  }
-
-  .hex-value-container {
-    order: 2;
-    padding-bottom: 16px;
-  }
-
-  .hex-color-picker .react-colorful {
-    order: 1;
-  }
-
-  .hex-button {
-    order: 3;
-  }
-`;
-
-const HexColorPickerComponent = (props) => {
-  const { onCloseHexColorPicker, onAppliedColor, appliedColor } = props;
-
-  const [color, setColor] = useState(appliedColor);
-
-  const { t } = useTranslation("Common");
+const ColorPicker = ({
+  className,
+  id,
+  onClose,
+  onApply,
+  appliedColor,
+  applyButtonLabel,
+  cancelButtonLabel,
+}: ColorPickerProps) => {
+  const [color, setColor] = useState(appliedColor || "#4781D1");
 
   useEffect(() => {
-    if (color !== appliedColor) {
+    if (appliedColor && appliedColor !== color) {
       setColor(appliedColor);
     }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [appliedColor]);
 
   return (
-    <StyledComponent>
+    <Wrapper className={className} id={id}>
       <div className="hex-color-picker">
         <div className="hex-value-container">
           <div className="hex-value-label">Hex code:</div>
@@ -143,24 +43,32 @@ const HexColorPickerComponent = (props) => {
 
         <div className="hex-button">
           <Button
-            label={t("Common:ApplyButton")}
-            size="small"
+            label={applyButtonLabel}
+            size={ButtonSize.small}
             className="apply-button"
-            primary={true}
-            scale={true}
-            onClick={() => onAppliedColor(color)}
+            primary
+            scale
+            onClick={() => onApply(color)}
           />
           <Button
-            label={t("Common:CancelButton")}
+            label={cancelButtonLabel}
             className="cancel-button button"
-            size="small"
-            scale={true}
-            onClick={onCloseHexColorPicker}
+            size={ButtonSize.small}
+            scale
+            onClick={onClose}
           />
         </div>
       </div>
-    </StyledComponent>
+    </Wrapper>
   );
 };
 
-export default HexColorPickerComponent;
+ColorPicker.defaultProps = {
+  onClose: () => {},
+  onApply: () => {},
+  appliedColor: "#4781D1",
+  applyButtonLabel: "Apply",
+  cancelButtonLabel: "Cancel",
+};
+
+export { ColorPicker };
diff --git a/packages/shared/components/color-picker/ColorPicker.types.ts b/packages/shared/components/color-picker/ColorPicker.types.ts
new file mode 100644
index 0000000000..5b5b553b0a
--- /dev/null
+++ b/packages/shared/components/color-picker/ColorPicker.types.ts
@@ -0,0 +1,16 @@
+export interface ColorPickerProps {
+  /** Class name */
+  className?: string;
+  /** Used as HTML `id` property  */
+  id?: string;
+  /** Triggers function on color picker close */
+  onClose?: () => void;
+  /** Triggers function on color apply */
+  onApply: (color: string) => void;
+  /** Default color */
+  appliedColor?: string;
+  /** Apply button text */
+  applyButtonLabel: string;
+  /** Cancel button text */
+  cancelButtonLabel: string;
+}
diff --git a/packages/shared/components/color-picker/README.md b/packages/shared/components/color-picker/README.md
new file mode 100644
index 0000000000..241c2faab1
--- /dev/null
+++ b/packages/shared/components/color-picker/README.md
@@ -0,0 +1,31 @@
+# ColorPicker
+
+Color picker dialog
+
+### Usage
+
+```js
+import { ColorPicker } from "@docspace/shared/components/color-picker";
+```
+
+```jsx
+<ColorPicker
+  appliedColor="#4781D1"
+  onApply={(color) => console.log(color)}
+  onClose={() => hideColorPicker()}
+  applyButtonLabel="Apply"
+  cancelButtonLabel="Cancel"
+/>
+```
+
+#### Properties
+
+| Props               |   Type   | Required | Values |  Default  | Description                             |
+| ------------------- | :------: | :------: | :----: | :-------: | --------------------------------------- |
+| `className`         | `string` |    -     |   -    |    ''     | Allows to set classname                 |
+| `id`                | `string` |    -     |   -    |    ''     | Allows to set id                        |
+| `appliedColor`      | `string` |    -     |   -    | '#4781D1' | Default color                           |
+| `onApply`           |  `func`  |    -     |   -    |     -     | Triggers function on color apply        |
+| `onClose`           |  `func`  |    -     |   -    |     -     | Triggers function on color picker close |
+| `applyButtonLabel`  | `string` |    -     |   -    |     -     | Apply button text                       |
+| `cancelButtonLabel` | `string` |    -     |   -    |     -     | Cancel button text                      |
diff --git a/packages/shared/components/color-picker/index.tsx b/packages/shared/components/color-picker/index.tsx
new file mode 100644
index 0000000000..94ee64c784
--- /dev/null
+++ b/packages/shared/components/color-picker/index.tsx
@@ -0,0 +1 @@
+export { ColorPicker } from "./ColorPicker";