{"id":28064231,"url":"https://github.com/naz3eh/chakra-ui-carousel","last_synced_at":"2025-05-12T13:23:02.896Z","repository":{"id":42010734,"uuid":"460465430","full_name":"naz3eh/Chakra-UI-Carousel","owner":"naz3eh","description":null,"archived":false,"fork":false,"pushed_at":"2023-08-13T22:18:14.000Z","size":7462,"stargazers_count":26,"open_issues_count":3,"forks_count":7,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-15T09:50:42.668Z","etag":null,"topics":["carousel-component","chakra-ui-react"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/chakra-ui-carousel","language":"TypeScript","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/naz3eh.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-02-17T14:17:08.000Z","updated_at":"2024-11-13T17:40:36.000Z","dependencies_parsed_at":"2024-06-21T13:10:49.608Z","dependency_job_id":"7d13dea6-6a57-483f-a2db-7b530664eee6","html_url":"https://github.com/naz3eh/Chakra-UI-Carousel","commit_stats":null,"previous_names":["naz3eh/chakra-ui-carousel","nazeeh21/chakra-ui-carousel"],"tags_count":2,"template":false,"template_full_name":"Dhaiwat10/react-library-starter","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naz3eh%2FChakra-UI-Carousel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naz3eh%2FChakra-UI-Carousel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naz3eh%2FChakra-UI-Carousel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/naz3eh%2FChakra-UI-Carousel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/naz3eh","download_url":"https://codeload.github.com/naz3eh/Chakra-UI-Carousel/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":253745363,"owners_count":21957357,"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":["carousel-component","chakra-ui-react"],"created_at":"2025-05-12T13:23:02.131Z","updated_at":"2025-05-12T13:23:02.890Z","avatar_url":"https://github.com/naz3eh.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chakra UI Carousel\n\n\u003c!-- This is a carousel library built using Chakra UI and customizable using Chakra props. --\u003e\n\nThis is a Carousel library built using Chakra UI. You can pass all the chakra props to the Carousel buttons as well as you can place it wherver you want inside the `\u003cProvider\u003e` wrapper.\n\nYou can view the demo live [here](https://carousel-example.vercel.app/)\n\n## Installation\n\n```shell\n$ yarn add @chakra-ui/react @emotion/react @emotion/styled @chakra-ui/icons framer-motion chakra-ui-carousel\n\n# or\n\n$ npm i @chakra-ui/react @emotion/react @emotion/styled @chakra-ui/icons framer-motion chakra-ui-carousel\n```\n\n## Prerequisites\n\nAfter installing above libraries, you need to set up the ChakraProvider at the root of your application. This can be either in your `index.jsx`, `index.tsx` or `App.jsx` depending on the framework you use.\n\n```jsx\nimport * as React from \"react\";\n\n// 1. import `ChakraProvider` component\nimport { ChakraProvider } from \"@chakra-ui/react\";\n\nfunction App() {\n  // 2. Wrap ChakraProvider at the root of your app\n  return (\n    \u003cChakraProvider\u003e\n      \u003cTheRestOfYourApplication /\u003e\n    \u003c/ChakraProvider\u003e\n  );\n}\n```\n\n## Usage\n\nTo use the Carousel, please follow the steps below:\n\n1. Wrap your carousel content with the `\u003cProvider\u003e` component.\n\n```tsx\nimport { Provider } from \"chakra-ui-carousel\";\n\nfunction Example() {\n  return (\n    \u003cBox\u003e\n      \u003cProvider\u003e// Carousel content\u003c/Provider\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n\n2. Move your Carousel contents to the `Carousel` component imported from `chakra-ui-carousel` library. You need to pass the gap between the slides as a prop.\n\n```tsx\nimport { Carousel } from \"chakra-ui-carousel\";\n\nfunction Example() {\n  return (\n    \u003cBox\u003e\n      \u003cProvider\u003e\n        \u003cCarousel gap={50}\u003e// Carousel content\u003c/Carousel\u003e\n      \u003c/Provider\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n\n3. Add `LeftButton` and `RightButton` components to your Carousel to control the current element on the Carousel. You can display these buttons anywhere around your carousel, just make sure that these buttons should be in the `Provider` Wrapper.\n   You can also pass `gap` as a props to the `Carousel` component to control the gap between the individual elements.\n\n```tsx\nimport { LeftButton, RightButton } from \"chakra-ui-carousel\";\n\nfunction Example() {\n  return (\n    \u003cBox\u003e\n      \u003cProvider\u003e\n        \u003cCarousel gap={50}\u003e// Carousel content\u003c/Carousel\u003e\n        \u003cLeftButton /\u003e\n        \u003cRightButton /\u003e\n      \u003c/Provider\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n\n4. You can also pass all the props that are available in the `Button` component of Chakra UI to the `LeftButton` and `RightButton` component.\n\n```tsx\nimport { LeftButton, RightButton } from \"chakra-ui-carousel\";\n\nfunction Example() {\n  return (\n    \u003cBox\u003e\n      \u003cProvider\u003e\n        \u003cCarousel gap={50}\u003e// Carousel content\u003c/Carousel\u003e\n        \u003cLeftButton bgColor=\"red.500\" textColor=\"white\" /\u003e\n        \u003cRightButton bgColor=\"blue.500\" /\u003e\n      \u003c/Provider\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n\n5. You can pass custom button components to the `LeftButton` and `RightButton` component.\n\n```tsx\nimport { LeftButton, RightButton } from \"chakra-ui-carousel\";\n\nfunction Example() {\n  return (\n    \u003cBox\u003e\n      \u003cProvider\u003e\n        \u003cCarousel gap={50}\u003e// Carousel content\u003c/Carousel\u003e\n        \u003cLeftButton\n          bgColor=\"red.500\"\n          customIcon={\u003cArrowLeftIcon /\u003e}\n          textColor={\"white.500\"}\n        /\u003e\n        \u003cRightButton bgColor=\"blue.500\" customIcon={\u003cArrowRightIcon /\u003e} /\u003e\n      \u003c/Provider\u003e\n    \u003c/Box\u003e\n  );\n}\n```\n\n### Note: If you find any issues, please open an issue on [here](https://github.com/Nazeeh21/Chakra-UI-Carousel/). Or if you want to propose a feature, feel free to open a PR.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaz3eh%2Fchakra-ui-carousel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnaz3eh%2Fchakra-ui-carousel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnaz3eh%2Fchakra-ui-carousel/lists"}