How to add Search in Starter Kit
The search functionality is available only in the full-version. If you have started your project using the starter-kit as per our suggestion, please follow the steps below to implement the search functionality in your project.
Step 1: Install cmdk Package
Begin by installing the cmdk package, which is required for the search functionality.
Run the appropriate command in your project's root directory based on your package manager:
- pnpm
- yarn
- npm
pnpm install cmdk
yarn add cmdk
npm install cmdk
Step 2: Copy Search Components
Copy the full-version/src/components/layout/shared/search folder from the full-version and paste it into your project's src/components/layout/shared folder.
Step 3: Create searchData.ts File
Create a searchData.ts file in your project's src/data folder. This file will contain the data to be used for the search functionality.
Step 4: Update Navbar
Import the <NavSearch /> component into the src/components/layout/vertical/NavbarContent.tsx file. Add it after the <NavToggle /> component.
That's it. You have successfully implemented the search functionality in your project. 🥳 🎉