Eject components

The eject component command unlocks powerful component customization, allowing you to tailor components to specific project needs.

Ejecting a component creates a local copy of its source code in your project, where you can modify the component's styles, structure, or behavior.

This guide provides instructions on how to eject and override components from Realm, Revel, or Reef.

Eject command options

The eject component command supports the following options:

• Passing a filepath to a component or filepath with glob pattern. For example:

  • npx @redocly/cli eject component 'Filter/Filter.tsx'
  • npx @redocly/cli eject component 'Footer/**'

• The -f or --force option skips the "overwrite existing" confirmation when ejecting a component that is already ejected in the destination. For example:

  • npx @redocly/cli eject component 'Filter/Filter.tsx' --force

• The -d or --project-dir option provides a destination folder to eject components into. For example:

  • npx @redocly/cli eject component 'Filter/Filter.tsx' --project-dir docs-components would eject the file to docs-components/@theme/components/Filter/Filter.tsx

Trigger component selection prompt

You can use a terminal prompt to select components to eject. Use a folder name followed by "/**" to trigger the selection prompt for top-level folders, such as icons, markdoc, or components.

The following command triggers the selection prompt for the components folder:

npx @redocly/cli eject component 'components/**'

The following command triggers the selection prompt for all components inside Footer:

npx @redocly/cli eject component 'Footer/**'

Override core components

After ejection, customized components "override" the standard components used to render pages when two criteria are met:

• The new component's function name and filename matches the ejected component.
• The new component is located inside your project's @theme folder and has a matching filepath as the ejected component.

The following example shows the file structure for a project that ejected and customized the ColorModeSwitcher component:

your-awesome-project
├── @theme
│   ├── components
│   │   └── ColorModeSwitcher
│   │       └── ColorModeSwitcher.tsx
│   └── ...
├── guides
├── redocly.yaml
└── ...

Resources

• Style your ejected component using CSS variables.
• Learn to use theme static assets in your ejected component.