redocly-cli/docs/commands/eject.md

eject

Introduction

The eject command allows you to customize components by creating a local copy of their source code in your Redocly project. Use this feature when you need to modify a component's styles, structure, or behavior beyond what's possible through configuration.

Works with Redocly Revel, Reef, or Realm.

Usage

redocly eject component <component-path>
redocly eject component <component-path> [--force]
redocly eject component <component-path> [--project-dir=<path>]
redocly eject --help
redocly eject --version

Options

Option	Type	Description
component-path	string	Path to the component or a glob pattern for multiple components.
--force, -f	boolean	Skip the "overwrite existing" confirmation when ejecting a component that already exists in the destination.
--project-dir, -d	string	Path to the project directory. The default value is . (current directory).
--help	boolean	Show help.
--version	boolean	Show version number.

Examples

If no component is found when running the eject command, then it prints a list of ejectable components.

Eject a single component

Eject an individual component by passing its filepath. Components are ejected to the @theme folder in the root of your project.

The following command ejects the Filter component:

redocly eject component 'Filter/Filter.tsx'

When ejected, the filepath to the ejected component prints to terminal. In this example, the Filter component is ejected to @theme/components/Filter/Filter.tsx.

Eject multiple components

Eject multiple components using the ejection prompt, which is triggered by passing <folder-name>/** wrapped in single quotes.

The following command starts an ejection prompt for the Footer folder:

redocly eject component 'Footer/**'

Use the ejection prompt to select and eject any components inside the Footer folder.

Use ejection prompt

Use your keyboard to navigate the ejection prompt.

• Arrows move the cursor.
• Spacebar selects an item (file or folder).
• Enter ejects the selected items.

Selecting an item adds a check mark. Selecting a folder selects all its children items.

Eject all components

To eject all available components, pass the root folders and use the ejection prompt.

redocly eject component 'components/**'
redocly eject component 'icons/**'
redocly eject component 'layouts/**'
redocly eject component 'markdoc/**'

You may need to scroll using the arrow keys to see all the components inside a folder.

Skip ejection override confirmation

Use the --force option to skip the confirmation prompt when ejecting a component that already exists in the destination:

redocly eject component 'components/Menu/MenuContainer.tsx' --force

By including --force, this example ejects the MenuContainer component to @theme/components/Menu/MenuContainer.tsx and replaces any existing file at that location without a warning.

Specify a project folder

Use the --project-dir to provide a path to the project where you want to eject a component:

redocly eject component 'components/Search/SearchDialog.tsx' --project-dir='museum-docs'

The following example shows a project structure after the example command runs from the projects folder:

projects/
├── museum-docs/
│   ├── @theme/
│   │   └── components/
│   │       └── Search/
│   │           └── SearchDialog.tsx
│   ├── museum-api.json
│   ├── redocly.yaml
│   └── ...
├── storage-docs/
└── authentication-docs/

The --project-dir option is designed to help manage multiple projects by reducing the need for traversal.

Tips on using eject

• Use eject when your customization needs outgrow styling or configuration capabilities.

• A list of ejectable components is printed when no component is found by the eject command.

• Ejected components only override standard components when the new component is located in your @theme folder with a matching path and filename.

Resources

• Learn to eject components and unlock deeper project customization.
• See how component ejection is used to add a new color mode.