6 Dendron Design System
In order to keep a consistent UI across Dendron apps: Create a design-system of UI components and theme objects, hosted on npm that can be installed and used across all Dendron applications.
When building out a new React based Dendron project, instead of needing to create a components folder and create all your own local components per project, you can instead install ie.
yarn add dendron-design-systemand start building the app using these components like lego blocks.
Creating a consistent UI across apps. Inevitably when there are local component folders in each app with the same components (ie. Button) there will be inconsistencies in styles / functionality which can be confusing for users. A good design system creates a consistent UI across apps.
Updates also apply across apps. When a component is updated, simply publish a new version on npm and upgrade all apps to the
Speed up development.
Research-backed studies suggest reusing code can yield 42–81% time savings and boost productivity by 40%. Storybook
- Tech Stack for Design System.
- React (compatible with all current and upcoming Next.js apps)
- Chakra-UI (already is use within Dendron and a very popular and well made UI library)
- Start by converting the small style guide Dendron has on this website to a design system hosted on npm.
- Create theme with colors, typography etc.
- Create UI component variants (ie, button, input, dropdown etc.)
WIP: I will get an example repo setup and update.