Skip to content
Experiment

Profile menu

An update to Tato's stock profile menu that morphs as a single fluid surface.

I wanted to improve upon our profile menu at Tato. When I joined, it was a standard shadcn/ui dropdown, the one that ships with the sidebar component. While the original dropdown did its job, I wanted to build something with a bit more flair. Inspired by liquid glass's shifting forms, I wanted to create something that felt fluid and part of a single morphing surface.

I've also been using Base UI more frequently over Radix, and I've been loving the interface and the DX improvements the creators have made. In particular, I really love the render function which provides easy access to properties and state of the component.

  • motion
  • useMeasure
  • Base UI
  • tailwind
  • react