Added Storybook setup with 6 core component stories and README instructions.

.gitignore

@@ -39,3 +39,6 @@ yarn-error.log*
 # typescript
 *.tsbuildinfo
 next-env.d.ts
+
+*storybook.log
+storybook-static

.storybook/README.md

@@ -0,0 +1,34 @@
+# Storybook Setup Guide
+
+This directory contains the configuration files for **Storybook**, a UI development environment that allows developers to preview and test individual components in isolation.
+
+---
+
+## Getting Started
+
+Follow the steps below to run Storybook locally:
+
+### 1️⃣ Install Dependencies
+If you haven’t already installed project dependencies, run:
+```bash
+npm install
+
+### 2️⃣ Run Storybook in Development Mode
+
+To start Storybook locally:
+npm run storybook
+This will start Storybook on your default browser, typically at 
+- http://localhost:6006
+
+### 3️⃣ Build Storybook for Deployment
+
+To build a static version of Storybook:
+npm run build-storybook
+
+### Notes
+
+Some components may still be loading placeholders — future contributors can enhance their stories with interactivity, actions, and controls.
+
+Configurations are located in:
+.storybook/main.ts
+.storybook/preview.ts

.storybook/global.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

.storybook/main.ts

@@ -0,0 +1,16 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    '@storybook/addon-actions',
+    '@storybook/addon-a11y'
+  ],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  staticDirs: ['../public'],
+};
+
+export default config;

.storybook/preview.ts

@@ -0,0 +1,16 @@
+import type { Preview } from '@storybook/react';
+import "../src/styles/global.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

.storybook/vite.config.ts

@@ -0,0 +1,10 @@
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+export default defineConfig({
+  plugins: [react()],
+  css: {
+    preprocessorOptions: {},
+  },
+});

.storybook/vitest.setup.ts

@@ -0,0 +1,7 @@
+import * as a11yAddonAnnotations from "@storybook/addon-a11y/preview";
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);