diff --git a/Topics/Tech_Stacks/ChakraUI.md b/Topics/Tech_Stacks/ChakraUI.md new file mode 100644 index 000000000..fd466146c --- /dev/null +++ b/Topics/Tech_Stacks/ChakraUI.md @@ -0,0 +1,74 @@ +# An introduction to Chakra UI + +## Installation & Setup + +### Installation + +To install Chakra UI you can use the Node Package Manager (npm) or yarn: + +```bash +npm install @chakra-ui/react @emotion/react @emotion/styled framer-motion +# or +yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion +``` + +### Setup + +Once Chakra UI has been installed to your React app, your application will need to become a child of the `ChakraProvider` to begin utilizing Chakra's pre-styled components. Your `App.jsx` should look roughly similar to this snippet from [Chakra UI's website](https://chakra-ui.com/getting-started): + +```js +import * as React from "react"; + +// 1. import `ChakraProvider` component +import { ChakraProvider } from "@chakra-ui/react"; + +function App() { + // 2. Wrap ChakraProvider at the root of your app + return ( + + + + ); +} +``` + +A list of components and their custom props can be found [here](https://chakra-ui.com/docs/components). + +## Usage + +### Using UI components + +Chakra UI provides a plethora of pre-styled components that cover a wide range of UI needs. These components are highly customizable and can be easily integrated into your React application. + +**Basic Usage**: +To use a Chakra UI component, simply import it from `@chakra-ui/react` and use it as you would any other React component. For example, to use a `Button` component: + +```js +import { Button } from "@chakra-ui/react"; + +function MyComponent() { + return ; +} +``` + +## Benefits and Drawbacks + +### Benefits + +- **Accessibility**: Chakra UI prioritizes accessibility, ensuring that components are usable by everyone, including those with disabilities. +- **Easy to Build Complex Interfaces**: Chakra UI's component-based architecture follows a modular approach, meaning complex interfaces can be easily created through composing smaller, reusable components. +- **Intuitive Documentation\***: The developer experience of Chakra UI is strong through Chakra UI's intuitive and clear [documentation](https://chakra-ui.com/docs/styled-system/style-props). This means, important explanations, for concepts such as responsive design and styling, can always be easily understood and found. +- **Performance**: Chakra UI was built with performance in mind, utilizing optimization techniques that are often too cumbersome or difficult to implement when using plain CSS and JS in a personal project. + +### Drawbacks + +- **Learning Curve**: Even though Chakra UI strongly focuses on simplifying the front end development process, component libraries can always feature a learning curve to beginners who are unfamiliar with the workflow surrounding component-based architecture +- **Bundle Size**: Including Chakra UI in a project often increases the bundle size, increasing the cumbersome nature of a build. +- **Design Consistency**: Due to Chakra UI's increased styling complexity over more traditional non-React CSS component libraries, maintaining design consistency across a project with multiple team members will require coordination and communication over styling decisions. + +## Resources + +- [Chakra UI](https://chakra-ui.com/) +- [Chakra UI's NPM Page](https://www.npmjs.com/package/@chakra-ui/react) +- [Informative Chakra UI Tutorial Video Series](https://www.youtube.com/watch?v=iXsM6NkEmFc&list=PL4cUxeGkcC9hcnIeryurNMMcGBHp7AYlP) +- [React Information](./React.md) diff --git a/Topics/Tech_Stacks/React.md b/Topics/Tech_Stacks/React.md index e3ba35d76..42d2c90e4 100644 --- a/Topics/Tech_Stacks/React.md +++ b/Topics/Tech_Stacks/React.md @@ -58,6 +58,9 @@ A fully-featured UI library that offers a huge range of common components that a [Bootstrap](https://getbootstrap.com/) Another responsive UI library that allows you to focus on development by handling the design logistics for you. +[Chakra UI](https://chakra-ui.com/) +A powerful component library for React with a modern and React-centric design system that focuses on theming and responsiveness. See [An introduction to Chakra UI](./ChakraUI.md) for a tutorial on installing and utilizing Chakra UI best. + ### Miscellaneous [GitHub Pages](https://pages.github.com/)