We can't find the internet
Attempting to reconnect
Something went wrong!
Hang in there while we get back on track
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.
- 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
extendThemefunction 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
extendThemefunction - Building a design system with Chakra Vue involves creating a theme, extending the theme with custom components, and creating semantic tokens
-
Chakra Vue’s
ChakraFactoryfunction 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