Actually, it’s all of this together and so much more!
The component-based model was a massive step in the right direction, but usually, there was no governance model of how to iterate. Which again lead to inconsistent UI or a need for constant design oversight.
A design system is a collection of reusable components and foundations, guided by clear standards, that can be assembled together to build any number of applications. It is not a one-time project, it's a product serving other products. It has its own process, roadmap, version control and team.
It includes things like:
Inside your React project directory, install Rock UI by running the following:
create-react-appinstallation instructions, check this CRA templates guide
For Rock UI to work correctly, you need to setup the
ThemeProvider at the
root of your application. You also add browser css reset styles by passing the
Go to the root of your application, and do this:
- For Next.js, you need to set this up in
- For Gatsby, install the
gatsby-plugin-chakra-ui. It does it automatically for you.
- For Create React App, you need to set this up in
If you need to customize the default chakra theme to match your design
requirements, you can extend the
That's it, you're good to go!
Please note that when adding Rock UI to a TypeScript project, a minimum
TypeScript version of
3.8.0 is required.
If you're adding Rock UI to a
create-react-app project, this means you'll
need to manually upgrade
See the guide for our create-react-app
templates if you'd like to generate a Chakra-enabled
Please see our contribution guidelines to learn how you can contribute to this project.