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

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.