Changing UI Library

[mariojsnunes]

We currently use mainly theme-ui and emotion.

• Theme UI doesn't have enough components (because of that, we import mui for tabs, photoswipe for image gallery and probably others).
• Emotion is slow for SRR and hard to setup.

The requirements are:

• Be able to apply our unique style the components
• Avoid style overrides
• Be able to apply tenant theming dynamically (currently only primary/accent colors)
• Avoid TailwindCSS, but I'm happy to be convinced otherwise :)
• Be able to create a component library with storybook
• Good DX (Developer Experience)

Keep in mind changing the UI Library isn't something we want to do often, so getting it right is important even if it takes a bit longer.

Found this recommendation from an initial research with AI:

• Radix UI primitives (or Ark UI) → behavior + accessibility
• Panda CSS → styling, design tokens, atomic CSS
• Apply Theme CSS variables at root.tsx → runtime tenant colors from DB
• shadcn/ui as a reference repo → steal component patterns, don't install the package

Please let us know your opinions on this :)