{"id":24909980,"url":"https://github.com/singh1aryan/react-chakra-guide","last_synced_at":"2026-02-18T08:33:15.935Z","repository":{"id":74883599,"uuid":"574777579","full_name":"singh1aryan/react-chakra-guide","owner":"singh1aryan","description":"Learn about React and Chakra UI to quickly build your applications. ","archived":false,"fork":false,"pushed_at":"2022-12-06T03:38:07.000Z","size":4,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-28T01:57:08.168Z","etag":null,"topics":["chakra","chakra-react","chakra-ui","frontend","react","react-chakra"],"latest_commit_sha":null,"homepage":"","language":null,"has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/singh1aryan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-12-06T03:37:47.000Z","updated_at":"2023-09-10T16:11:29.000Z","dependencies_parsed_at":null,"dependency_job_id":"de687a2e-17fc-4249-902c-1b3ee59a1c19","html_url":"https://github.com/singh1aryan/react-chakra-guide","commit_stats":null,"previous_names":["singh1aryan/react-chakra-guide"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singh1aryan%2Freact-chakra-guide","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singh1aryan%2Freact-chakra-guide/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singh1aryan%2Freact-chakra-guide/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/singh1aryan%2Freact-chakra-guide/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/singh1aryan","download_url":"https://codeload.github.com/singh1aryan/react-chakra-guide/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248885300,"owners_count":21177616,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chakra","chakra-react","chakra-ui","frontend","react","react-chakra"],"created_at":"2025-02-02T03:33:50.673Z","updated_at":"2026-02-18T08:33:15.928Z","avatar_url":"https://github.com/singh1aryan.png","language":null,"funding_links":[],"categories":[],"sub_categories":[],"readme":"## Introduction\n\nChakra UI is a React component library that helps you build accessible, composable, and customizable user interfaces. It is built on top of the popular design system, Chakra, and uses Emotion for styling.\n\nTo use Chakra UI in a React project, you need to first install it from npm:\n\n```bash\nnpm install @chakra-ui/core\n```\n\nOnce installed, you can import and use the Chakra UI components in your React components:\n\n```jsx\nimport { Button } from \"@chakra-ui/core\"\n\nfunction MyButton() {\n  return \u003cButton\u003eClick me!\u003c/Button\u003e\n}\n```\n\nChakra UI provides a wide range of pre-built components that you can use to build your user interface, such as buttons, form inputs, layout containers, and more. It also provides various utility functions and hooks to help you manage styles, colors, and other aspects of your UI.\n\nChakra UI follows the principles of accessibility, composability, and customization. This means that all of its components are built with accessibility in mind, they can be easily composed and nested to build complex UIs, and they can be customized using props and theme values to match your app's design.\n\nOverall, Chakra UI is a powerful and flexible tool for building user interfaces with React. It is well-documented and actively maintained, making it a great choice for developers who want to quickly and easily build accessible and customizable UIs.\n\n## Simple form website\n\nHere is a bigger example that shows how to use some of the core components from Chakra UI to build a simple login form:\n\n```jsx\nimport React from \"react\"\nimport {\n  Box,\n  FormControl,\n  FormLabel,\n  Input,\n  Button,\n  Flex,\n  Text,\n} from \"@chakra-ui/core\"\n\nfunction LoginForm() {\n  return (\n    \u003cBox p={4} w=\"300px\"\u003e\n      \u003cFormControl\u003e\n        \u003cFormLabel htmlFor=\"email\"\u003eEmail\u003c/FormLabel\u003e\n        \u003cInput type=\"email\" id=\"email\" placeholder=\"Enter your email\" /\u003e\n      \u003c/FormControl\u003e\n      \u003cFormControl mt={4}\u003e\n        \u003cFormLabel htmlFor=\"password\"\u003ePassword\u003c/FormLabel\u003e\n        \u003cInput type=\"password\" id=\"password\" placeholder=\"Enter your password\" /\u003e\n      \u003c/FormControl\u003e\n      \u003cFlex mt={4} justifyContent=\"space-between\"\u003e\n        \u003cButton variantColor=\"teal\" type=\"submit\"\u003e\n          Login\n        \u003c/Button\u003e\n        \u003cText fontSize=\"sm\"\u003eForgot password?\u003c/Text\u003e\n      \u003c/Flex\u003e\n    \u003c/Box\u003e\n  )\n}\n```\n\nIn this example, we have used the **`Box`** component from Chakra UI to create a container for the form. Inside the container, we have used the **`FormControl`**, **`FormLabel`**, and **`Input`** components to create a form with two input fields for the email and password.\n\nWe have also used the **`Button`** and **`Flex`** components to create a login button and a \"Forgot password?\" link at the bottom of the form. Finally, we have used the **`Text`** component to style the link text.\n\nOverall, this example shows how Chakra UI's components can be easily combined to create a simple, but functional login form.\n\n## Simple portfolio website\n\nHere is an example of how you can use Chakra UI and React to create a simple portfolio website:\n\n```jsx\nimport React from \"react\"\nimport {\n  Box,\n  Flex,\n  Text,\n  Image,\n  Heading,\n  Link,\n  Stack,\n  Divider,\n} from \"@chakra-ui/core\"\n\nfunction Portfolio() {\n  return (\n    \u003cBox\u003e\n      \u003cFlex alignItems=\"center\" justifyContent=\"center\" mt={4}\u003e\n        \u003cImage\n          src=\"https://via.placeholder.com/150\"\n          alt=\"Your profile image\"\n          rounded=\"full\"\n        /\u003e\n      \u003c/Flex\u003e\n      \u003cHeading mt={4} textAlign=\"center\" fontSize=\"2xl\"\u003e\n        Your Name\n      \u003c/Heading\u003e\n      \u003cText mt={2} textAlign=\"center\" fontSize=\"lg\"\u003e\n        Job Title\n      \u003c/Text\u003e\n      \u003cText mt={2} textAlign=\"center\" fontSize=\"md\"\u003e\n        Company Name\n      \u003c/Text\u003e\n      \u003cDivider my={8} /\u003e\n      \u003cHeading as=\"h2\" mt={4} fontSize=\"xl\"\u003e\n        About Me\n      \u003c/Heading\u003e\n      \u003cText mt={2} fontSize=\"md\"\u003e\n        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod\n        tempor incididunt ut labore et dolore magna aliqua.\n      \u003c/Text\u003e\n      \u003cDivider my={8} /\u003e\n      \u003cHeading as=\"h2\" mt={4} fontSize=\"xl\"\u003e\n        Projects\n      \u003c/Heading\u003e\n      \u003cStack mt={4} spacing={4}\u003e\n        \u003cFlex alignItems=\"center\"\u003e\n          \u003cImage src=\"https://via.placeholder.com/150\" alt=\"Project image\" /\u003e\n          \u003cLink ml={4} fontSize=\"md\" href=\"#\"\u003e\n            Project 1\n          \u003c/Link\u003e\n        \u003c/Flex\u003e\n        \u003cFlex alignItems=\"center\"\u003e\n          \u003cImage src=\"https://via.placeholder.com/150\" alt=\"Project image\" /\u003e\n          \u003cLink ml={4} fontSize=\"md\" href=\"#\"\u003e\n            Project 2\n          \u003c/Link\u003e\n        \u003c/Flex\u003e\n        \u003cFlex alignItems=\"center\"\u003e\n          \u003cImage src=\"https://via.placeholder.com/150\" alt=\"Project image\" /\u003e\n          \u003cLink ml={4} fontSize=\"md\" href=\"#\"\u003e\n            Project 3\n          \u003c/Link\u003e\n        \u003c/Flex\u003e\n      \u003c/Stack\u003e\n    \u003c/Box\u003e\n  )\n}\n```\n\nIn this example, we have used the **`Box`**, **`Flex`**, **`Text`**, **`Image`**, **`Heading`**, **`Link`**, **`Stack`**, and **`Divider`** components from Chakra UI to create a simple portfolio website.\n\nThe website has a header with the user's profile image, name, job title, and company name. It also has an \"About Me\" section where the user can write a brief description of themselves, and a \"Projects\" section where they can list their projects with images and links.\n\nOverall, this example shows how Chakra UI's components can be used to create a clean and simple portfolio website with React.\n\n## Simple Gallery app\n\n1. Install the necessary dependencies, including React, Chakra UI, and any other libraries you might need.\n2. Create a new React project using **`create-react-app`** or another tool of your choice.\n3. Set up the Chakra UI theme and provider in your **`App.js`** file, so that the Chakra components can be used throughout your application.\n4. Create a new component to display the photo gallery, and import the necessary Chakra UI components, such as **`Box`**, **`Image`**, and **`Stack`**.\n5. Use the Chakra UI components to create a grid layout for the photos, and load the photos from an array of image URLs or from a remote API.\n6. Add functionality to allow the user to view a full-size version of the photos by clicking on them, or by using a modal or lightbox component.\n7. Add other features, such as filtering or sorting options, to allow the user to customize the photo gallery.\n8. Test the app to make sure it works as expected, and make any necessary adjustments.\n9. Deploy the app to a hosting service, such as Heroku or Netlify, so that others can access it.\n\nOverall, creating a photo gallery app with Chakra UI and React will require some knowledge of React, Chakra UI, and CSS, as well as a basic understanding of web development concepts and tools. However, with the right resources and guidance, it can be a fun and rewarding project that showcases your skills and creativity.\n\nHere is an example of how you could create a simple photo gallery app with Chakra UI and React:\n\n```jsx\nimport React from 'react';\nimport { Box, Image, Stack } from '@chakra-ui/core';\n\n// Create the PhotoGallery component\nconst PhotoGallery = () =\u003e {\n  // Define an array of image URLs\n  const images = [\n    'https://picsum.photos/id/1/300/300',\n    'https://picsum.photos/id/2/300/300',\n    'https://picsum.photos/id/3/300/300',\n    'https://picsum.photos/id/4/300/300',\n    'https://picsum.photos/id/5/300/300',\n  ];\n\n  // Use the Chakra UI Stack component to create a grid layout for the photos\n  return (\n    \u003cStack spacing={4}\u003e\n      {images.map((image, index) =\u003e (\n        \u003cBox key={index}\u003e\n          \u003cImage src={image} /\u003e\n        \u003c/Box\u003e\n      ))}\n    \u003c/Stack\u003e\n  );\n};\n\nexport default PhotoGallery;\n```\n\nIn this example, the **`PhotoGallery`** component creates a grid layout for the photos using the **`Stack`** component from Chakra UI. The photos are loaded from an array of image URLs, and each photo is displayed using the **`Box`** and **`Image`** components from Chakra UI. You can customize the layout and functionality of the photo gallery by using different Chakra UI components and adding additional features, such as filtering or sorting options.\n\n## Simple TODO list\n\nHere is an example of how you could create a simple todo website with Chakra UI and React:\n\n```jsx\nimport React, { useState } from 'react';\nimport {\n  Box,\n  Button,\n  Flex,\n  FormControl,\n  FormLabel,\n  Input,\n  Stack,\n  Text,\n} from '@chakra-ui/core';\n\n// Create the TodoList component\nconst TodoList = () =\u003e {\n  // Use React's useState hook to manage the list of todos\n  const [todos, setTodos] = useState([]);\n\n  // Define a function to add a new todo to the list\n  const addTodo = (todo) =\u003e {\n    setTodos([...todos, todo]);\n  };\n\n  // Define a function to remove a todo from the list\n  const removeTodo = (index) =\u003e {\n    setTodos(todos.filter((_, i) =\u003e i !== index));\n  };\n\n  return (\n    \u003cBox\u003e\n      {/* Use the Chakra UI Flex component to create a form for adding new todos */}\n      \u003cFlex mt={4} align=\"center\"\u003e\n        \u003cFormControl\u003e\n          \u003cFormLabel htmlFor=\"new-todo\"\u003eNew Todo\u003c/FormLabel\u003e\n          \u003cInput\n            id=\"new-todo\"\n            placeholder=\"Enter a new todo\"\n            onKeyPress={(event) =\u003e {\n              if (event.key === 'Enter') {\n                addTodo(event.target.value);\n                event.target.value = '';\n              }\n            }}\n          /\u003e\n        \u003c/FormControl\u003e\n      \u003c/Flex\u003e\n\n      {/* Use the Chakra UI Stack component to create a list of todos */}\n      \u003cStack mt={4} spacing={4}\u003e\n        {todos.map((todo, index) =\u003e (\n          \u003cBox key={index}\u003e\n            \u003cText\u003e{todo}\u003c/Text\u003e\n            \u003cButton onClick={() =\u003e removeTodo(index)}\u003eRemove\u003c/Button\u003e\n          \u003c/Box\u003e\n        ))}\n      \u003c/Stack\u003e\n    \u003c/Box\u003e\n  );\n};\n\nexport default TodoList;\n```\n\nIn this example, the **`TodoList`** component uses the **`useState`** hook to manage the list of todos. The component includes a form for adding new todos, which adds the new todo to the list when the user presses the **`Enter`** key. The component also includes a list of todos, which displays each todo in the list and includes a button for removing the todo. You can customize the layout and functionality of the todo list by using different Chakra UI components and adding additional features, such as sorting or filtering options.\n\n## Simple traveling app\n\n```jsx\nimport { Input, InputGroup, InputLeftAddon } from '@chakra-ui/react';\nimport { Center, Square, Circle } from '@chakra-ui/react'\nimport { Flex, Spacer } from '@chakra-ui/react'\nimport { Text } from '@chakra-ui/react'\nimport { Select } from '@chakra-ui/react'\nimport { Button, ButtonGroup, Stack } from '@chakra-ui/react'\nimport { useState, useEffect } from \"react\"\nimport { FormControl, FormLabel } from \"@chakra-ui/react\"\n\nimport { AirbnbCard } from './card'\n\nfunction HomePage() {\n    const [places, setPlaces] = useState([]);\n    const [selectedState, setSelectedState] = useState('');\n    const [numDays, setNumDays] = useState(0);\n\n    const handleSubmit = () =\u003e {\n        // Fetch places based on selected state and number of days\n        try {\n            fetch(`https://some-place-api.com/places?state=${selectedState}\u0026days=${numDays}`)\n                .then(response =\u003e response.json())\n                .then(data =\u003e setPlaces(data));\n        } catch (error) {\n            console.log(error)\n        }\n    }\n\n    return (\u003cdiv\u003e\n        \u003cStack\u003e\n            {/* Input for selecting state */}\n            \u003cinput\n                type=\"text\"\n                placeholder=\"Enter a state\"\n                value={selectedState}\n                onChange={e =\u003e setSelectedState(e.target.value)}\n            /\u003e\n\n            {/* Input for selecting number of days */}\n            \u003cinput\n                type=\"number\"\n                placeholder=\"Enter number of days\"\n                value={numDays}\n                onChange={e =\u003e setNumDays(e.target.value)}\n            /\u003e\n\n            {/* Button to submit form and fetch places */}\n            \u003cButton onClick={handleSubmit}\u003e\n                Submit\n            \u003c/Button\u003e\n\n            {/* List of places */}\n            \u003cul\u003e\n                {places.map(place =\u003e (\n                    \u003cli key={place.id}\u003e{place.name}\u003c/li\u003e\n                ))}\n            \u003c/ul\u003e\n        \u003c/Stack\u003e\n\n    \u003c/div\u003e)\n}\n\nexport default HomePage\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingh1aryan%2Freact-chakra-guide","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsingh1aryan%2Freact-chakra-guide","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsingh1aryan%2Freact-chakra-guide/lists"}