Can't customize ThemedSider width via token or props

[Bekforever]

Problem

Currently, there is no way to customize the width of the <ThemedSiderV2 /> component in Refine. It does not expose a width prop nor does it pick up the siderWidth value from the Ant Design theme token (components.Layout.siderWidth).

What I tried

• Passing width via props — not accepted
• Overriding styles via style — not supported, since style prop is not passed
• Setting components.Layout.siderWidth in <ConfigProvider> — has no effect

Why it matters

Refine aims to be flexible and customizable, but currently it's impossible to adjust the sidebar width unless I eject the entire layout with npx refine generate layout. This is not ideal for small customizations.

Suggested solution

• Expose a width or style prop in <ThemedSiderV2 />
• Or make <ThemedSiderV2 /> respect the siderWidth from Ant Design's theme tokens (components.Layout.siderWidth)

Workaround

The only workaround is to eject layout via CLI:

npm run refine swizzle

[alicanerdurmaz]

Hello @Bekforever, Thanks for the issue.

Your suggestions sound great! Do you want to work on this?

[Bekforever]

Hi! 👋

Thanks for getting back.
Yes, I’d be happy to work on this and submit a PR to address the issue.

Let me know if you have any preferences on the implementation direction — whether it’s exposing a width prop directly or making the component respect the components.Layout.siderWidth token from Ant Design. I can move forward accordingly.

Looking forward to your feedback!

[alicanerdurmaz]

Hi! 👋

Thanks for getting back. Yes, I’d be happy to work on this and submit a PR to address the issue.

Let me know if you have any preferences on the implementation direction — whether it’s exposing a width prop directly or making the component respect the components.Layout.siderWidth token from Ant Design. I can move forward accordingly.

Looking forward to your feedback!

I believe it should respect components.Layout.siderWidth but I have no idea why it doesn't. I need to debug to find solution. If you can found, It would be great 🙌 Because currently our hands are full with Refine v5 and Refine AI 🥲

[Dhruv-1312]

Hi! 👋
Thanks for getting back. Yes, I’d be happy to work on this and submit a PR to address the issue.
Let me know if you have any preferences on the implementation direction — whether it’s exposing a width prop directly or making the component respect the components.Layout.siderWidth token from Ant Design. I can move forward accordingly.
Looking forward to your feedback!

I believe it should respect components.Layout.siderWidth but I have no idea why it doesn't. I need to debug to find solution. If you can found, It would be great 🙌 Because currently our hands are full with Refine v5 and Refine AI 🥲

@alicanerdurmaz , It looks like the reason components.Layout.siderWidth isn’t being respected is because the ThemedSiderV2 component currently uses a hardcoded default width of 200px and collapsed width of 80px internally. The value isn’t being read from the Ant Design theme tokens at all, which explains why updating components.Layout.siderWidth in the ConfigProvider has no effect.

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.