chakra-next-cli is a command-line tool that exports Chakra UI components to separate files and adds the top-level 'use client' directive, making them compatible with Next.js App Router.
npm install chakra-next-clichakra-next-cli 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.
- Exports individual Chakra UI components to separate files
- Automatically adds the "use client" directive for Next.js App Router compatibility
- Supports exporting entire component families (e.g., Menu, Modal, Tabs)
- Customizable output directory and file extension
- Sets up Chakra UI configuration and provider
- Supports both TypeScript and JavaScript projects
- Configures for both App Router and Pages Router
You can install chakra-next-cli globally using npm:
``bash`
npm install -g chakra-next-cli
Or, if you prefer to use it as a dev dependency in your project:
`bash`
npm install --save-dev chakra-next-cli
Basic usage:
`bash`
chakra-next-cli [component-names...]
Options:
- -o, --output
: Specify the output directory for components (default: "components/ui")
- -e, --extension : Specify the file extension (default: "tsx", options: "tsx" or "jsx")
- --init: Initialize Chakra UI setup without exporting componentsExamples:
`bash
Initialize Chakra UI setup
chakra-next-cli --initExport a single component
chakra-next-cli ButtonExport multiple components
chakra-next-cli Button Menu ModalSpecify output directory and file extension
chakra-next-cli Button -o src/components -e jsx
`If you run the command without specifying component names or with the
flag, you'll be guided through the Chakra UI setup process.$3
When initializing or running without arguments, the script will:
1. Prompt you about TypeScript usage
2. Ask if you're using the Next.js App Router
3. Create or update a theme file in
lib/theme.(ts|js)
4. Set up a Chakra provider in
5. For App Router users, update the layout file to include the providerAPI
$3
Exports a Chakra UI component to a separate file.
-
(string): Name of the component to export
- outputDir (string): Directory to output the component file
- fileExtension (string): File extension for the component file ("tsx" or "jsx")
$3
Creates a directory if it doesn't already exist.
-
dirPath (string): Path of the directory to create$3
Returns an array of related components for compound components.
-
componentName` (string): Name of the component to get the family forThis project is licensed under the MIT License - see the LICENSE file for details.
- Chakra UI for their excellent component library
- Commander.js for the command-line interface
If you encounter any issues or have questions, please file an issue on the GitHub repository.