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. 🥳 🎉