Consider alternative to Styled Components

[joepio]

Styled-Components is now in maintenance mode. CSS-in-JS is no longer the coolest kid in class, as it has some drawbacks:

• Performance isn't great (JS calls vs browser-native CSS)
• No server-side rendering (react server components don't support context API), although that's not a big issue for us

There are no urgent reasons to switch, but doing it earlier will be cheaper than later (although increasing LLM performance could change things).

Let's consider some options:

CSS modules

• Scoped (no name conflicts)
• Separate files, which is less convenient
• Good vite support

Tailwind

• In the tsx file, which is nice
• Could be harder to migrate to than to CSS modules
• Hard to read
• LLMs are pretty good at it

Radix (+ radix-themes)

• Solid component library
• Would be more impactful / costly to migrate towards, not just styling

Linaria

• Very similar API, easy to migrate to
• No React 19 support
• Not actively maintained

Panda CSS