{"id":50288623,"url":"https://github.com/codewithveek/chakra-next","last_synced_at":"2026-05-28T04:04:17.132Z","repository":{"id":250389668,"uuid":"834318912","full_name":"codewithveek/chakra-next","owner":"codewithveek","description":null,"archived":false,"fork":false,"pushed_at":"2024-08-13T02:05:51.000Z","size":16,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-02-04T14:37:15.056Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/codewithveek.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,"zenodo":null}},"created_at":"2024-07-26T23:45:35.000Z","updated_at":"2024-08-13T02:05:54.000Z","dependencies_parsed_at":"2025-08-21T19:58:29.945Z","dependency_job_id":"c66e4b16-5b93-435f-b590-fcb0087124cc","html_url":"https://github.com/codewithveek/chakra-next","commit_stats":null,"previous_names":["lucky-victory/chakra-next","darkcodewrangler/chakra-next","codewithveek/chakra-next"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/codewithveek/chakra-next","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithveek%2Fchakra-next","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithveek%2Fchakra-next/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithveek%2Fchakra-next/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithveek%2Fchakra-next/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/codewithveek","download_url":"https://codeload.github.com/codewithveek/chakra-next/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/codewithveek%2Fchakra-next/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":33593420,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-05-28T02:00:06.440Z","response_time":99,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2026-05-28T04:04:10.986Z","updated_at":"2026-05-28T04:04:17.127Z","avatar_url":"https://github.com/codewithveek.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# chakra-next\n\n`chakra-next` is a command-line tool that exports Chakra UI components to separate files, sets up Chakra UI configuration, and ensures compatibility with App Router. This tool streamlines the process of organizing and preparing Chakra UI components for use in Next.js projects.\n\n## Features\n\n- Exports individual Chakra UI components to separate files\n- Automatically adds the \"use client\" directive for Next.js App Router compatibility\n- Supports exporting entire component families (e.g., Menu, Modal, Tabs)\n- Customizable output directory and file extension\n- Sets up Chakra UI configuration and provider\n- Supports both TypeScript and JavaScript projects\n- Configures for both App Router and Pages Router\n\n## Installation\n\nYou can install `chakra-next` globally using npm:\n\n```bash\nnpm install -g chakra-next\n```\n\nOr, if you prefer to use it as a dev dependency in your project:\n\n```bash\nnpm install --save-dev chakra-next\n```\n\n## Usage\n\n### Command Line Interface\n\nBasic usage:\n\n```bash\nchakra-next [component-names...]\n```\n\nOptions:\n\n- `-o, --output \u003cdir\u003e`: Specify the output directory for components (default: \"components/ui\")\n- `-e, --extension \u003cext\u003e`: Specify the file extension (default: \"tsx\", options: \"tsx\" or \"jsx\")\n- `--init`: Initialize Chakra UI setup without exporting components\n\nExamples:\n\n```bash\n# Initialize Chakra UI setup\nchakra-next --init\n\n# Export a single component\nchakra-next Button\n\n# Export multiple components\nchakra-next Button Menu Modal\n\n# Specify output directory and file extension\nchakra-next Button -o src/components -e jsx\n```\n\nIf you run the command without specifying component names or with the `--init` flag, you'll be guided through the Chakra UI setup process.\n\n### Setup Process\n\nWhen initializing or running without arguments, the script will:\n\n1. Prompt you about TypeScript usage\n2. Ask if you're using the Next.js App Router\n3. Create or update a theme file in `lib/theme.(ts|js)`\n4. Set up a Chakra provider in `providers/chakra-provider.(tsx|jsx)`\n5. For App Router users, update the layout file to include the provider\n\n## API\n\n### `exportComponent(componentName, outputDir, fileExtension)`\n\nExports a Chakra UI component to a separate file.\n\n- `componentName` (string): Name of the component to export\n- `outputDir` (string): Directory to output the component file\n- `fileExtension` (string): File extension for the component file (\"tsx\" or \"jsx\")\n\n\n### `createDirectoryIfNotExists(dirPath)`\n\nCreates a directory if it doesn't already exist.\n\n- `dirPath` (string): Path of the directory to create\n\n### `getComponentFamily(componentName)`\n\nReturns an array of related components for compound components.\n\n- `componentName` (string): Name of the component to get the family for\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.\n\n## Acknowledgements\n\n- [Chakra UI](https://chakra-ui.com/) for their excellent component library\n- [Commander.js](https://github.com/tj/commander.js/) for the command-line interface\n\n## Support\n\nIf you encounter any issues or have questions, please file an issue on the [GitHub repository](https://github.com/your-username/chakra-next/issues).","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithveek%2Fchakra-next","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodewithveek%2Fchakra-next","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodewithveek%2Fchakra-next/lists"}