awesome-design-tokens
4

Dtg Examples

screenshot of Dtg Examples

Design tokens integration examples in various UI frameworks

GithubDemo

Overview:

The current repository contains a web application that showcases several popular frontend solutions. The common thread among these projects is the use of Design Tokens, created with the help of the Design Tokens Generator. While some integrations may require more effort than others, the overall process is similar. The projects are built using Vite, ReactJS, and TypeScript, but the integrations should not be significantly different for other frameworks. The projects rely on CSS, TypeScript, and JSX.

Features:

  • CSS Modules + Headless UI: Most of the 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 two components without any additional setup.
  • Headless UI + Tailwind CSS: This app implementation takes advantage of the compatibility between Headless UI and Tailwind CSS. Design tokens work via the Tailwind theme, and Headless UI components are used in a similar manner.
  • Radix UI + Emotion: These technologies are used for brevity and demonstration purposes. Emotion is used in a CSS-like manner, making it compatible with design tokens in CSS variables format. Radix UI is used to build two components.
  • MUI + Base UI + MUI System: While using all MUI technologies is not mandatory, design tokens are implemented via the MUI theme layer with an experimental CSS variables context. The "sx" property is used dominantly for demonstration purposes. All components are built with MUI entities.
  • Chakra UI: Theming Chakra UI is a similar development experience to tailoring Tailwind CSS. All components are built with the framework entities. Design tokens work through Chakra UI theme properties with a few custom fields.

Summary:

The current repository showcases a web application that utilizes different frontend solutions and integrates the use of design tokens. The projects demonstrate the use of CSS Modules, Headless UI, Tailwind CSS, Radix UI, Emotion, Material UI, and Chakra UI. The projects are built using Vite, ReactJS, and TypeScript, but the integration of design tokens should be similar for other frameworks as well. By exploring the examples in this repository, developers can gain insights into how these frontend solutions utilize design tokens and how they can be integrated into different projects.