https://github.com/app-generator/sample-react-chakra-ui-introduction

React Chakra UI - Learn by Coding (Blog Article) | AppSeed
https://github.com/app-generator/sample-react-chakra-ui-introduction

appseed-sample chakra-ui react react-sample

Last synced: 10 months ago
JSON representation

React Chakra UI - Learn by Coding (Blog Article) | AppSeed

• Host: GitHub
• URL: https://github.com/app-generator/sample-react-chakra-ui-introduction
• Owner: app-generator
• License: mit
• Created: 2022-04-29T07:56:56.000Z (over 3 years ago)
• Default Branch: main
• Last Pushed: 2022-11-25T07:04:13.000Z (about 3 years ago)
• Last Synced: 2025-03-11T05:55:56.136Z (11 months ago)
• Topics: appseed-sample, chakra-ui, react, react-sample
• Language: JavaScript
• Homepage: https://blog.appseed.us/chakra-ui-react-coding-landing-page/
• Size: 457 KB
• Stars: 13
• Watchers: 2
• Forks: 6
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

          
# [React Chakra Introduction](https://blog.appseed.us/chakra-ui-react-coding-landing-page/)

Sample Code for the blog article [React Chakra UI Components - Learn by Coding](https://blog.appseed.us/chakra-ui-react-coding-landing-page/) - Provided by `AppSeed`.

The article explains how to use the Chakra UI library in React.js by building a responsive website. The website will be built with Chakra components only, no HTML element will be used.

- 👉 [React Chakra Landing Page](https://react-chakra-ui-landing-page.appseed-srv1.com/) - LIVE Demo

- 👉 [React Apps](https://appseed.us/apps/react) - index provided by `AppSeed`




## How to use it 

- Install `NodejS` - version 14.x or higher 

- Install dependencies via `yarn`

- Start the project: `yarn start` 




![React MUI Introduction - Sample Page crafted with MUI.](https://user-images.githubusercontent.com/51070104/167240339-dc157d52-8fc1-410f-b5f1-74ab11205b0b.gif)




## Components

- `Header` 

- `Hero`

- `Info Section`

- `AboutUs`

- `Testimonial`

- `ContactUs`

- `Footer`   




## What is React.js

React.js is a JavaScript library that allows you to build fast and efficient web applications using the minimum amount of code possible. In React.js, you can break the web layout into components - reusable bits of code that return HTML elements. 

- 👉 [JavaScript concepts for React Beginners](https://blog.appseed.us/10-javascript-concepts-for-react-beginners/)




## Chakra UI Library 

Chakra UI is a library that allows you to build stunning and modern web applications using various layout components. It differs from other UI frameworks in that it offers accessibility and dark mode support by default. 

With Chakra UI, you spend less time building responsive and beautiful websites. If you want to create a web application that allows users to switch between different color modes with minimal lines of code, then Chakra UI is an excellent choice.

- 👉 [Chakra UI](https://chakra-ui.com/) - official website  




--- 

[React Chakra Introduction](https://blog.appseed.us/chakra-ui-react-coding-landing-page/) - provided by AppSeed