diff --git a/src/common/interfaces/componentsProps.ts b/src/common/interfaces/componentsProps.ts
index 13d4a5e64cff54a034be5f5458b4c6196173aa0e..ebbe3ed3be0e56fdce1636eaad2ef8174fcd42fe 100644
--- a/src/common/interfaces/componentsProps.ts
+++ b/src/common/interfaces/componentsProps.ts
@@ -182,6 +182,10 @@ export interface IPopupProps {
   left?: number;
 }
 
+export interface ICropperProps {
+  size?: TSize;
+}
+
 export interface IColorPickerProps {
   size?: TSize;
   disabled?: boolean;
diff --git a/src/components/ColorPicker/ColorPicker.stories.ts b/src/components/ColorPicker/ColorPicker.stories.ts
index cf71cf7581b0bd0ad692b7ad00a07accaec1b2d4..2abc1569c514ab0a743c479e48ed42d6d2854bb5 100644
--- a/src/components/ColorPicker/ColorPicker.stories.ts
+++ b/src/components/ColorPicker/ColorPicker.stories.ts
@@ -9,7 +9,7 @@ const meta: Meta = {
   parameters: {
     docs: {
       description: {
-        component: 'A component to define number inputs with a dial.',
+        component: 'A component to pick color. Can be with button.',
       },
     },
   },
diff --git a/src/components/Cropper/Cropper.stories.ts b/src/components/Cropper/Cropper.stories.ts
new file mode 100644
index 0000000000000000000000000000000000000000..2cc8135d819f115f020600909394e797bab7ff57
--- /dev/null
+++ b/src/components/Cropper/Cropper.stories.ts
@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/vue3';
+
+import Cropper from './Cropper.vue';
+
+const meta: Meta = {
+  title: 'Components/Cropper',
+  component: Cropper,
+  tags: ['pick'],
+  parameters: {
+    docs: {
+      description: {
+        component: 'A component to pick color. Can be with button.',
+      },
+    },
+  },
+  argTypes: {
+    buttonProps: { control: 'object' },
+    sameButtonColor: { control: 'boolean' },
+    disabled: { control: 'boolean' },
+    size: { control: 'select', options: ['small', 'normal', 'large', 'huge'] },
+  },
+} satisfies Meta<typeof Cropper>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Simple: Story = {
+  args: {},
+};
+
+export const Full: Story = {
+  args: {
+    buttonProps: {
+      label: 'Pick color!',
+      theme: 'red',
+      textStyle: 'bold',
+    },
+
+    size: 'large',
+    sameButtonColor: true,
+  },
+};
diff --git a/src/components/Cropper/Cropper.vue b/src/components/Cropper/Cropper.vue
new file mode 100644
index 0000000000000000000000000000000000000000..07f9948b225afb547a7ec4cfc97198d1745a6ed2
--- /dev/null
+++ b/src/components/Cropper/Cropper.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { ICropperProps } from '@interfaces/componentsProps';
+
+const props = withDefaults(defineProps<ICropperProps>(), {
+  size: 'normal',
+  disabled: false,
+});
+</script>
+
+<template>
+  <section class="container"></section>
+</template>
+
+<style scoped>
+.container {
+}
+</style>