This was mostly a learning exercise in compound components. The API is a bit verbose, but it’s a good way to start exploring the pattern. It looks like this: Window, Window.Bar, Window.Bar.Input, Window.Tabs.Tab, Window.Body, etc. Radix UI tabs under the hood.

Safari

Safari is beautiful. Important to get the traffic light positioning correct to feel like a native macOS app. In Electron, use trafficLightPosition: { x: 19, y: 18 }.

Dictionary

Search for a word to reveal a sliding sidebar. Animated with transformX and negative margin-right to avoid skewing inner contents. Not 60fps, but nothing that shifts block content like this can be done purely with GPU-accelerated properties.

I learned this trick from Linear, which uses it to reveal sidebars throughout the app. The performance on modern devices is suprisingly smooth.

Bugs: top left corner radius clips when opening/closing the sidebar. I used some hack when initially implementing this, but I don’t remember the details.