I’m working on a React project and need to implement a dropdown menu that has the same visual style as the ones used in Notion. You know, those clean dropdowns with the rounded corners and smooth animations.
I’ve been searching for existing React libraries that provide this kind of dropdown component but haven’t found anything that matches the exact look and feel. The styling doesn’t have to be pixel perfect, and I can customize the colors to match my app’s theme.
Has anyone come across a library or component that creates similar dropdown menus? Or would I need to build this from scratch using something like styled-components or regular CSS?
Any suggestions would be really helpful. I’m looking for something that’s easy to integrate and doesn’t require too much custom styling work.
Radix UI’s dropdown primitives work great for this. I built a Notion-style dropdown recently and their unstyled components gave me exactly what I needed without fighting pre-built styles. Animations were easy with CSS transitions - just target opacity and transform on the dropdown panel. The key to getting that Notion feel was nailing the spacing inside dropdown items and using a slightly elevated z-index with proper backdrop blur. Keyboard navigation comes built-in, which saves tons of time. You’ll probably spend a day or two polishing the visuals, but all the accessibility and behavior logic is already done for you.
I used Headless UI for something similar and it worked great. Their dropdown component handles accessibility and state management out of the box, so you can focus on styling it to look like Notion’s. Key things: subtle box-shadow, 8px border-radius, and smooth entrance animations. Positioning gets tricky near viewport edges, but their Popper integration takes care of that. You’ll probably get better results building on this framework instead of using existing libraries.
i’d say try react-select too! u can customize it well. took me a bit to match the vibes, just focus on the box-shadow and the translateY effect on hover. way less work than starting from zero.