Chakra UI Vue is established on principles that keep its components fairly consistent. Understanding these concepts will help you better contribute to Chakra UI Vue.
Our goal is to design simple, composable components that cater to real-life UI design problems. In order to do that, we developed a set of principles that help us always be on that path.
- Style Props: All component styles can be overridden or extended via style
props to reduce the use of
styled(). Compose new components from
- Simplicity: Strive to keep the component API fairly simple and show real world scenarios of using the component.
- Composition: Break down components into smaller parts with minimal props to keep complexity low, and compose them together. This will ensure that the styles and functionality are flexible and extensible.
- Accessibility: When creating a component, keep accessibility top of mind.
This includes keyboard navigation, focus management, color contrast, voice
over, and the correct
- Dark Mode: Make components dark mode compatible. Use
useColorModehook to handle styling.
- Naming Props: We all know naming is the hardest thing in this industry.
Generally, ensure a prop name is indicative of what it does. Boolean props
should be named using auxiliary verbs such as
should. For example,
Edit this page on GitHub