diff --git a/packages/serchbar/README.md b/packages/serchbar/README.md
new file mode 100644
index 0000000..3b6b2ee
--- /dev/null
+++ b/packages/serchbar/README.md
@@ -0,0 +1,7 @@
+# serchbar
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test serchbar` to execute the unit tests via [Vitest](https://vitest.dev/).
diff --git a/packages/serchbar/eslint.config.js b/packages/serchbar/eslint.config.js
new file mode 100644
index 0000000..2f6e3f0
--- /dev/null
+++ b/packages/serchbar/eslint.config.js
@@ -0,0 +1,12 @@
+const nx = require('@nx/eslint-plugin');
+const baseConfig = require('../../eslint.config.js');
+
+module.exports = [
+  ...baseConfig,
+  ...nx.configs['flat/react'],
+  {
+    files: ['**/*.ts', '**/*.tsx', '**/*.js', '**/*.jsx'],
+    // Override or add rules here
+    rules: {},
+  },
+];
diff --git a/packages/serchbar/jest.config.ts b/packages/serchbar/jest.config.ts
new file mode 100644
index 0000000..f057b7f
--- /dev/null
+++ b/packages/serchbar/jest.config.ts
@@ -0,0 +1,17 @@
+export default {
+  displayName: 'serchbar',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      '@swc/jest',
+      {
+        jsc: {
+          parser: { syntax: 'typescript', tsx: true },
+          transform: { react: { runtime: 'automatic' } },
+        },
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/packages/serchbar',
+};
diff --git a/packages/serchbar/package.json b/packages/serchbar/package.json
new file mode 100644
index 0000000..1c81e6e
--- /dev/null
+++ b/packages/serchbar/package.json
@@ -0,0 +1,12 @@
+{
+  "name": "@marino-ui/serchbar",
+  "version": "0.0.1",
+  "main": "./index.js",
+  "types": "./index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./index.mjs",
+      "require": "./index.js"
+    }
+  }
+}
diff --git a/packages/serchbar/project.json b/packages/serchbar/project.json
new file mode 100644
index 0000000..c138dc2
--- /dev/null
+++ b/packages/serchbar/project.json
@@ -0,0 +1,9 @@
+{
+  "name": "serchbar",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/serchbar/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project serchbar --web",
+  "targets": {}
+}
diff --git a/packages/serchbar/src/index.ts b/packages/serchbar/src/index.ts
new file mode 100644
index 0000000..707d56f
--- /dev/null
+++ b/packages/serchbar/src/index.ts
@@ -0,0 +1 @@
+export * from './lib/serchbar';
diff --git a/packages/serchbar/src/lib/serchbar.module.css b/packages/serchbar/src/lib/serchbar.module.css
new file mode 100644
index 0000000..45c2aa4
--- /dev/null
+++ b/packages/serchbar/src/lib/serchbar.module.css
@@ -0,0 +1,7 @@
+/*
+ * Replace this with your own classes
+ *
+ * e.g.
+ * .container {
+ * }
+*/
diff --git a/packages/serchbar/src/lib/serchbar.spec.tsx b/packages/serchbar/src/lib/serchbar.spec.tsx
new file mode 100644
index 0000000..e4796c2
--- /dev/null
+++ b/packages/serchbar/src/lib/serchbar.spec.tsx
@@ -0,0 +1,10 @@
+import { render } from '@testing-library/react';
+
+import Serchbar from './serchbar';
+
+describe('Serchbar', () => {
+  it('should render successfully', () => {
+    const { baseElement } = render(<Serchbar />);
+    expect(baseElement).toBeTruthy();
+  });
+});
diff --git a/packages/serchbar/src/lib/serchbar.tsx b/packages/serchbar/src/lib/serchbar.tsx
new file mode 100644
index 0000000..b976c7a
--- /dev/null
+++ b/packages/serchbar/src/lib/serchbar.tsx
@@ -0,0 +1,11 @@
+import styles from './serchbar.module.css';
+
+export function Serchbar() {
+  return (
+    <div className={styles['container']}>
+      <h1>Welcome to Serchbar!</h1>
+    </div>
+  );
+}
+
+export default Serchbar;
diff --git a/packages/serchbar/tsconfig.json b/packages/serchbar/tsconfig.json
new file mode 100644
index 0000000..bab74ff
--- /dev/null
+++ b/packages/serchbar/tsconfig.json
@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "types": ["vite/client"]
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    },
+    {
+      "path": "./tsconfig.spec.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}
diff --git a/packages/serchbar/tsconfig.lib.json b/packages/serchbar/tsconfig.lib.json
new file mode 100644
index 0000000..8d6bbf7
--- /dev/null
+++ b/packages/serchbar/tsconfig.lib.json
@@ -0,0 +1,23 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts",
+      "vite/client"
+    ]
+  },
+  "exclude": [
+    "**/*.spec.ts",
+    "**/*.test.ts",
+    "**/*.spec.tsx",
+    "**/*.test.tsx",
+    "**/*.spec.js",
+    "**/*.test.js",
+    "**/*.spec.jsx",
+    "**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}
diff --git a/packages/serchbar/tsconfig.spec.json b/packages/serchbar/tsconfig.spec.json
new file mode 100644
index 0000000..26ef046
--- /dev/null
+++ b/packages/serchbar/tsconfig.spec.json
@@ -0,0 +1,20 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "module": "commonjs",
+    "types": ["jest", "node"]
+  },
+  "include": [
+    "jest.config.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.js",
+    "src/**/*.spec.js",
+    "src/**/*.test.jsx",
+    "src/**/*.spec.jsx",
+    "src/**/*.d.ts"
+  ]
+}
diff --git a/packages/serchbar/vite.config.ts b/packages/serchbar/vite.config.ts
new file mode 100644
index 0000000..c0d87b8
--- /dev/null
+++ b/packages/serchbar/vite.config.ts
@@ -0,0 +1,51 @@
+/// <reference types='vitest' />
+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react-swc';
+import dts from 'vite-plugin-dts';
+import * as path from 'path';
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { nxCopyAssetsPlugin } from '@nx/vite/plugins/nx-copy-assets.plugin';
+
+export default defineConfig({
+  root: __dirname,
+  cacheDir: '../../node_modules/.vite/packages/serchbar',
+
+  plugins: [
+    react(),
+    nxViteTsPaths(),
+    nxCopyAssetsPlugin(['*.md']),
+    dts({
+      entryRoot: 'src',
+      tsconfigPath: path.join(__dirname, 'tsconfig.lib.json'),
+    }),
+  ],
+
+  // Uncomment this if you are using workers.
+  // worker: {
+  //  plugins: [ nxViteTsPaths() ],
+  // },
+
+  // Configuration for building your library.
+  // See: https://vitejs.dev/guide/build.html#library-mode
+  build: {
+    outDir: '../../dist/packages/serchbar',
+    emptyOutDir: true,
+    reportCompressedSize: true,
+    commonjsOptions: {
+      transformMixedEsModules: true,
+    },
+    lib: {
+      // Could also be a dictionary or array of multiple entry points.
+      entry: 'src/index.ts',
+      name: 'serchbar',
+      fileName: 'index',
+      // Change this to the formats you want to support.
+      // Don't forget to update your package.json as well.
+      formats: ['es', 'cjs'],
+    },
+    rollupOptions: {
+      // External packages that should not be bundled into your library.
+      external: ['react', 'react-dom', 'react/jsx-runtime'],
+    },
+  },
+});
diff --git a/tsconfig.base.json b/tsconfig.base.json
index b330da1..2b1bc7c 100644
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -18,7 +18,8 @@
       "@marino-ui/button": ["packages/button/src/index.ts"],
       "@marino-ui/footer": ["packages/footer/src/index.ts"],
       "@marino-ui/grid": ["packages/grid/src/index.ts"],
-      "@marino-ui/header": ["packages/header/src/index.ts"]
+      "@marino-ui/header": ["packages/header/src/index.ts"],
+      "@marino-ui/serchbar": ["packages/serchbar/src/index.ts"]
     }
   },
   "exclude": ["node_modules", "tmp"]