Complete Theme Management

Overview

This lesson covers how to eject the entire Chakra UI theme into your project for full customization and better performance.

Ejecting gives you total control over your design and helps you reduce your app’s bundle size by removing unused components.

Key Takeaways

When you eject the theme, Chakra copies all configuration files (tokens, recipes, global styles, etc.) into your project — letting you edit, delete, or replace anything.

Eject the entire theme

Run the eject command to copy all theme files into your project.

npx @chakra-ui/cli eject --outdir ./src/theme

Your theme/index.ts file includes tokens, semantic tokens, recipes, and more, which you can fully edit.

Delete what you don’t use and remove unused component files (e.g., extra recipes) to shrink your build.