Principles that keep your code and UX consistent
Saas UI comes with an extensive set of design principes that aim to limit technical dept in the long run and keep UX consistent throughout your projects life-cyle. These principles are based on industry standards, but opiniated, they serve as a starting point for your project.
All basic Chakra UI principles apply when developing components. In case you are not familiar with these principles, here
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. Learn more about dark mode.
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,
Was this helpful?