I’m working on a React project and I need to implement dropdown components that have the same look and feel as Notion’s interface. The specific styling isn’t super important to me, but I want that clean, modern dropdown appearance that Notion uses.
I’ve been searching around but haven’t found any good libraries or components that match this style. Has anyone worked with similar dropdowns before? Are there any existing React libraries that can help me achieve this kind of UI component?
I’m open to building it from scratch if needed, but I’d prefer to use something that’s already tested and works well. Any suggestions or recommendations would be really helpful!
Had the same issue a few months ago. I went with React Select and customized the hell out of it to look like Notion’s dropdowns. The trick was overriding their default theme - focused on clean borders, proper spacing, and subtle hover effects. What really helped was nailing the typography and focus states. Notion uses a light border highlight instead of that typical blue outline most libraries throw at you. React Select’s search feature works just like Notion’s too when you start typing. Took some fiddling with the animations, but got pretty close without building everything from scratch.
radix ui + some custom css has worked great for me! their dropdown handles focus and keyboard stuff neatly, so you can go crazy with your own styles. way easier than fighting with those opinionated libraries.
I previously created dropdown menus resembling Notion’s style using Headless UI in conjunction with Tailwind CSS. This combination allows for great customization regarding shadows and animations, effectively achieving the sleek Notion aesthetic. For a more straightforward approach, Mantine offers pre-built dropdown components that closely mimic Notion’s interface, and the transitions are impressively smooth.