I’m currently developing a project using React and I’m looking to add a dropdown menu that mirrors the design of Notion’s dropdowns. They have a sleek, contemporary aesthetic with great layout and text styling.
I’ve been on the lookout for libraries or components that can deliver this specific appearance without any additional adjustments, but I haven’t been successful yet. The overall design is what’s essential for me; I can adjust the colors using CSS.
Has anyone found any React libraries or component sets that provide dropdown menus resembling those in Notion? Alternatively, if someone has created something similar, I’d appreciate any guidance on how to proceed.
Ideally, I’m seeking a solution that’s ready to implement instead of having to start from scratch.
i just cloned Notion’s dropdown styles with vanilla react hooks. inspected their elements in devtools and grabbed their box-shadow values, border-radius, and that gray background. took about 3 hours but now i got exact matching styles without library bloat. the positioning logic for different screen sizes was the trickiest part, but useState + useRef did the job.
Hit this same problem six months ago rebuilding our dashboard. React Select + custom CSS variables worked great for copying Notion’s look. Here’s what I learned: Notion’s dropdowns aren’t just about container styling - they nail the typography weights, letter spacing, and micro-interactions. React Select handles keyboard nav and focus management, then you override their default classes for Notion’s padding, font rendering, and that subtle elevation effect. Their docs show how to customize control, menu, and option components separately. Took two days to get pixel-perfect, but now we’ve got a reusable component clients always compliment. Pro tip: match Notion’s search responsiveness by tweaking the debounce timing.
I encountered the same challenge and found that using Headless UI with Tailwind CSS captures the Notion dropdown aesthetic quite well. It notably assists in achieving the necessary animations and positioning that Notion employs, such as subtle shadows and rounded corners. Plus, it manages accessibility seamlessly while allowing you to customize styling. Their Listbox component served my requirements effectively. While you will need to implement some custom CSS to match Notion’s look precisely, it is significantly less effort than constructing everything from scratch. The built-in positioning logic and keyboard navigation are time-savers as well. Remember to include the backdrop blur effect and subtle borders that distinguish Notion’s design.