Sybren Willemot - Can you build a design system with Chakra UI Vue? - Vuejs Amsterdam 2023

Discover how to build a design system with Chakra UI Vue, a baking mix for speed and consistency, and learn about semantic tokens, theme customization, and reusability.

Key takeaways

Building a design system is like baking a cake
Chakra UI Vue can be used as a “baking mix” to speed up the process
Design systems are collections of reusable components with consistent styling and accessibility
Semantic tokens can be used to create design tokens with a single value that can be used in multiple places
Checking values and their variations is important for consistency and usability
A design system needs to be well-documented to ensure that users can easily use and customize it
Chakra Vue’s extendTheme function allows you to add custom styling and components to the theme
Tokens can be used to style components and make them reusable
Chakra Vue’s theme object allows you to define design tokens and use them to customize component styling
Semantic tokens can be used to create tokens that change depending on the environment or color mode
Design systems can be built using Chakra Vue and its extendTheme function
Building a design system with Chakra Vue involves creating a theme, extending the theme with custom components, and creating semantic tokens
Chakra Vue’s ChakraFactory function can be used to style components with tokens
Design systems can be used to create consistent and accessible UI and UX across multiple applications and platforms

Sybren Willemot - Can you build a design system with Chakra UI Vue? - Vuejs Amsterdam 2023

More talks