diff --git a/src/components/ui/Input/Input.stories.tsx b/src/components/ui/Input/Input.stories.tsx
new file mode 100644
index 00000000..9f5e7c24
--- /dev/null
+++ b/src/components/ui/Input/Input.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Input } from './Input'
+
+const meta = {
+  title: 'UI/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {},
+} satisfies Meta<typeof Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Normal: Story = {
+  args: {},
+}
+
+export const Disabled: Story = {
+  args: {},
+}
diff --git a/src/components/ui/Input/Input.tsx b/src/components/ui/Input/Input.tsx
new file mode 100644
index 00000000..7468c0e5
--- /dev/null
+++ b/src/components/ui/Input/Input.tsx
@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { cn } from '@/utils'
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-primary-color focus-visible:outline-1 focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  },
+)
+Input.displayName = 'Input'
+
+export { Input }
diff --git a/src/components/ui/Input/index.tsx b/src/components/ui/Input/index.tsx
new file mode 100644
index 00000000..9789915b
--- /dev/null
+++ b/src/components/ui/Input/index.tsx
@@ -0,0 +1,3 @@
+import { Input } from './Input'
+
+export default Input