Let’s start with a fresh Next.js project. We are going to use bun as our package manager (because it’s super fast, even faster pnpm). In your vs code terminal, navigate to your desired folder and run:

Now navigate to the folder my-dropdown. Inside the src folder we will create a new components folder, where we will create our first dropdown component.

So create a file named dropdown.tsx and start putting in some stuffs. Let’s create the basic structure of the dropdown component:

We want to make sure that the component is type-safe. So let’s create an interface and a DropdownItem type. Create a new folder called types inside src, then create a new index.ts file.

Now in our dropdown component again -

Now that we have the basic structure, let’s put in some design -

Now go to page.tsx and render your component and test the work so far:

Run the application with -

You should now be able to see the current state:

Great work so far! Now let’s my our dropdown dynamic. Navigate to the dropdown component and do the following:

And that’s it. You can now define your own options and dropdown name and test the component out!

Here’s the final result:

Thank you for reading this far! Good luck!