{"ast":{"$$mdtype":"Tag","name":"article","attributes":{},"children":[{"$$mdtype":"Tag","name":"Heading","attributes":{"level":1,"id":"eject","__idx":0},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["eject"]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"introduction","__idx":1},"children":["Introduction"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["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."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Works with Redocly ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/revel"},"children":["Revel"]},", ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/reef"},"children":["Reef"]},", or ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/realm"},"children":["Realm"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"usage","__idx":2},"children":["Usage"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"redocly eject component <component-path>\nredocly eject component <component-path> [--force]\nredocly eject component <component-path> [--project-dir=<path>]\nredocly eject --help\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"options","__idx":3},"children":["Options"]},{"$$mdtype":"Tag","name":"div","attributes":{"className":"md-table-wrapper"},"children":[{"$$mdtype":"Tag","name":"table","attributes":{"className":"md"},"children":[{"$$mdtype":"Tag","name":"thead","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Option"},"children":["Option"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Type"},"children":["Type"]},{"$$mdtype":"Tag","name":"th","attributes":{"data-label":"Description"},"children":["Description"]}]}]},{"$$mdtype":"Tag","name":"tbody","attributes":{},"children":[{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["component-path"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Path to the component or a glob pattern for multiple components."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--force"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["-f"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Skip the \"overwrite existing\" confirmation when ejecting a component that already exists in the destination."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--project-dir"]},", ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["-d"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["string"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Path to the project directory. The default value is ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["."]}," (current directory)."]}]},{"$$mdtype":"Tag","name":"tr","attributes":{},"children":[{"$$mdtype":"Tag","name":"td","attributes":{},"children":[{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--help"]}]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["boolean"]},{"$$mdtype":"Tag","name":"td","attributes":{},"children":["Show help."]}]}]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"examples","__idx":4},"children":["Examples"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["If no component is found when running the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["eject"]}," command, then it prints a list of ejectable components."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"eject-a-single-component","__idx":5},"children":["Eject a single component"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Eject an individual component by passing its filepath."," ","Components are ejected to the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme"]}," folder in the root of your project."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following command ejects the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Filter"]}," component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"redocly eject component 'Filter/Filter.tsx'\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["When ejected, the filepath to the ejected component prints to terminal."," ","In this example, the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Filter"]}," component is ejected to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/components/Filter/Filter.tsx"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"eject-multiple-components","__idx":6},"children":["Eject multiple components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Eject multiple components using the ejection prompt, which is triggered by passing ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["<folder-name>/**"]}," wrapped in single quotes."]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following command starts an ejection prompt for the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Footer"]}," folder:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"redocly eject component 'Footer/**'\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ejection prompt to select and eject any components inside the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["Footer"]}," folder."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"use-ejection-prompt","__idx":7},"children":["Use ejection prompt"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use your keyboard to navigate the ejection prompt."]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Arrows move the cursor."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Spacebar selects an item (file or folder)."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Enter ejects the selected items."]}]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Selecting an item adds a check mark."," ","Selecting a folder selects all its children items."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":4,"id":"eject-all-components","__idx":8},"children":["Eject all components"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["To eject all available components, pass the root folders and use the ejection prompt."]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"redocly eject component 'components/**'\nredocly eject component 'icons/**'\nredocly eject component 'layouts/**'\nredocly eject component 'markdoc/**'\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["You may need to scroll using the arrow keys to see all the components inside a folder."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"skip-ejection-override-confirmation","__idx":9},"children":["Skip ejection override confirmation"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--force"]}," option to skip the confirmation prompt when ejecting a component that already exists in the destination:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"redocly eject component 'components/Menu/MenuContainer.tsx' --force\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["By including ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--force"]},", this example ejects the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["MenuContainer"]}," component to ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme/components/Menu/MenuContainer.tsx"]}," and replaces any existing file at that location ",{"$$mdtype":"Tag","name":"em","attributes":{},"children":["without a warning"]},"."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":3,"id":"specify-a-project-folder","__idx":10},"children":["Specify a project folder"]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--project-dir"]}," to provide a path to the project where you want to eject a component:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"bash","header":{"controls":{"copy":{}}},"source":"redocly eject component 'components/Search/SearchDialog.tsx' --project-dir='museum-docs'\n","lang":"bash"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The following example shows a project structure after the example command runs from the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["projects"]}," folder:"]},{"$$mdtype":"Tag","name":"CodeBlock","attributes":{"data-language":"treeview","header":{"controls":{"copy":{}}},"source":"projects/\n├── museum-docs/\n│   ├── @theme/\n│   │   └── components/\n│   │       └── Search/\n│   │           └── SearchDialog.tsx\n│   ├── museum-api.json\n│   ├── redocly.yaml\n│   └── ...\n├── storage-docs/\n└── authentication-docs/\n","lang":"treeview"},"children":[]},{"$$mdtype":"Tag","name":"p","attributes":{},"children":["The ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["--project-dir"]}," option is designed to help manage multiple projects by reducing the need for traversal."]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"tips-on-using-eject","__idx":11},"children":["Tips on using ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["eject"]}]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Use ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["eject"]}," when your customization needs outgrow ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/docs/realm/branding/customize-styles"},"children":["styling"]}," or ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/docs/realm/config"},"children":["configuration"]}," capabilities."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["A list of ejectable components is printed when no component is found by the ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["eject"]}," command."]}]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":[{"$$mdtype":"Tag","name":"p","attributes":{},"children":["Ejected components only ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/docs/realm/extend/how-to/eject-components#override-core-components"},"children":["override standard components"]}," when the new component is located in your ",{"$$mdtype":"Tag","name":"code","attributes":{},"children":["@theme"]}," folder with a matching path and filename."]}]}]},{"$$mdtype":"Tag","name":"Heading","attributes":{"level":2,"id":"resources","__idx":12},"children":["Resources"]},{"$$mdtype":"Tag","name":"ul","attributes":{},"children":[{"$$mdtype":"Tag","name":"li","attributes":{},"children":["Learn to ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/docs/realm/extend/how-to/eject-components"},"children":["eject components"]}," and unlock deeper project customization."]},{"$$mdtype":"Tag","name":"li","attributes":{},"children":["See how component ejection is used to ",{"$$mdtype":"Tag","name":"Link","attributes":{"href":"https://redocly.com/docs/realm/extend/how-to/add-color-mode"},"children":["add a new color mode"]},"."]}]}]},"frontmatter":{},"tagList":[],"title":"eject","lastModified":"2026-10-07T06:18:11.000Z"}