diff --git a/src/components/TextInput.tsx b/src/components/TextInput.tsx
new file mode 100644
index 0000000..a75a357
--- /dev/null
+++ b/src/components/TextInput.tsx
@@ -0,0 +1,21 @@
+import classNames from "classnames";
+import { omit } from "lodash";
+import React from "react";
+
+type Props = {
+    placeholder?: string | undefined,
+    color?: string |undefined, 
+    className?: string | undefined,
+} & Omit<React.InputHTMLAttributes<HTMLInputElement> ,"">;
+
+export const TextInput = ({
+    placeholder = undefined,
+    color = "white",
+    className,
+    ...props
+} :Props) => {
+    return(
+        <input type="text" placeholder={placeholder} color={color} className={classNames({className})} />
+    );
+    
+}
diff --git a/src/stories/TextInput.stories.tsx b/src/stories/TextInput.stories.tsx
new file mode 100644
index 0000000..68795bb
--- /dev/null
+++ b/src/stories/TextInput.stories.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import {TextInput} from "../components/TextInput";
+
+export default {
+    title: 'Text Input',
+    component: TextInput,
+} as ComponentMeta<typeof TextInput>;
+
+const Template: ComponentStory<typeof TextInput> = (args) => <TextInput {...args} />
+
+export const TextInputStory = Template.bind({});
+
+TextInputStory.args ={
+    placeholder: "uaaaaaa",
+    color: 'blue'
+}
\ No newline at end of file