Chakra UI shared theme in Nx – styles breaking in UI library components

[siby-mathew]

Hi everyone,

I'm working on a monorepo using Nx with Chakra UI. I’ve set up a shared library to hold my custom theme, and I’m importing it into my apps and component libraries.

Here’s the setup:

I have a shared theme in libs/theme that exports a custom Chakra theme using extendTheme.

The apps (e.g. apps/my-app) wrap the root with ChakraProvider and import the theme from @myorg/theme.

I also have a UI library (libs/ui) that contains shared Chakra-based components (like buttons, cards, etc.).

The problem:
When I use components from libs/ui inside my app, the styles don't apply correctly — the components look unstyled or broken when I build. However, Chakra works fine directly in the app if I define components there.