{"id":15489360,"url":"https://github.com/mvr-studio/chakra-stories","last_synced_at":"2026-05-04T23:39:36.315Z","repository":{"id":57683146,"uuid":"477474909","full_name":"mvr-studio/chakra-stories","owner":"mvr-studio","description":null,"archived":false,"fork":false,"pushed_at":"2022-04-05T21:03:07.000Z","size":4675,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-03-18T03:47:06.712Z","etag":null,"topics":["chakra","chakra-ui","component","framer-motion","react","stories"],"latest_commit_sha":null,"homepage":"https://chakra-stories.netlify.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mvr-studio.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2022-04-03T21:53:00.000Z","updated_at":"2022-04-04T10:53:42.000Z","dependencies_parsed_at":"2022-09-15T11:13:51.261Z","dependency_job_id":null,"html_url":"https://github.com/mvr-studio/chakra-stories","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvr-studio%2Fchakra-stories","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvr-studio%2Fchakra-stories/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvr-studio%2Fchakra-stories/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mvr-studio%2Fchakra-stories/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mvr-studio","download_url":"https://codeload.github.com/mvr-studio/chakra-stories/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246059336,"owners_count":20717085,"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-ui","component","framer-motion","react","stories"],"created_at":"2024-10-02T07:05:10.168Z","updated_at":"2026-05-04T23:39:31.295Z","avatar_url":"https://github.com/mvr-studio.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Chakra UI Stories\n\nProgrammatic Stories component for Chakra UI.\n\n## Installation\n\n```sh\n$ yarn add @mvr-studio/chakra-stories\n```\n\n## Components\n\n### Stories\n\n`Stories` is the bare bone component of this library which renders indicators, content and additional data.\n\n#### Usage\n\n```tsx\nimport { Box } from '@chakra-ui/react'\nimport { Stories } from '@mvr-studio/chakra-stories'\n\nconst View = () =\u003e {\n  return (\n    \u003cStories\u003e\n      \u003cBox\u003eFirst\u003c/Box\u003e\n      \u003cBox\u003eSecond\u003c/Box\u003e\n      \u003cBox\u003eThird\u003c/Box\u003e\n    \u003c/Stories\u003e\n  )\n}\n```\n\n#### API\n\n- children: `ReactNode[]`\n- storyDuration?: `number` - Duration of each story in seconds.\n- onStoriesCompleted?: `() =\u003e void` - Callback to fire when the last story finishes.\n- indicator?:\n  - activeColor?: `string` - Animated indicator active color.\n  - inactiveColor?: `string` - Inactive indicator color.\n- components?:\n  - renderTopBar?: `({ currentStory, storiesCount }) =\u003e JSX.Element` - Function to render Top Bar with additional data.\n  - renderBottomBar?: `({ currentStory, storiesCount }) =\u003e JSX.Element` - Function to render Bottom Bar with additional data.\n\n### ModalStories\n\n`ModalStories` is an extended version of `Stories`, which wraps `Stories` component into a Modal. It extends props of `Stories`, so you can use all the properties of `Stories` plus some more.\n\n#### Usage\n\n```tsx\nimport { useDisclosure, Box, Button } from '@chakra-ui/react'\nimport { ModalStories } from '@mvr-studio/chakra-stories'\n\nconst View = () =\u003e {\n  const { isOpen, onOpen, onClose } = useDislcosure()\n\n  return (\n    \u003cBox\u003e\n      \u003cButton onClick={onOpen}\u003eOpen Stories\u003c/Button\u003e\n      \u003cModalStories isOpen={isOpen} onClose={onClose}\u003e\n        \u003cBox\u003eFirst\u003c/Box\u003e\n        \u003cBox\u003eSecond\u003c/Box\u003e\n        \u003cBox\u003eThird\u003c/Box\u003e\n      \u003c/ModalStories\u003e\n    \u003c/Box\u003e\n  )\n}\n```\n\n#### API\n\n- All the properties of `Stories`\n- isOpen: `boolean`\n- onClose: `() =\u003e void`\n- modalContentProps?: `ModalContentProps` - Accepts similar props to box. Refer to Chakra UI docs.\n- onDragUp: `({ currentStory, storiesCount }) =\u003e void` - Callback for handling user's drag up gesture.\n\n## External links\n\n[Storybook](https://chakra-stories.netlify.app/)\n\n[MVR Studio](https://mvr.studio/)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvr-studio%2Fchakra-stories","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmvr-studio%2Fchakra-stories","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmvr-studio%2Fchakra-stories/lists"}