Current repo contains reproduction of the same web application using several popular frontend solutions.
The common DNA for those project is Design Tokens, created with the help of Design Tokens Generator.
Some integrations require more effort than others, however in a nutshell the process is similar.
For detailed guides please refer to the documentation on the website.
Please note that for demonstration purposes all projects are built with Vite + ReactJS + Typescript. Essentially integrations should not be different for other frameworks, since projects mostly rely on CSS, Typescript and JSX.
There are 2 shared projects that are used by all projects:
common-data - improvised database, model and assets,
common-tokens - shared foundations - core styles, themes and fonts.
tokens file is practically an export from the Design Tokens Generator.
Most of application is built with plain JSX and styled with CSS modules.
Design tokens are used in the form of CSS variables.
Headless UI is used in 2 components without any additional setup.
Since Headless UI works great with Tailwind CSS (naturally),
this app implementation takes the latter for a spin.
Design tokens work via Tailwind theme, Headless UI components are used more or less the same.
These two technologies are used merely for sake of brevity and demonstration.
Emotion can be used quite differently, but since it's very much CSS like,
design tokens are also in CSS variables format. Radix UI is used to build 2 components.
Using all MUI technologies is certainly not mandatory, quite the opposite.
Design tokens are implemented via MUI theme layer with experimental CSS variables context.
Despite recommended approach, for demonstration sx property is used dominantly.
All components are built with MUI entities.
Theming Chakra UI is a very similar dev experience to theming Tailwind CSS.
All components are build with the framework entities.
Design tokens work via Chakra UI theme properties with exception of a couple custom fields.
Images generated with Fusion Brain.
Fonts by Google Fonts.