#Customize themes with wrap and eject

In simple terms: theme/index.tsx can re-export and replace built-in components. After that you have two paths—wrap (no source edits, pass props/slots) or eject (copy source, edit freely). See custom theme for more examples.

#theme/index.tsx: override built-ins via re-export

Rspress loads the theme from theme/index.tsx at the project root. You can use ESM re-export here to override default exports or same-name components; any internal usage will prefer your re-exported version:

import { Layout as BasicLayout } from '@rspress/core/theme-original';

const Layout = () => <BasicLayout beforeNavTitle={<div>some content</div>} />;

export { Layout };

export * from '@rspress/core/theme-original';

• Layout is the theme entry; Rspress auto-loads it. By exporting a same-name component you can wrap or replace the default.
• export * from '@rspress/core/theme-original' keeps other default exports available while your overrides take effect.
• This capability underpins all customization: you may simply wrap defaults or swap in your own implementations before re-exporting.

#Wrap: add props/slots on top of re-exports

Wrap means extending the re-exported components with extra props, e.g., using Layout slots:

• No source edits: just wrap in theme/index.tsx and pass props/slots to built-ins.
• Great for light tweaks: style nits, slot content, or swapping a few same-name components.

#Eject: copy source then edit directly

Eject uses the CLI rspress eject to copy @rspress/core/theme-original source into your project so you can edit it directly:

• Gives you source: rspress eject copies theme source locally so you can change internals.
• You maintain it: decoupled from upstream; you must sync updates yourself when upgrading.

#Recommendations

• Prefer Wrap: safer, easier to upgrade, covers most style/slot needs.
• Consider Eject: only when you must change internals that Wrap can’t cover.